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

5 / 5. تعداد رای: 2

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

دلت می‌خواد وب‌سایتت اونقدر جذاب باشه که وقتی کسی سری بهش می‌زنه، حس کنه تو یه کافه دنج نشسته و دلش نمی‌خواد بلند بشه؟ خوب، من یه راز کوچولو باهات دارم که می‌تونه توی این مسیر بهت کمک کنه: نمایش پست های مرتبط در وردپرس.

حالا فکر کن، کاربر داره تو سایتت چرخ می‌زنه، یهو با مطالبی روبه‌رو می‌شه که انگار دقیقا همون چیزیه که دلش می‌خواسته. این یعنی چی؟ یعنی اینکه تو داری یه تجربه خاص و منحصربه‌فرد بهش ارائه می‌دی، و این دقیقا همون چیزیه که باعث می‌شه بخواد بیشتر و بیشتر تو سایتت بمونه.

بذارین براتون قدم به قدم توضیح بدم چجوری می‌شه این کارو بکنیم بدون اینکه نیازی به افزونه‌های اضافی داشته باشیم:

تصویر شاخص، دلبری از نوع وردپرسی!

اولین قدم، اینه که به مطالبت یه تصویر شاخص جذاب اضافه کنی. اینجوری وقتی کاربر داره چرخ می‌زنه تو سایتت، چشمش به تصویر می‌خوره و می‌گه واو! برای اینکار، فایل functions.php قالبت رو باز کن و این دو خط کدو بهش اضافه کن:

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

این کد، مثل یه جادو عمل می‌کنه و به قالبت اجازه می‌ده تا با تصاویر شاخص، هنرنمایی کنه.

جادوی کدنویسی، وقتی پلاگین نمی‌خوای!

حالا که می‌خوایم بخش پست‌های مرتبط رو بسازیم، نیازی به پلاگین نداریم. می‌تونیم با کمی کدنویسی این کارو انجام بدیم. راهنمایی‌های منو دنبال کن:

وارد فایل 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, // تعداد پست‌های مرتبط برای نمایش
            '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="<?php the_permalink()?>"><?php the_post_thumbnail(array(260,180)); ?><br />
        <?php the_title(); ?>
        </a>
    </div>
     
<?php
        }
    }
    $post = $orig_post;
    wp_reset_query();
?>
</div>

از استایل غافل نشو!

خب، حالا که جادوی کدنویسی‌مون تقریبا تموم شده، یه قدم دیگه باقی مونده: اینکه بخش پست‌های مرتبطمون چه شکلی به نظر برسه. واسه این کار، یه دور دیگه بریم سراغ فایل style.css قالبمون و با کمی استایل دهی، جلوه‌ای خاص به اون بدیم:

.relatedposts {
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
    padding: 20px;
    background-color: #f9f9f9; /* پس‌زمینه */
}
.relatedposts h3 {
    margin-bottom: 15px;
    color: #333; /* رنگ عنوان */
}
.relatedthumb {
    width: 23%;
    float: left;
    margin: 0 1%;
    box-shadow: 0 0 8px rgba(0,0,0,0.1); /* سایه‌های زیبا */
}
.relatedthumb img {
    width: 100%;
    height: auto;
}
.relatedthumb a {
    text-decoration: none;
    color: #000; /* رنگ لینک */
    display: block;
    padding: 5px;
}
.relatedthumb a:hover {
    background-color: #eee; /* رنگ پس‌زمینه هنگام هاور */
}

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

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

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

بیا یه کم هم در مورد سئو حرف بزنیم

نباید از نظر دور داشت که این کار، به سئوی سایتت هم کمک شایانی می‌کنه. وقتی کاربران زمان بیشتری رو در سایتت سپری می‌کنن و از صفحه‌ای به صفحه‌ی دیگه می‌پرن، نشون می‌ده که محتوای سایت براشون ارزشمنده و این دقیقا چیزیه که موتورهای جستجو دوست دارن. پس، با این کار نه تنها کاربرانت رو خوشحال می‌کنی، بلکه رتبه‌ی سایتت تو نتایج جستجو هم بهبود پیدا می‌کنه.

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

توی این مسیر، هرچقدر هم که با دقت و علاقه پیش بری، یادت باشه که تجربه کاربری رو همیشه در اولویت قرار بدی. یه وب‌سایت که همه چیز توش روان و دلنشین باشه، نه تنها کاربران رو خوشحال می‌کنه، بلکه باعث می‌شه موتورهای جستجو هم ازت خوششون بیاد و رتبه‌بندیت رو بهتر کنن.

و اما، نکته آخر: فراموش نکن که دنیای وردپرس و سئو همیشه در حال تغییر و تحوله. پس، همیشه چشماتو باز نگه دار، دانشت رو به‌روز نگه دار و از نوآوری‌ها و ایده‌های جدید استقبال کن. وب‌سایتت مثل یه باغ زنده است؛ هرچی بیشتر مراقبت کنی، بهتر و زیباتر رشد می‌کنه.

به امید دیدن وب‌سایتت در صدر لیست جستجوها و داشتن کاربرانی که نه تنها یک بار، بلکه بارها و بارها به سراغ محتوایت می‌آیند. پس، بزن به دست کار و شروع کن به ساختن یک تجربه وب‌گردی فوق‌العاده برای آن‌ها. موفق و پیروز باشی!

نکته خاصی هست که این مقاله رو تکمیل‌تر کنه؟

  1. U33965 ۴ دی ۱۳۹۹

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

  2. U31932 ۲۳ آبان ۱۳۹۹

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

    • تیم پشتیبانی تیم پشتیبانی ۲۴ آبان ۱۳۹۹

      با سلام
      مراحل توضیح داده شده در آموزش رو باید مجدد اجرا کنید. کدها و مراحل دقیقا همین هست

  3. U11122 ۲۶ شهریور ۱۳۹۸

    سلام . آیا فایل single.php همون فایلیه که در قالب هستش؟ من تو قالب اصلی دارمش اما تو قالب فرزند نه!!
    بخاطر اینکه یسری شخصی سازی انجام دادم باید از قالب فرزند استفاده کنم… و اینکه داخل همون قالب اصلی هم کد php endwhile رو پیداش نکردم… در صورتیکه توی قالب های پش فرض وردپرس هستش. قالبمم انفولد هست

    • تیم پشتیبانی تیم پشتیبانی ۲۶ شهریور ۱۳۹۸

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

  4. کاربر مهمان ۲۱ دی ۱۳۹۷

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

  5. کاربر مهمان ۷ دی ۱۳۹۷

    درود . آیا کدی هس که بشه مطالب مرتبط همون دسته رو فقط بیاره؟

  6. کاربر مهمان ۹ اردیبهشت ۱۳۹۷

    سلام آقای حسینی. من این کد رو قبل از end while مربوط به حلقه فراخوانی مطلب قرار داده م. ولی متاسفانه پیام زیر رو درباره endwhile و endif میده. دلیلش چیه؟
    Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in C:\xampp\htdocs\wp\wp-content\themes\golesarv\single.php on line 89

  7. U6469 ۲۳ تیر ۱۳۹۶

    سلام. این کدی که گذاشتید، مطالب مرتبط را نشان نمیدهد بلکه آخرین مطالب ارسال شده را نشان می دهد.

    • Reza Rad رضا راد ۲۴ تیر ۱۳۹۶

      سلام در صورتی که مطلبی با برچسب مشابه وجود نداشته باشد آخرین مطالب سایت را نمایش خواهد داد

  8. کاربر مهمان ۱۲ تیر ۱۳۹۶

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

  9. کاربر مهمان ۲۰ تیر ۱۳۹۵

    کد رو مطابق دستور شما قرار دادم ولی این خطا رو داد :
    Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in C:\wamp\www\7\wp-content\themes\theme7\single.php on line 222

  10. کاربر مهمان ۲۰ تیر ۱۳۹۵

    سلامشما از افزونه استفاده می کنید برای نمایش مطالب مرتبط؟اگه از کد استفاده می کنید لطفا کدشو کامل بزارید : اگه شد تو فایل txt برای دانلود بزارید.مرسی

  11. کاربر مهمان ۱۳ دی ۱۳۹۴

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

    • Reza Rad رضا راد ۱۴ دی ۱۳۹۴

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

      .relatedthumb img {margin: 0 0 3px 0; padding: 0;}