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

[Mohamad]

به نام خدا
امروز برای قالب جدیدی که برای یکی از سایت هامون داشتم روش کار میکردم دچار یک مشکل با پلاگین
related posts شدم که کار این پلاگین نشان دادن پست های مشابه در وردپرس هست
ناچارا تصمیم گرفتم به صورت دستی کدها را قرار بدم و با خودم فکر کردم چه بهتر که آموزش اون را در سایت هم قرار بدم
امیدوارم این آموزش مفید باشه


مهمترین قسمت کار قرار دادن کد زیر در تک نوشته (single.php) یا سایدباره (sidebar.php). البته اصولش اینه که این کد رو در تک نوشته ها و زیر مطالب قرار بدید تا وقتی که بازدید کننده به پایان مطلب میرسه اولین چیزی که ببینه پست های مشابه اون مطلب باشه. توجه : کد زیر ۵ مطلب مشابه رو نشون میده، اگه نیاز داشتید که تعداد رو کم یا زیاد کنید با ویرایش اون رقمی که کناره numberposts هست میتونید تغییرات مورد نظرتون رو اعمال کنید.

<div class="related-posts">
                    <h4> پست های پیشنهادی </h4>
<?php

$related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 5, 'post__not_in' => array($post->ID) ) );
if( $related ) foreach( $related as $post ) {
setup_postdata($post); ?>
    <ul>
        <li>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
    </ul>
<?php }
wp_reset_postdata(); ?>
                </div>

تا اینجای کار اگه به یکی از صفحاتتون مراجعه کنید میبینید که بخشی با تیتر پست های مشابه با تعدادی لینک در وبسایتتون به نمایش در اومده. اما چون داخل باکس مشخصی نیست ممکنه خیلی زیبا به نظر نرسه، بنابراین قطعه کد CSS زیر رو هم به شیوه نامتون (style.css) اضافه کنید و تغییرات به وجود اومده رو ببینید.
اینجا دیگه دست شما کاملا بازه و میتونید با ویرایش کد زیر هرنوع ظاهری رو که خواستید و مناسب قالب سایتتون بود، به راحتی پیاه سازی کنید.

.related-posts{    background:#E6FFB2    ; padding: 10px; margin: 0 0 15px 0;    -moz-border-radius: 8px;    -webkit-border-radius: 8px;    border-radius: 8px;
    overflow: auto;}.related-posts ul{margin-right:-20px;margin-top:-10px;}.related-posts ul a {color:#666;}.related-posts ul a:hover {color:#F00;margin-right:10px;}

این هم تصویر نمونه که در قالب جدید خود من اعمال کردم