WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： プログラム >CMS

今回は、サイドバーなどでよく使われる「人気記事一覧」を実装する手順をご紹介します。
プラグインを使用することで比較的簡単に実装できますが、バージョンによる不具合なども考えられるため、今回はプラグイン不要で実装する方法をご紹介します。

functions.php に追記するコード

まず、投稿の閲覧数を取得・表示する関数と、閲覧数を更新する関数を用意します。

// 投稿の閲覧数を取得する関数
function get_view_count($post_id) {
  $meta_key = 'view_count';
  $views = get_post_meta($post_id, $meta_key, true);

  if ($views === '') {
    delete_post_meta($post_id, $meta_key);
    add_post_meta($post_id, $meta_key, '0');
    return '0 PV';
  }
  return $views . ' PV';
}

// 投稿の閲覧数を更新する関数
function increment_view_count($post_id) {
  $meta_key = 'view_count';
  $views = get_post_meta($post_id, $meta_key, true);

  if ($views === '') {
    $views = 0;
    delete_post_meta($post_id, $meta_key);
    add_post_meta($post_id, $meta_key, '0');
  } else {
    $views++;
    update_post_meta($post_id, $meta_key, $views);
  }
}

// 不要な隣接投稿リンクタグを削除（SEO的に不要なら）
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

人気記事一覧を表示するテンプレートコード

次にサイドバーやフッターなど、人気記事一覧を表示したい部分に以下を追加します。

<!-- 人気記事リスト -->
<div class="popular-posts">
  <p class="popular-posts__title">人気記事</p>

  <div class="popular-posts__items">
    <?php
      // 閲覧数を更新
      increment_view_count(get_the_ID());

      $query_args = array(
        'post_type'      => 'post',           // 投稿タイプ（必要に応じて変更）
        'posts_per_page' => 3,                // 表示件数
        'orderby'        => 'meta_value_num', // 閲覧数で並び替え
        'meta_key'       => 'view_count',     // 閲覧数を保存しているキー
      );

      $popular_query = new WP_Query($query_args);
    ?>
    
    <?php if ($popular_query->have_posts()) : ?>
      <?php while ($popular_query->have_posts()) : $popular_query->the_post(); ?>
        <article class="popular-post">
          <a class="popular-post__link" href="<?php the_permalink(); ?>">
            <div class="popular-post__thumb">
              <?php if (has_post_thumbnail()) : ?>
                <?php the_post_thumbnail('full'); ?>
              <?php endif; ?>
            </div>
            <h2 class="popular-post__title">
              <?php the_title(); ?>
              <span><?php echo get_view_count(get_the_ID()); ?></span>
            </h2>
          </a>
        </article>
      <?php endwhile; ?>
    <?php endif; ?>
    
    <?php wp_reset_postdata(); ?>
  </div>
</div>

まとめ

今回はプラグインを使用せず人気記事を一覧で表示するコードをご紹介しました。
プラグインなしでも軽量かつカスタマイズしやすい人気記事リストを実装でき、サイトに合わせて「件数」「表示形式」「対象の投稿タイプ」などを調整することで自由に拡張可能です。