WordPressでプラグインを使わずに人気記事を表示する方法

前回の記事で、WordPressのheadタグ内を整理しました。
さらに整理するにはプラグインを減らしていく必要がある為、今回はプラグインを使わずに人気記事を表示する方法をご紹介します。

やりたい事

人気記事を表示するといっても、やり方は色々あります。
当ブログでやりたい事は以下の条件になります。

1. プラグインは使わない。
2. アクセス集計はページビュー数で集計する。
3. 集計期間は問わない（延々と集計し続けて良い）。
4. 設置場所はサイドバー。
5. サムネイルとビュー数も表示したい。

設置方法

STEP1：function.phpの編集

/wp-content/themes/[使用しているテーマフォルダ] /functions.phpに以下のコードを加えます。

// アクセス数の取得
function get_post_views($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 views";
    }
 
    return $count." views";
}
 
// アクセス数の保存
function set_post_views($postID){
    $count_key = "post_views_count";
    $count = get_post_meta($postID, $count_key, true);
    if($count == ""){
        $count = 1;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, "1");
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

STEP2：sidebar.phpの編集

続いて、/wp-content/themes/[使用しているテーマフォルダ] /sidebar.phpの設置したい場所に以下のコードを加えます。

<div class="widget my-popular-posts">
	<h3>人気の記事</h3>
	<?php
	if(is_single()){
		// 記事ページの場合、アクセス数の保存
		set_post_views(get_the_ID());
	}
	
	$args = array(
		"post_type"		=> "post",
		"numberposts"	=> 5,		// 表示件数
		"meta_key"		=> "post_views_count",
		"orderby"		=> "meta_value_num",
		"2order"		=> "DESC",
	);
	$posts = get_posts($args);
	if($posts) : ?>
		<ul>
		<?php foreach($posts as $post) : setup_postdata($post); ?>
			<li>
				<div class="thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail("medium"); ?></a></div>
				<p class="title">
					<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					<span><?php print get_post_views(get_the_ID()); ?></span>
				</p>
			</li>
		<?php endforeach; ?>
		<?php wp_reset_postdata(); ?>
		</ul>
	<?php else : ?>
		<p class="empty">只今、集計中です。</p>
	<?php endif; ?>
</div>

これだけで終了です！

結果

下図のような感じに表示されます（左が集計無し、右が集計有り）。

ちなみにスタイルシートはこんな感じにしています。

.my-popular-posts li{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 8px 0 !important;
  border-bottom: 1px solid #E1E1E1;
}

.my-popular-posts .thumb{
  width: 40%;
}
.my-popular-posts .thumb img{
  max-width: 100%;
  height: auto;
}

.my-popular-posts .title{
  width: 60%;
  line-height: 1.5;
  font-size: 1.2rem;
  box-sizing: border-box;
  padding: 0 0 0 16px !important;
  margin: 0 !important;
}
.my-popular-posts .title span{
  display: block;
  font-size: 1.1rem;
}

.my-popular-posts .empty{
  text-align: center;
  border-bottom: 1px solid #E1E1E1;
  padding: 8px 0;
}