【Wordpress】人気順(閲覧数順)に投稿を並び替える方法

はじめに
- 対象読者
実装方法
終わりに

はじめに

こんにちは
株式会社TOKOSのエンジニアのタクヤです。

今回はWordpressで作成したWebサイトの投稿一覧を人気順(閲覧数多い順)で並び替える方法を説明します。デフォルトの新着順ではなく人気順で投稿を並び替えたい方にオススメの記事になっています。

対象読者

WordPressでWebサイト制作している人
投稿の一覧を人気順(閲覧数順)に並び替えたい人

実装方法

プラグインの導入

まず閲覧数をカウントするためにプラグインを導入します。
プラグインは WP-PostViews というものを使います。執筆時点で有効インストール数が100,000以上なので信頼できるプラグインだと思います。

参考WP-PostViewsWordPress Plugin

プラグインをインストールすると管理画面の投稿一覧ページのカラムに表示数という項目が追加されます。
こちらの数値をもとに投稿の一覧を人気順に並び替えていきます。

投稿一覧の取得・表示と並び替えの実装

準備が整ったので、投稿一覧の取得・表示と並び替えの実装をしていきます。
投稿一覧の取得・表示と並び替えにはWP_Queryを使います。

WP_Queryは、主に投稿を取得するためクラスで、カスタマイズしたループを作成したり、特定の条件を持つ投稿を絞り込むことができます。

<ul>
	<?php
		$post_args = array(
			'post_type'  => 'post',
			'meta_query' => array(
				'relation' => 'AND',
				array(
					'key'     => 'views',
					'value'   => 0,
					'compare' => '>=',
					'type'    => 'NUMBER'
				),
			),
			'orderby' => 'meta_value_num',
			'order'   => 'DESC',
		);
		$post_query = new WP_Query( $post_args );
		if( $post_query->have_posts() ):
		while( $post_query->have_posts() ):
		$post_query->the_post();
	?>
	<a href="<?php the_permalink(); ?>">
		<span><?php echo get_the_date(); ?></span>
		<h2><?php the_title(); ?></h2>
	</a>
	<?php endwhile; endif; wp_reset_postdata(); ?>
</ul>

WP_Queryのパラメーター(変数$post_argsに代入した配列)について説明します。

パラメーター名	説明文
post_type	取得する投稿タイプを指定します。
meta_query	取得する投稿を絞り込むためのカスタムフィールドの値とその詳細を設定します。今回は閲覧数が0以上の投稿全てという範囲にしています。 `'relatition'` の部分は `‘AND’` で問題ないですが、絞り込み条件が複数になった際に `’AND’` もしくは `’OR’` のどちらかを試してみてください。
order_by	並び替えの方法を指定します。使っているWP-PostViewsというプラグインの閲覧数は各投稿のカスタムフィールドに保存される仕組みになっています。そのカスタムフィールドの値で投稿を並び替えるため `'order_by'` の値には `'meta_value_num'` を指定します。
order	並び替えの順序(昇順,降順)を指定します。 `'DESC'` は降順で並び替えるという意味で、今回で言うと人気順(閲覧数の多い順)で表示すると言うことになります。昇順で並び替える場合は `'ASC'` と指定します。

order_byで設定できる値の種類や他のパラーメーターについてはこちらのサイトを参考にしてください。

参考WP＿QueryのパラメーターについてWordPress WP_Query

おまけ(新着順との切り替え)

おまけとして新着順との切り替えをできるようにしてみたいと思います。

<?php
	$orderby = $_GET['orderby'] == 'popular' ? 'meta_value_num' : 'modified';
?>
<ul>
  <li>
		<a href="./?orderby=modified">新着順</a>
  </li>
  <li>
    <a href="./?orderby=popular">人気順</a>
  </li>
</ul>
<ul>
	<?php
		$post_args = array(
			'post_type'  => 'post',
			'meta_query' => array(
				'relation' => 'AND',
				array(
					'key' 　　　　　　　　=> 'views',
	        'value' 　　　　=> 0,
	        'compare' => '>=',
	        'type' 　　　　　　=> 'NUMBER'
	      ),
	    ),
			'orderby' => $orderby,
			'order'   => 'DESC',
		);
		$post_query = new WP_Query( $post_args );
		if( $post_query->have_posts() ):
		while( $post_query->have_posts() ):
		$post_query->the_post();
	?>
		<a href="<?php the_permalink(); ?>">
			<span><?php echo get_the_date(); ?></span>
			<h2><?php the_title(); ?></h2>
		</a>
	<?php endwhile; endif; wp_reset_postdata(); ?>
</ul>

投稿一覧の上部に新着順と人気順というリンクを設置し、そのリンクにクエリパラメーターを設定しています。
そのクエリパラーメーターに渡した値を取得・判別してWP_Query内のパラメーターの'orderby'に値を入れています。

これで投稿を投稿の並び替え方法を新着順と人気順で切り替えれるようになりました。