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

دسته‌ها : آموزش, وردپرس علی میرزائی 15 دیدگاه‌ها

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

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

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

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

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

دیدگاه کاربران در مورد این نوشته

  1. سلام تو وبلاگ هم میشه این کارو کرد ( سرویس وبلاگ دهی بیان)

    توسط ابوالفضل ابراهیمی پاسخ

  2. سلام داداش
    میگم شما برای قالب خودتون هم از همین کد استفاده کردید؟

    توسط علی پاسخ

    1. سلام. در نسخه های قبلیمون آره. ولی در قالب جدید از افزونه سفارشی شده استفاده میکنیم که متدهای بررسی بیشتری نسبت به این کد داره.

      توسط علی میرزائی پاسخ

  3. آقا اولا سلام و بعد تشکر فراوان از مطالب کاربردی و جالب سایت شما .
    http://nikoseresht.net

    توسط فرهاد پاسخ

  4. سلام
    استفاده کردم.
    ممنون دوست گرامی
    موفق باشی

    توسط سهیل پاسخ

    1. خواهش میکنم سهیل جان،
      زنده باشی…

      توسط علی میرزائی پاسخ

  5. عالی بود :)

    توسط امید پاسخ

  6. یه سوال هم داشتم اینکه من رنگ فونتها وقتی نشانگر روی آن میرود، تغییر دادم ولی قبول نکرد. به شکل زیر نوشتم:
    .related-posts ul a:hover {
    color:f66eae !important;
    margin-right:10px;
    }

    ولی رنگ فونت تغییری نمی کند. حتی کلا این قسمت کد رو برداشتم که از استایل اصلی قالب پیروی کند ولی باز هم رنگش تغییری نمی کند. مشکل از کجاست؟

    توسط airin پاسخ

  7. با تشکر از آموزش خوبتون
    من از این استفاده کردم. البته یه جایی مشکل داشت که نوشته ها روی هم می افتاد و اونم بخاطر اینه که توی این دو تا کد در css :
    margin-right:-20px;margin-top:-10px
    مقادیر باید 20 و 10 باشند که به اشتباه -20 و -10 (منفی) خورده که ایجاد مشکل میکنه. اون دو تا منفی رو برداشتم درست شد.
    ممنون

    توسط airin پاسخ

  8. سلام
    چطور خودم مطالب مرتبط رو انتخاب کنم؟
    اینطوری خودش 5 نوشته اولم رو میاره!میخوام خودم از توی برگه یا دسته ی خاص انتخاب کنم

    توسط احسان پاسخ

    1. سلام،
      دقیقا نمیشه گفت که اون شکلیه! در واقع این کد مطالب مرتبط هم دسته ای رو نمایش میده.
      با اینحال اگه میخوای کنترل بیشتری روش داشته باشی، میتونی از کوئری استفاده کنی.
      اینم یه ژنراتور خوب برای ساخت کوئری:
      http://tiny.alimir.ir/x

      توسط علی میرزائی پاسخ

  9. خوب توسط کد دیگری مشکل رو برطرف کردم دقیقا داخل حلقه بودش.
    حالا اگر بخواهیم مثل برای شما یک علامت کنار لینک بگذاریم باید چه کار کنیم؟
    مثل علامت تیک شما

    توسط طنزکده پاسخ

    1. با استفاده از دستورات سی اس اس، به rel ul li بک گراند بده و فاصلش رو با padding تنظیم کن.

      توسط علی میرزائی پاسخ

  10. سلام همکار گرامی خسته نباشید
    کد بسیار خوب خوبی هستش ممنونم از آموزش شما
    ولی متاسفانه وقتی این کد را داخل سایتم گذاشتم در قسمت پست های پیشنهادی هیچ چیزی ننوشت در تمامی نوشته های سایتم چیزی نبود.
    این هم عکس برای نمونه
    http://upload7.ir/images/14324823433728391510.jpg

    توسط طنزکده پاسخ

    1. سلام، ممنونم.
      اگه لینک آنلاین میدادی خیلی خیلی بهتر بود.
      اول بذار این نکته رو بگم که اساس کار این قطعه کد بر روی پست های هم دسته متمرکزه، بنابراین باید در هر دسته حداقل چند مطلب برای نمایش داشته باشید.
      * البته اگه تو اینترنت سرچ کنید، کدهای دیگه ای هم هستن که با کلمات کلیدی کار میکنن، ولی خروجی این مورد از نظر من بهتر از بقیست.
      نکته ی مهم دیگه اینه که حتما باید کد رو داخل حلقه while استفاده کنید. از این رو که اشتباهی نکردید؟

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید