はじめに
こんにちは
株式会社TOKOSのエンジニアのタクヤです。
今回はWordpressで作成したWebサイトの投稿一覧を人気順(閲覧数多い順)で並び替える方法を説明します。デフォルトの新着順ではなく人気順で投稿を並び替えたい方にオススメの記事になっています。
対象読者
- WordPressでWebサイト制作している人
- 投稿の一覧を人気順(閲覧数順)に並び替えたい人
実装方法
プラグインの導入
まず閲覧数をカウントするためにプラグインを導入します。
プラグインは WP-PostViews というものを使います。執筆時点で有効インストール数が100,000以上なので信頼できるプラグインだと思います。
プラグインをインストールすると管理画面の投稿一覧ページのカラムに表示数という項目が追加されます。
こちらの数値をもとに投稿の一覧を人気順に並び替えていきます。
投稿一覧の取得・表示と並び替えの実装
準備が整ったので、投稿一覧の取得・表示と並び替えの実装をしていきます。
投稿一覧の取得・表示と並び替えには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
で設定できる値の種類や他のパラーメーターについてはこちらのサイトを参考にしてください。
おまけ(新着順との切り替え)
おまけとして新着順との切り替えをできるようにしてみたいと思います。
<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
内のパラメーターの'orderby'
に値を入れています。
これで投稿を投稿の並び替え方法を新着順と人気順で切り替えれるようになりました。
終わりに
今回はWordpressで作成したWebサイトの投稿一覧を並び替えの実装方法を説明しました。
人気順の並び替えは人気のあるコンテンツに素早くアクセスできるためUIとして優れているかと思います。ぜひ使ってみてください。
実装については説明した方法以外にも、プラグインのみでできる方法や完全にプラグインを使わない方法もありますので気になる方は調べてみてください。