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

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

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

ساختار HTML5 و CSS3 نمایش پربازدیدترین مطالب وردپرس

در ابتدا باید ساختار HTML5 برای نمایش پربازدیدترین مطالب را بسازیم که کد زیر مناسبه:

      <ul>
        <li>
          <a href="#" title="#">
            <img src="image.jpg" width="50" height="50" alt="#" />
            <div class="title">
              <h2>عنوان پست. تست عنوان پست</h2>
              <span>بازدید: 100</span>
            </div>
          </a>
        </li>
      </ul>

حالا باید برای ظاهر زیبا کدهای CSS3 رو به پروژه اضافه می‌کنیم:

      .most-viewed-posts {
        width: 100%;
        direction: rtl;
      }

      .most-viewed-posts ul {
        list-style: none;
      }

      .most-viewed-posts ul li {
        display: inline-block;
        float: right;
        width: 100%;
        margin-bottom: 7px;
      }

      .most-viewed-posts ul li:last-child {
        margin-bottom: 0;
      }

      .most-viewed-posts ul li a {
        display: block;
      }

      .most-viewed-posts ul li a img {
        float: right;
        margin-left: 10px;
      }

      .most-viewed-posts ul li a .title {
        float: right;
      }

      .most-viewed-posts ul li a .title h2 {
        margin: 0 0 7px;
        font-size: 16px;
      }

      .most-viewed-posts ul li a .title span {
        font-size: 12px;
      }

کد شمارنده تعداد بازدیدها

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

function getPostViews($post_id)
{
    if (intval($post_id)) {
        $post_view = get_post_meta($post_id, 'views', true);
        return intval($post_view);
    }
    return 0;
}

function setPostViews($post_id)
{
    $views = getPostViews($post_id);
    $views++;
    update_post_meta($post_id, 'views', $views);
}

در کد بالا با استفاده از تابع ()setPostViews تعداد بازدیدها را ثبت میکنیم. کل کدهای بالا را در فایل functions.php قالب خود قبل از بسته شدن تگ PHP قرار دهید؛ سپس کد زیر رو در فایل single.php قالب قرار دهید:

setPostViews(get_the_ID());

از این به بعد هربار که صفحه مطلب لود شود، یک شماره به تعداد بازدیدهای مطلب افزوده خواهد شد!

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

حالا که تعداد بازدیدهای هر پست رو ثبت کردیم، میتونیم به راحتی با استفاده از کوئری های دلخواه، پربازدیدترین مطالب وردپرس رو بدون افزونه های جانبی نمایش داد. البته نحوه کار پلاگین های نمایش پربازدیدترین مطالب هم به همین صورت هستش (در ساده ترین حالت!).

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

$mvArgs = [
  'post_type'       =>  'post',
  'posts_per_page'  =>  '10',
  'post_status'     =>  'publish',
  'orderby'         =>  'meta_value_num',
  'meta_key'        =>  'views',
];

$mvQuery = new WP_Query( $mvArgs );

قلب تپنده این مطلب همین تکه کد بالاست! در کد بالا ابتدا یک آرایه تعریف کرده ایم و سپس آن را به کلاس WP_Query ارسال کرده و شی مورد نظر که دارای 10 پست پر بازدید هستش رو درون متغیر $mvQuery ریخته ایم. برای کاهش یا افزایش تعداد پست ها عدد 10 رو تغییر بدید.

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

if( $mvQuery->have_posts() ) {
  while( $mvQuery->have_posts() ) {
    $mvQuery->the_post();
    
    // some code in here

  }
}
wp_reset_postdata();

ابتدا در خط اول باید بفمیم که آیا کوئری ما پستی برای نمایش دارد یا خیر؛ که این کار با have_posts() انجام خواهد شد و چون کوئری دلخواه است به صورت $mvQuery->have_posts() استفاده خواهد شد.

در خط دوم میگوییم که تا وقتی که پستی در این کوئری برای نمایش وجود دارد کدهای زیر را اجرا کن.

خط سوم هم به همین پست بازگشتی اشاره میکند. توجه داشته باشید که اگر خط سوم نباشد، کوئری تا بی نهایت اجرا خواهد شد! پس حتما آنرا درج کنید.

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

کد بالا را به کد زیر تغییر دهید:

<?php

$mvArgs = [
  'post_type'       =>  'post',
  'posts_per_page'  =>  '10',
  'post_status'     =>  'publish',
  'orderby'         =>  'meta_value_num',
  'meta_key'        =>  'views',
];

$mvQuery = new WP_Query( $mvArgs );

if( $mvQuery->have_posts() ) {
  ?>
<div class="most-viewed-posts">
    <ul>

        <?php
  while( $mvQuery->have_posts() ) {
    $mvQuery->the_post();
    ?>

        <li>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <img src="<?php the_post_thumbnail_url(); ?>" width="50" height="50" alt="<?php the_title(); ?>" />
                <div class="title">
                    <h2><?php the_title(); ?></h2>
                    <span>بازدید: <?php echo getPostViews( get_the_ID() ); ?></span>
                </div>
            </a>
        </li>

    <?php } ?>
    </ul>
</div>

<?php
}

wp_reset_postdata();

از تابع the_permalink() برای درج لینک پست، the_title() برای درج عنوان و the_post_thumbnail_url() برای درج لینک تصویر پست استفاده کردیم.

اگر می خواهید که تعداد بازدید هر پست را نیز نمایش دهید، از تابع getPostViews() استفاده کنید و آیدی پست را به آن ارسال کنید ( به صورت echo getPostViews( get_the_ID() ) ).

و قدم آخر ریست کردن کوئری است. اینکار با استفاده از wp_reset_postdata() انجام میشود. اینکار از تداخل کوئری ها در قالب سایت شما جلوگیری خواهد کرد.

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

اگر سوالی داشتید حتما در کامنتها بپرسید

درج نظر
نظر خود را درباره نمایش حرفه ای پربازدیدترین مطالب وردپرس بدون افزونه بنویسید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات کاربران

هنوز هیچ نظری برای این پست ثبت نشده است. شما اولین نفر باشید!