نحوه ساخت سبک هر پست متفاوت با پست دیگر در وردپرس

سلام خدمت شما دوستان عزیز

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

با ای تاتس همراه باشید 🙂

قدم اول : یکپارچه سازی پست های فردی در وردپرس


وردپرس ، کلاس CSS پیش فرض را به عناصر مختلف در وب سایت شما اضافه می کند. استاندارد WordPress مطابق با قالب  باید کد مورد نیاز توسط وردپرس برای اضافه کردن کلاس های CSS برای Body، پست ها، صفحات، ویجت ها، منوها و بیشتر یکی باشد
یک تابع اصلی وردپرس به نام post_class () توسط تم ها برای گفتن وردپرس که در آن برای اضافه کردن کلاس های CSS پیش فرض برای پست ها استفاده می شودهست .

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

Default CSS classes for WordPress post

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

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name
  • .format-{format-name}
  • .type-{post-type-name}
  • .has-post-thumbnail
  • .post-password-required
  • .post-password-protected

یک خروجی مثال مانند این است:

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

شما می توانید هر پست وردپرس را با استفاده از کلاس های مربوطه CSS متفاوت بسازید.

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

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

فراموش نکنید که ID پست را تغییر دهید تا با خودتان مطابقت داشته باشد.


این بار همه پست های تحت یک گروه خاص به نام news را سبک می کنیم.

ما می توانیم این را با افزودن CSS سفارشی زیر به قالبمان اضافه کنیم

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

این CSS بر تمام پست های تحت رده بندی خبر تاثیر می گذارد.

قدم دوم : تابع کلاس پست


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

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

بسته به قالب شما، تابع post_class را در فایل تک.php یا در فایل های قالب پیدا خواهید کرد. به طور معمول کد چیزی شبیه به این خواهد بود:

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

شما می توانید کلاس CSS سفارشی خود را با یک ویژگی مانند این اضافه کنید:

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

post_class از کلاس CSS پیش فرض مربوطه با کلاس CSS سفارشی شما را چاپ می کند.

اگر می خواهید چند کلاس CSS اضافه کنید، می توانید آنها را به صورت آرایه تعریف کنید و سپس آنها را در تابع post_class فراخوانی کنید.

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

قدم سوم :پست های سبک متفاوت بر اساس نویسندگان


کلاس CSS پیش فرض ایجاد شده توسط تابع the_posts شامل نام نویسنده به عنوان یک کلاس CSS نیست.

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

شما می توانید با استفاده از قطعه زیر این کار را انجام دهید:

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

این کد nicename کاربر را به عنوان یک کلاس CSS اضافه می کند. Nicename یک نام کاربری URL مناسب است که توسط WordPress استفاده می شود. این فضاها را ندارد و تمام کاراکترها در حروف کوچک هستند که باعث می شود که آن را به عنوان یک کلاس CSS مناسب استفاده کنید.

کد بالا به شما خروجی مانند این را می دهد:

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

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

.peter { 
background-color:#EEE;
border:1px solid #CCC; 
}

قدم چهارم: پست های سبک بر اساس محبوبیت با استفاده از نظر تعداد


شما ممکن است سایت هایی با ویجت پست های محبوب داشته باشید که بعضی اوقات براساس تعداد نظرات است. در این مثال، ما به شما نشان می دهیم که چگونه با استفاده از تعداد نظرات، سبک های ارسال شده متفاوت است.

ابتدا ما باید تعداد نظرات را به دست آوریم و کلاس را با آن مرتبط کنیم.

برای دریافت تعداد نظرات، باید کد زیر را در فایل های تم خود اضافه کنید. این کد داخل حلقه وردپرس می رود، بنابراین شما می توانید آن را درست قبل از <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';
    }
?>

این کد بررسی تعداد دفعات مشاهده شده برای پست نمایش داده می شود و آنها را بر اساس شمارش ارزش. به عنوان مثال، پست هایی با کمتر از 10 نظر یک کلاس جدید به دست می آورند، کمتر از 20 به عنوان در حال ظهور نامیده می شوند، و هر چیزی بیش از 20 نظر محبوب است.

بعد، شما باید کلاس CSS را به تابع post_class اضافه کنید.

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

این کلاس های جدید، در حال ظهور و محبوب CSS را به همه پست ها بر اساس تعداد نظرات هر پست اضافه خواهد کرد.

شما می توانید CSS سفارشی را به سبک پست ها بر اساس محبوبیت اضافه کنید:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

ما فقط اضافه کردن مرزها می کنیم، می توانید هر قواعد CSS را که می خواهید اضافه کنید.

قدم پنجم : پست های سبک بر اساس زمینه های سفارشی


کلاس های CSS هارد کادویی در فایل تم شما را محدود به کلاس های خاص CSS محدود می کند. اگر می خواهید تصمیم بگیرید که کدام کلاس CSS برای اضافه کردن به یک مقاله در هنگام نوشتن آن چه می خواهید؟

با زمینه های سفارشی، شما می توانید کلاس های CSS را در Fly اضافه کنید.

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

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

فراموش نکنید که روی دکمه «افزودن فیلد سفارشی» کلیک کنید تا آن را ذخیره کنید و سپس پست خود را ذخیره کنید.

بعد، فایل های تم خود را ویرایش کنید تا فیلد سفارشی خود را به عنوان کلاس پست نمایش دهید.

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

این HTML زیر را نمایش می دهد:

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

شما هم اکنون می توانید CSS سفارشی برای post_class که با استفاده از فیلد سفارشی اضافه کرده اید اضافه کنید.

.trending{
background-color:##ff0000;
}

فیلدهای سفارشی می تواند مقادیر چند داشته باشد، بنابراین شما می توانید چند کلاس CSS با استفاده از همان نام اضافه کنید.

راه های مختلفی برای پست کردن نوشته های وردپرس وجود دارد. همانطور که مهارت های شما رشد می کند، شما کشف روش های جدید را برای سبک پست ها با استفاده از شرایط مختلف خواهید کرد.

امیدوارم بهره کافی را برده باشید 🙂

مطالب مرتبط

آموزش نصب و فعالسازی IDM

آموزش تصویری ساخت حساب جیمیل Gmail Account

نحوه اضافه کردن لوگو داشبورد سفارشی در وردپرس

نحوه کپی کردن پایگاه داده وردپرس با استفاده از phpMyAdmin

نحوه استفاده از کد کوتاه در وردپرس

نحوه تغییر اندازه تصویر Gravatar در وردپرس

نحوه ساخت سبک هر پست متفاوت با پست دیگر در وردپرس

محتوای مطلب

کامنت ها

لطفا اگر سوالی نامرتبط با این مطلب دارید، از تب «پرسیدن سوال» استفاده کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

<