WordPress（ワードプレス）で投稿一覧にページャーやソートを付ける方法「WP-PageNavi」

ページャーの作り方

ページャーは今回、WordPressページナビゲーション（ページ送り）を作成する「WP-PageNavi」というプラグインを利用します。

1. WPプラグイン「WP-PageNavi」をインストールする

1. WordPressのメニューから下記の手順でインストールし、有効化する。
   • 「プラグイン」→「新規追加」→「WP-PageNavi」を検索→「いますぐインストール」→「有効化」

2. ページャーの設置

ページャーを表示したい場所に下記のコードを実装します。

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

3. プラグインの設定

WordPressのメニューから「設定」→「PageNavi」から設定できます。

ページナビゲーションテキストの設定

• 総ページ用テキスト
  「1 / ○○」というように、現在閲覧しているページと総ページのテキスト設定ができます。
  削除して表示させないように設定することも可能。
• 最初のページ用テキスト
  インストール時の初期設定では、「« 先頭」と設定されています。
  公開日順でワードプレスを運用しているなら「« 最新」とか、サイトのデザインによっていは英語表記などにしてもいいかもしれません。
• 最後のページ用テキスト
  初期設定では、「最後 »」と設定されています。
• 前のページ用テキスト
  初期設定では、「«」と設定されています。「前へ」や「Previous」に変更するのもありですね。
• 次のページ用テキスト
  初期設定では、「»」と設定されています。「次へ」や「Next」に変更するのもありですね。
• 「前へ…」用テキスト
  初期設定では、「…」と設定されています。お好みの設定に変更しましょう。
• 「次へ…」用テキスト
  初期設定では、「…」と設定されています。お好みの設定に変更しましょう。

ページナビゲーションの設定

• pagenavi-css.css を使用
  チェックを入れるとあらかじめ用意されたスタイル（css）に設定されます。
  関連プラグインの「WP PageNavi Style」を使って、ページナビゲーションのスタイルを変更することもできます。
• Page Navigationスタイル
  スタイルを「通常」と「ドロップダウンリスト」から選択できます。
• 表示するページ数
  初期設定は「5」になっています。
  その場合、「ページ 1,2,3,4,5…」のように表示されます。
• 省略するページ数
  初期設定の「3」の場合、「ページ 1,2,3,4,5…10…20…30…最後」のように表示されます。
  「1」の場合、「ページ 1,2,3,4,5…10…最後」と表示されます。
• 省略ページを以下の倍数で表示
  初期設定の「10」の場合、「10,20,30…」と表示されます。
  「5」の場合、「5,10,15,20…」と表示されます。

ソートボタン（新しい・古い順）の作り方

WordPressは基本URLにパラメータを追加することで投稿の並び替え・絞り込みができます。
WP_Queryのパラメーターを使い、様々な条件を指定することができます。

パラメーター	内容	概要
order	昇降順	‘ASC’で昇順、’DESC’で降順（初期値は’DESC’）
orderby	何で	どのパラメーターでソートするか（初期値は’date’） ‘none’:並び替えない ‘ID’:記事IDでソート ‘author’:投稿者でソート ‘title’タイトルでソート ‘name’:ユーザー名でソート ‘date’:日付でソート ‘modified’:更新日でソート ‘parent’親ページのIDでソート ‘rand’:ランダムでソート ‘comment_count’:コメント数でソート ‘menu_order’:ページの表示でソート ‘meta_value’:カスタムフィールドの値を文字列としてソート ‘meta_value_num’:カスタムフィールドの値を数値としてソート ‘post_in’配列で指定された記事IDの並び順を維持

※カスタムフィールドやカスタム投稿のパラメーターはデフォルトでは使えないのでfunctions.phpをカスタマイズする必要があります。
｢query_vars｣フィルターフックを使い、カスタムフィールドのキーと値がURLパラメータとして認識されるようにします。
カスタムクエリの追加方法はWordPress Codex日本語版に詳しく記載されてます。

<?php
function add_meta_query_vars( $public_query_vars ) {
    $public_query_vars[] = 'meta_key'; //カスタムフィールドのキー
    $public_query_vars[] = 'meta_value'; //カスタムフィールドの値（文字列）
    return $public_query_vars;
}
add_filter( 'query_vars', 'add_meta_query_vars' );
?>

並び替えボタンを作成する

実際に並び替えをするには<a>タグ（リンク）を使用して、｢add query arg｣関数を使い、クエリを付けたURLを取得します。

1. 投稿順で並び替える

<ul>
    <li><a href="<?php echo add_query_arg( array('order' => 'DESC') ); ?>">投稿が新しい順</a></li>
    <li><a href="<?php echo add_query_arg( array('order' => 'ASC') ); ?>">投稿が古い順</a></li>
</ul>

2. 人気順で並び替える

プラグインの｢WP-PostViews｣を使用すれば、記事の回覧数をカスタムフィールドの｢views｣というmeta_keyに値（回覧数）を保存するようになります、この値を利用して人気順としてソートすることができます。
｢get_pagenum_link(1)｣という記述は、並び替えをしたとき強制的に1ページ目を表示させます。

<ul>
    <li><a href="<?php echo add_query_arg( array('meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'DESC'), get_pagenum_link(1) ); ?>">人気高い順</a></li>
    <li><a href="<?php echo add_query_arg( array('meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'ASC'), get_pagenum_link(1) ); ?>">人気低い順</a></li>
</ul>

MONA流：セットで設定する

ページャーとソート機能はセットで設置されているのがベストだと思っています。
下記は私がいつも使っている実装方法。

<!-- wp:preformatted {"className":"lang:php decode:true"} -->
<pre class="wp-block-preformatted lang:php decode:true">&lt;section id="pager_wrap">
  &lt;div class="wp_pagenavi_dir">&lt;?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>&lt;/div>
  &lt;div class="wp_pagesort_dir">
    &lt;ul>
        &lt;li>&lt;a href="&lt;?php echo add_query_arg( array('order' => 'DESC') ); ?>">新しい順&lt;/a>&lt;/li>
        &lt;li>&lt;a href="&lt;?php echo add_query_arg( array('order' => 'ASC') ); ?>">古い順&lt;/a>&lt;/li>
    &lt;/ul>
  &lt;/div>
&lt;/section></pre>
<!-- /wp:preformatted -->

<!-- wp:preformatted {"className":"lang:sass decode:true"} -->
<pre class="wp-block-preformatted lang:sass decode:true">/* pager_wrap
--------------------------------------------------------------*/
#pager_wrap{
	overflow: hidden;
	@media print,screen and (max-width: 767px) {
		text-align: center;
	}
	.wp_pagenavi_dir{
		@media print,screen and (max-width: 767px) {
			margin-bottom: 10px;
		}
		@media print,screen and (min-width: 768px) {
			float: left;
		}
		.wp-pagenavi a, .wp-pagenavi span{
			text-decoration: none;
			border: none;
			padding: 3px 9px;
			margin: 0 2px;
			background: #f2f2f2;
			display: inline-block;
			font-size: 14px;
		}
		.wp-pagenavi span.current{
			background: #333333;
			color: #fff;
		}
	}
	.wp_pagesort_dir{
		@media print,screen and (max-width: 767px) {
			display: inline-block;
		}
		@media print,screen and (min-width: 768px) {
			float: right;
		}
		ul{
			overflow: hidden;
			li{
				float: left;
				margin: 0 5px 0 0;
				a{
					display: inline-block;
					background: #f2f2f2;
					border: solid 1px #f2f2f2;
					padding: 2px 9px;
					font-size: 14px;
				}
			}
		}
	}
}</pre>
<!-- /wp:preformatted -->

参考にさせていただいたサイト