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

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

برای این منظور پلاگین های مختلفی تا حالا تعبیه شده، اما واقعا ساخت یه همچین قسمتی کار چندان سختی نیست، وقتی میشه تنها با چند کد ساده یک باکس از “مطالب مشابه” زیبا رو در سایت قرار داد، چرا باید رو به سمت پلاگین های مختلف بیاریم؟!؟

به همین خاطر امروز آموزشی رو آماده کردم که به کمکش میتونید به راحتی از باکس مطالب مشابه در وبسایتتون بهره مند شید، پس همراه ما باشید…

مهمترین قسمت کار قرار دادن کد زیر در تک نوشته  (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;}

امیدوارم که این آموزش مفید بوده باشه باشه.
تا درودی دیگر، بدرود…

منبع : alimir.ir