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

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

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

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

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

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

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

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

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

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

علاوه‌براین برای اینکه نوشته‌های شما یک نظم خاص داشته باشند و برای کاربر جلوه زیباتری داشته باشد می‌توانید از کد 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;}

به همین راحتی ? با چند خط کد زیبا و تمیز به‌راحتی شما صاحب بخش مطالب مرتبط در وردپرس شدید. از وردپرس لذت ببرید!

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

نظر شما در مورد این مقاله چیست؟

  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;}