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

نمایش مطالب مرتبط در وردپرس یکی از راهکار های بسیار کارآمد برای افزایش بازدید سایت و کم کردن bounce rate سایت شماست. شما باید کاربر سایت رو به هر شکلی که شده در سایت نگه دارید و نرخ پرش (bounce rate) خود را کمتر کنید. با نمایش مطالب مرتبط با موضوع نمایشی در سایت شما ، کاربر مابقی مطالب سایت شما را هم مطالعه می کند و در نتیجه بازدید کننده سایت شما را برای همیشه در خاطر نگه می دارد.

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

افزودن تصویر شاخص به وردپرس

ابتدا باید برای مطالب سایتتان تصویر شاخص مشخص کنید. برای اینکار فایل functions.php قالب وردپرس خود را باز کرده و کد زیر را در آن کپی کنید.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 260, 180, true );

اگر می خواهید سایز تصویر نمایشی در بخش مطالب مرتبط را تغییر دهید با تغییر 260 و 180 در کد بالا می توانید به ترتیب پهنا و ارتفاع تصاویر را تغییر دهید.

حالا که تصویر شاخص شما ساخته شد برای ساخت اتوماتیک تصویر شاخص از مطالب سایتتون افزونه auto post thumbnail فارسی رو نصب و فعال کنید.

افزودن بخش مطالب مرتبط به قالب وردپرس

حالا باید وارد فایل single.php شوید. فایل single.php در واقع شامل کد های صفحه ادامه مطلب سایت شماست. دنبال کد php endwhile بگردید و قبل از آن کد زیر را قرار دهید.

<div class="relatedposts">
<h3>مطالب مرتبط با این نوشته</h3>
<?php
    $orig_post = $post;
    global $post;
    $tags = wp_get_post_tags($post->ID);
     
    if ($tags) {
    $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
    $args=array(
    'tag__in' => $tag_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=>4, // Number of related posts to display.
    'caller_get_posts'=>1
    );
     
    $my_query = new wp_query( $args );
 
    while( $my_query->have_posts() ) {
    $my_query->the_post();
    ?>
     
    <div class="relatedthumb">
        <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(260,180)); ?><br />
        <?php the_title(); ?>
        </a>
    </div>
     
    <? }
    }
    $post = $orig_post;
    wp_reset_query();
    ?>
</div>

دقت کنید در کد بالا هم در بخش 260,180 باید اندازه تصویر شاخص وارد شده در فایل functions.php را قرار دهید. دقیقا همان اندازه!

کد سی اس اس برای زیباتر شدن

حالا که بخش مطالب مرتبط به قالب سایت شما اضافه شده برای زیباتر شدن کار کد زیر رو هم در فایل style.css قالب وردپرس خودتون قرار بدید. 🙂

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

به همین راحتی 😀 با چند خط کد زیبا و تمیز به راحتی شما صاحب بخش مطالب مرتبط در وردپرس شدید. از وردپرس لذت ببرید!