【WordPress】カスタム投稿の人気記事一覧をプラグインなしで実装する

今日は、WordPressのお仕事で実装した「カスタム投稿の人気記事一覧をプラグインなしで実装する」をアウトプットします！

こんにちは。Webコーダーのharuです。

＊わたしについて＊
3歳1歳の育児をしながら、5~7時・21~0時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQuery/WordPress。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
【学習記録やアウトプットのTwitterはこちらです＊】

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

【WordPress】カスタム投稿の人気記事一覧をプラグインなしで実装する
あとがき

【WordPress】カスタム投稿の人気記事一覧をプラグインなしで実装する

人気記事一覧をプラグインなしで実装したので、アウトプットです！

お仕事では、さらにここから機能をカスタマイズしたので、別記事でまとめる予定です！今日は、ノーマルな実装方法をまとめていきます。

【この記事のゴール】

①functions.phpに、閲覧回数を記録するコードを追加

②それぞれの記事に、カウント用のコードを追加

③WP_Query(サブループ)を使用して、人気記事一覧を表示させる

です！それではアウトプットしていきます！

①functions.phpに、閲覧回数を記録するコードを追加

今回はプラグインを使用しないので、functions.phpに閲覧回数を記録するコードを追加します。

// 記事の閲覧回数を計測

function set_post_views($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);
  }
}

今回の実装は、以下の記事を参考にさせていただきました。ありがとうございます！

WordPressでプラグインを使わずに人気順（閲覧回数の多い順）に記事を一覧表示する方法の備忘録です。閲覧回数を記録する functions.php 記事の閲覧回数を計測するた

②それぞれの記事に、カウント用のコードを追加

single.phpに以下のコードを追加します。わたしはsingle-column.phpに記載しました。

<?php if (!is_user_logged_in() && !is_robots()) {
  setPostViews(get_the_ID());
}?>

追加の場所は、single.php内ならどこでも大丈夫です。

!is_user_logged_in()

→ログインユーザーのアクセスを除く

!is_robots()

→ロボットのアクセスを除く

今回は、自分(ログインユーザー)で並び替えがうまくいっているか確認したかったので、
<?php if ( !is_robots()) {
setPostViews(get_the_ID());
}?>
のみ記述してみました。

③WP_Query(サブループ)を使用して、人気記事一覧を表示させる

最後に、人気記事一覧を表示させたいphpファイルに以下を記述します。

<?php
$args = array(
'meta_key' => 'post_views_count', //functions.phpに記述したもの
'post_type' => 'column',//カスタム投稿名
'orderby' => 'meta_value_num',
'order' => 'DESC',
'posts_per_page' => 5 //表示件数
);

//ループ開始
$query = new WP_Query($args);
if ($query->have_posts()) :
while ($query->have_posts()) :
$query->the_post();
?>

//表示させたい記事の内容

<?php
endwhile;
endif;
wp_reset_postdata();
?> 
//ループ終了

ループ内の記述や、CSSは割愛します。

ここまでで、人気記事一覧の取得がうまくできているか確認します。

以下の記事の「テスト投稿③」をクリックしまくって自作自演してみますw