【WordPress】プラグインなしで人気記事一覧を表示する方法

今回は、主にサイドバーで使用される「人気記事一覧」を表示する方法を解説します。

プラグインを使用して表示させることもできるみたいですが、メンテナンスの観点からプラグインの使用数を減らしたいため、「functions.php」を使用して表示させる方法をご紹介いたします。

それでは解説します！

プラグインなしで人気記事一覧を表示する方法

完成形は、このようになります。

「functions.php」に、以下のコードを記述

function getPostViews($postID) {
  $count_key = 'post_views_count';
  $count = get_post_meta($postID, $count_key, true);
  if ($count == '') {
    delete_post_meta($postID, $count_key);
    add_post_meta($postID, $count_key, '0');
    return '0 PV';
    // return '0 View';
  }
  return $count.' PV';
  // return $count.'Views';
}

function setPostViews($postID) {
  $count_key = 'post_views_count';
  $count = get_post_meta($postID, $count_key, true);
  if ($count == '') {
    $count = 0;
    delete_post_meta($postID, $count_key);
    add_post_meta($postID, $count_key, '0');
  } else {
    $count++;
    update_post_meta($postID, $count_key, $count);
  }
}

remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

補足

１）１つ目の関数「getPostViews」は、投稿記事の閲覧数（PV）を表示させるための関数です。

２）１つ目の関数「setPostViews」は、投稿記事の閲覧数（PV）をカウントするための関数です。

「人気記事一覧」を表示させたい箇所に、以下のコードを記述

<!-- 人気記事 -->
<div class="views">
  <p class="views__title">人気記事</p>

  <div class="views-cards">
    <?php
      // 必須 ここから
      setPostViews(get_the_ID());
      // 必須 ここまで

      $args = array(
        'post_type' => 'news',
        'posts_per_page' => 3,

        // 必須 ここから
        'orderby' => 'meta_value_num',
        'meta_key' => 'post_views_count'
        // 必須 ここまで

      );
      $the_query = new WP_Query($args);
    ?>
    <?php if($the_query->have_posts()): ?>
      <?php while($the_query->have_posts()): $the_query->the_post(); ?>

        <article class="views-card">
          <a class="views-card__link" href="<?php the_permalink(); ?>">
            <div class="views-card__thumbnail">
              <?php if(has_post_thumbnail()): ?>
                <?php the_post_thumbnail('full'); ?>
              <?php endif; ?>
            </div>
            <h2 class="views-card__title"><?php the_title(); ?><span><?php echo getPostViews(get_the_ID()); ?></span></h2>
          </a>
        </article>

      <?php endwhile; ?>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>
  </div>
</div>

補足

１）コメントアウトで挟んでいる箇所は、必須項目です。

２）「getPostViews(get_the_ID()」で、投稿記事の閲覧数（PV）を表示させております。

CSS

CSSも追記しておきます。

.views__title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.views-card:nth-child(n + 2) {
  margin-top: 30px;
}

.views-card__link {
  display: block;
  transition: opacity .6s;
}

.views-card__link:hover {
  opacity: 0.6;
}

.views-card__thumbnail {
  position: relative;
  width: 100%;
  margin-bottom: 5px;
}

.views-card__thumbnail:before {
  display: block;
  padding-top: 56.25%;
  content: '';
}

.views-card__thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.views-card__title {
  margin-bottom: 5px;
  color: #343434;
  font-size: 16px;
  font-weight: 500;
}

.views-card__title span {
  margin-left: 8px;
  color: #999;
  font-size: 13px;
}