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

بدون شک یکی از مزایای استفاده از وردپرس افزونه های (plugins) آن است. افزونه های وردپرس تقریبا هرچیزی را که شما برای گسترش سایت خود تصور می کنید را پوشش می دهند. از افزودن ویژگی های بسیار عالی گرفته تا بهینه سازی برای موتور های جستجو و ….
تعداد زیادی از افزونه های محبوب وردپرس حول محور مطالب مرتبط ساخته شده اند. از آنجایی که وردپرس چیز استانداردی برای این ویژگی در نظر نگرفته است کاربران از میان این افزونه ها یکی را برای نمایش مطالب مرتبط انتخاب می کنند.اما لازم نیست شما از هیچ افزونه ای استفاده کنید. در این آموزش به شما می گوییم که چگونه مطالب مرتبط, همراه با تصویر شاخص را بدون استفاده از هیچ افزونه ای به سادگی به وردپرس اضافه کنید.

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

برای افزودن مطالب مرتبط به سایت شما, ما از برچسب های مطالب کمک می گیریم, بعنی مطالبی که دارای برچسب های مشابه هستند را در صفحه مطالب نشان می دهیم.

گام اول: تصویر شاخص

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

add_theme_support( 'post-thumbnails' );

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

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );

گام دوم: کد اصلی مطالب مرتبط

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

<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, // تعداد مطالب مرتبط.
				'ignore_sticky_posts' => 1
			);
		}
		$my_query = new wp_query( $args );
		while( $my_query->have_posts() ) :
			$my_query->the_post(); ?>
			<div class="relatedthumb">
				<a rel="external" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(150,100)); ?><br />
				<?php the_title(); ?>
				</a>
			</div>
		<?php endwhile;
	endif;
	$post = $orig_post;
	wp_reset_query(); ?>
</div>

در کد بالا قطعه کد

 the_post_thumbnail(array(150,100) 

اندازه تصویر شاخص مطالب شما را مشخص می کند.

گام سوم: افزودن کد های css

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

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

در کد css بالا عرض تصاویر شاخص ۱۵۰px در نظر گرفته شده است. اما شما می توانید این عدد را تغییر دهید. برای تغییر عرض تصویر شاخص بجز تغییر در کد css باید عرض جدید را هم در فانکشن و هم در کد اصلی مطالب مرتبط نیز تغییر بدید.

نتیجه کار

کار تمام شد حال بخش جدید مطالب مرتبط سایت شما باید چیزی شبیه به تصویر زیر شده باشد. از اینجا به بعد دیگه به سلیقه شما ربط پیدا می کنه, شما با استفاده از کدهای css می تونید شکل این بخش را تغییر بدید.