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

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

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

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

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

نمایش مطالب مرتبط در وردپرس یکی از راهکارهای بسیار کارآمد برای افزایش بازدید سایت و کم کردن 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;}

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

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