【WordPress】 人気順(閲覧数順)に投稿を並び替える方法
はじめに
こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回はWordPressで作成したWebサイトの投稿一覧を人気順(閲覧数が多い順)で並び替える方法を説明します。
デフォルトの新着順ではなく人気順で投稿を並び替えたい方にオススメの記事になっています。
対象読者
- WordPressでWebサイト制作している人
- 投稿の一覧を人気順(閲覧数順)に並び替えたい人
実装方法
プラグインの導入
まず閲覧数をカウントするためにプラグインを導入します。
プラグインはWP-PostViewsというものを使います。
執筆時点で有効インストール数が100,000以上なので信頼できるプラグインだと思います。
WP-PostViews
投稿、固定ページが閲覧された回数を表示することができます。
ja.wordpress.orgプラグインをインストールすると管理画面の投稿一覧ページのカラムに表示数という項目が追加されます。
こちらの数値をもとに投稿の一覧を人気順に並び替えていきます。
投稿一覧の取得・表示と並び替えの実装
準備が整ったので、投稿一覧の取得・表示と並び替えの実装をしていきます。
投稿一覧の取得・表示と並び替えには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以上の投稿全てという範囲にしています。 'relation'の部分は'AND'で問題ないですが、絞り込み条件が複数になった際に'AND'もしくは'OR'のどちらかを試してみてください。 |
| orderby | 並び替えの方法を指定します。 使っているWP-PostViewsというプラグインの閲覧数は各投稿のカスタムフィールドに保存される仕組みになっています。そのカスタムフィールドの値で投稿を並び替えるため'orderby'の値には'meta_value_num'を指定します。 |
| order | 並び替えの順序(昇順,降順)を指定します。 'DESC'は降順で並び替えるという意味で、今回で言うと人気順(閲覧数の多い順)で表示すると言うことになります。昇順で並び替える場合は'ASC'と指定します。 |
orderbyで設定できる値の種類や他のパラメーターについてはこちらのサイトを参考にしてください。
https://wemo.tech/160
wemo.techおまけ(新着順との切り替え)
おまけとして新着順との切り替えをできるようにしてみたいと思います。
<nav>
<a href="?order=date">新着順</a>
<a href="?order=views">人気順</a>
</nav>
<ul>
<?php
$order = isset( $_GET['order'] ) ? $_GET['order'] : 'date';
if ( $order === 'views' ) {
$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',
);
} else {
$post_args = array(
'post_type' => 'post',
'orderby' => 'date',
'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>投稿一覧の上部に新着順と人気順というリンクを設置し、そのリンクにクエリパラメーター(?order=date / ?order=views)を設定しています。
$_GET['order']でクエリパラメーターの値を取得・判別して、WP_Query内のパラメーターの'orderby'の値を動的に切り替えています。デフォルト(パラメーター未指定時)は新着順で表示されます。
これで投稿の並び替え方法を新着順と人気順で切り替えられるようになりました。
さいごに
今回はWordPressで作成したWebサイトの投稿一覧を並び替える実装方法を説明しました。
人気順の並び替えは人気のあるコンテンツに素早くアクセスできるためUIとして優れているかと思います。
ぜひ使ってみてください。
実装については説明した方法以外にも、プラグインのみでできる方法や完全にプラグインを使わない方法もありますので気になる方は調べてみてください。
この記事を書いた人
