WordPress - プラグインなしで人気記事(ランキング)を出力する方法

1. 人気記事を出力する方法

閲覧数を計測する関数を用意

ページの閲覧数(ページビュー)を取得する関数を functions.php に記述します。

//functions.php
function setPostViews($postID) {
  $count_key = 'post_views_count';
  //カスタムフィールドの値を取得
  $count = get_post_meta($postID, $count_key, true);
  //もし、$countの値が空なら、カスタムフィールドの値を削除し、値に0を追加。
  if($count==''){
    delete_post_meta($postID, $count_key);
    add_post_meta($postID, $count_key, '0');
  }else{
    //$countの値が空でなければ、$countに+1をして更新
    $count++;
    update_post_meta($postID, $count_key, $count);
  }
}

get_post_meta($post_id, $key, $single);
指定したページ(キー)からカスタムフィールドの値を取得

delete_post_meta( $post_id, $meta_key, $meta_value );
指定したページ(キー)からカスタムフィールドをすべて削除する

add_post_meta( $post_id, $meta_key, $meta_value, $unique );
指定したページ(キー)にカスタムフィールドを追加する

update_post_meta( $post_id, $meta_key, $meta_value, $prev_value );
指定したページ(キー)に存在するカスタムフィールドの値を更新する

記事が閲覧されるたびに関数を実行

閲覧されるたび関数が実行されるように、single.php に下記を記述します(任意の場所で OK)なるべく正しい数値になるようにログイン中のユーザーとクローラー以外の閲覧数をカウントするように設定しています。

//single.php
<!--記事を閲覧しているのがログイン中のユーザー、クローラーじゃない場合setPostViewsを実行-->
<?php if (!is_user_logged_in() && !is_robots()) { setPostViews(get_the_ID()); } ?>

!A && !B - A と B がともに~ではない

人気記事の出力

上記で計測した数値を元に閲覧数が多い(人気記事)順に記事を出力します。人気記事を出力したい場所に下記を記述します。

<?php
setPostViews(get_the_ID());
$args = array(
    'meta_key' => 'post_views_count',
    'orderby' => 'meta_value_num', //カスタムフィールドの値を数値として並び替える
    'order' => 'DESC', //並び順を指定。大から小へ降順
    'posts_per_page' => 10 //1ページに含める投稿数を指定
);
$query = new WP_Query($args);
if ($query->have_posts()) :
  while ($query->have_posts()) :
    $query->the_post();
?>
<!--繰り返し開始-->
<a href="<?php the_permalink(); ?>"><!--記事へのリンク-->
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumbnail'); } ?><!--記事の画像-->
<?php the_title(); ?><!--記事のタイトル-->
</a>
<!--繰り返し終了-->
<?php  endwhile; endif; wp_reset_postdata();?>

2. 閲覧数を出力させたい場合

閲覧数を出力したい場合は、functions.php に下記を記述します。(閲覧数を取得する関数とは別に用意)

//functions.php
function addPostViews($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 View";
  }
  //出力の設定。「数値 Views」と出力される。
  return $count.' Views';
}

閲覧数を出力したい場所に下記を記述します。

<?php echo addPostViews(get_the_ID()); ?>

3. 人気記事順に数字を表示させたい場合

人気記事順に数字を表示させたい場合、記事を順序リスト(ol)で表示するのが簡単だと思います。

<ol><!--追加-->
<?php
setPostViews(get_the_ID());
$args = array(
    'meta_key' => 'post_views_count',
    'orderby' => 'meta_value_num',
    'order' => 'DESC',
    'posts_per_page' => 10
);
$query = new WP_Query($args);
if ($query->have_posts()) :
  while ($query->have_posts()) :
    $query->the_post();
?>
  <li><!--追加-->
    <a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumbnail'); } ?>
    <?php the_title(); ?>
    <?php echo addPostViews(get_the_ID()); ?><!--閲覧数を出力-->
    </a>
  </li><!--追加-->
<?php  endwhile; endif; wp_reset_postdata();?>
</ol><!--追加-->

純粋に順序リスト(ol)で表示してもいいですし、疑似要素の方が扱いやすい場合は、CSS カウンタを利用してもいいかもしれません。

ol {
  list-style: none;
  counter-reset: number 0;
}
li::before {
  counter-increment: number 1;
  content: counter(number);
}