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

نمایش مطالب مرتبط در وردپرس یکی از راهکارهای بسیار کارآمد برای افزایش بازدید سایت و کم کردن 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();
?>

<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>

دقت کنید که در کد بالا دو عدد 180 و 260 وجود دارد که شما باید در این قسمت همان عددی را وارد کنید که در کد تصویر شاخص در فایل functions.php وارد کردید. به یاد داشته باشید که این اندازه باید دقیقاً مثل یکدیگر باشد.

توجه داشته باشید که با انجام کارهایی که در بالا به آن اشاره شد مطالب شما یک ظاهر کاملاً ساده‌ای خواهد داشت و شما باید مطالب خود را به یک شکل بسیار زیبا به‌نمایش در بیاورید. که این موضوع با استفاده از کدهای CSS امکان‌پذیر است.درواقع شما این امکان را دارید که جلوه ویژه‌ای به مطالب خود با استفاده از مدهای سی‌اس‌اس دلخواه خود بدهید.

حالا که بخش مطالب مرتبط به قالب سایت شما اضافه‌‌شده برای زیباتر شدن کار می‌‌توانید کد زیر را در فایل 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;}