خرید ارزدیجیتال تبلیغات
حراجی دامنه های ویژهمشاهده
اپوفایننس

نحوه نمایش متفاوت هر پست در وردپرس

مقالات,آموزش,ترفند , وردپرس

در این نوشته از آموزش وردپرس به شما نحوه نمایش متفاوت هر پست در وردپرس را نشان خواهیم داد.

 

نمایش متفاوت هر پست در وردپرس

وردپرس برای استایل یک نوشته به صورت پیش فرض، کلاس های CSS تعریف کرده است. یک سایت استاندارد دارای کلاس های CSS در بخش های بدنه ی اصلی، نوشته ها، برگه ها، ابزارک ها، فهرست ها و… می باشد.

 

در دسته ی وردپرس، عملکرد post_class() برای استفاده در قالب وردپرس و جهت افزودن کلاس های CSS سفارشی در برگه و پست به کار میرود و فراخوانی میشود.
چنانچه به وبسایت خود مراجعه کرده و از ابزار Inspect درمرورگراستفاده کنید کلاس سی اس اس مورد نظر در پست ها را خواهید دید. مانند تصویر زیر:

 

نحوه نمایش متفاوت هر پست در وردپرس

 

در ادامه میتوانید کلاس های CSS به طور پیش فرض که در دید کاربر ظاهر میشود آمده است که با آن می توان مقدمات نمایش متفاوت پست در وردپرس را فراهم کرد.

  • post-id.
  • post.
  • attachment.
  • sticky.
  • category-ID.
  • category-name.
  • tag-name.
  • has-post-thumbnail.

 

مثالی از خروجی آنها:

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

بنابراین به راحتی میتوان ظاهر و استایل هر پست را به صورت واکنش گرا تغییر داد. برای مثال، چنانچه می خواهید یک نوشته را به صورت متفاوت نشان دهید می توانید از post-id برای نمایش متفاوت پست در وردپرس استفاده کنید. مانند کد زیر:

.post-412 { 
background-color: #FF0303;
color:#FFFFFF; 
}

توجه: فراموش نکنید که باید آی دی پست را نیز تغییر دهید.

 

حال بطور مثال می خواهیم ظاهر تمامی پست های مربوط به دسته ی اخبار را تغییر دهیم اینکار را با افزودن CSS سفارشی به قالب انجام می دهیم.

.category-news{ 
font-size: 18px;
font-style: italic;
}

 

عملکرد کلاس هر پست در وردپرس

توسعه دهندگان قالب از عملگر post-class برای افزودن کلاس به نوشته استفاده میکنند که معمولا با تگ <article> است. این عملگر فقط برای بارگذاری به صورت پیش فرض نیست بلکه برای کلاس اختصاصی شما در نمایش متفاوت پست در وردپرس نیز به کار میرود.

با توجه به قالب مورد نظر می توانید این عملگر را در فایل single.php بیابید. به صورت نرمال این کد به شکل زیر است:

<article id="post-&lt;?php the_ID();?>"<?php post_class();?>>

شما میتوانید CSS اختصاصی و سفارشی خود را در آن به صورت زیر وارد کنید:

<article id="post-<?php the_ID();?>"<?php post_class('longform-article');?>>

عملگر post-class با حفظ حالت پیش فرض میتواند حالت سفارشی که به آن میدهید را اجرا کند. چنانچه می خواهید از عملکردهای چند تایی و چند منظوره در نمایش متفاوت پست در وردپرس استفاده کنید می توانید از چند آرایه کمک بگیرید. مانند زیر:

<?php $custom_classes = array('longform-article','featured-story','interactive',);?>
<article id="post-<?php the_ID();?>;"<?php post_class($custom_classes);?>>

تغییر ظاهر پست های نویسندگان در وردپرس

این کلاس به صورت پیش فرض دارای نام نویسنده نیست اما چنانچه می خواهید آن را سفارشی کنید اول آن را به صورت the-posts یافته و سپس قطعه کد زیر را در آن تغییر دهید.

<?php $author=get_the_author_meta('user_nicename');?>
<article id="post-<?php the_ID();?>"<?php post_class($author);?>>

ظاهر پست ها بر اساس محبوبیت نظرات

شاید وبسایت هایی را دیده باشید که از ابزارک نوشته های محبوب براساس نظرات کاربران استفاده میکنید. حال میخواهیم ببنیم چگونه میتوان این بخش را سفارشی کنیم .
برای ایجاد یک بخش سفارشی نظر سنجی نیاز به افزودن کد به فایل های قالب است. در هسته ی وردپرس میتوانید قطعه کد زیر را قبل از تگ <article> اضافه کنید.

<?php 
 $postid = get_the_ID();
 $total_comment_count = wp_count_comments($postid);
 $my_comment_count = $total_comment_count->;approved;
 if ($my_comment_count <10){
 $my_comment_count = 'new';
 } elseif ($my_comment_count <= 10 && $my_comment_count <20){
 $my_comment_count = 'emerging';
 } elseif ($my_comment_count <= 20){
 $my_comment_count = 'popular';
 }
?>

همانطور که مشاهده کردید به همین شکل میتوانید تغییراتی را در پست های خود ایجاد کنید و در واقع آنها را سفارشی کنید.
امیدوارم نکات ذکر شده در این نوشته برای شما کاربران گرامی مفید و کاربردی باشد.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=31141
کلمات کلیدی پست :
مطالب مرتبط
10,846شخصی سازی فرم ورود وردپرس با افزونه Custom Login تاریخ : 2017/06/18
6,791افزونه وردپرس ایجاد گالری عکس PhotoMosaic تاریخ : 2017/10/18
5,632DNSSEC چیست و چطور از آن استفاده کنیم؟ تاریخ : 2020/02/11
8,924دنبال کردن مطالب نویسنده خاص در وردپرس تاریخ : 2017/07/13
11,911تغییر سایز تصاویر به صورت گروهی در وردپرس با افزونه Imsanity تاریخ : 2017/08/3
12,524آموزش مخفی کردن ورژن وردپرس تاریخ : 2016/03/13
30,416افزونه ویرایشگر قالب مداد زرد Yellow Pencil نسخه 5.2.1 برای وردپرس تاریخ : 2016/02/10
23,616افزونه ورود به ووکامرس از طریق شبکه های اجتماعی WooCommerce Social Login تاریخ : 2020/05/22
8,481نمایش موقعیت کنونی کاربران در وردپرس با افزونه Breadcrumb تاریخ : 2017/12/9
5,500افزودن شماره تلفن و اسکایپ با قابلیت برقراری ارتباط در وردپرس تاریخ : 2019/05/13
6,306ارسال گزارش خطای 404 به ایمیل مدیر سایت وردپرسی تاریخ : 2018/02/21
5,528نمایش تصادفی کاربران در وردپرس تاریخ : 2019/05/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file