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>
注意点・ポイント

管理画面上からドラッグ・アンド・ドロップで並び順を変更できるプラグイン「Intuitive Custom Post Order」を有効にしていると、「order」で降順、昇順の並び替えがうまくいきませんでした。
記事並び替え系のプラグインを使用しているとバッティングして挙動がおかしくなることがあるので、その場合はソートを利用するカテゴリや投稿のみ「Intuitive Custom Post Order」の機能をOFFにしておきましょう!

MONA流:セットで設定する

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

<section id="pager_wrap">
  <div class="wp_pagenavi_dir"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></div>
  <div class="wp_pagesort_dir">
    <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>
  </div>
</section>
/* 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;
				}
			}
		}
	}
}

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

よかったらシェアしてね!

この記事を書いた人

エンジニア10年×ママ7年=エンジニア上がりのWebディレクター
元週7キャバ嬢 › 事務/Webスクール › ベンチャー› 結婚 › 子どもの帰りを待ってたくて起業
働きすぎで時間なし。副業でメディアと投資を学び始めたらやっぱりWebに戻ってディレクション勉強中です。
基本稼働:4:00~13:00
趣味:少女マンガ

目次
閉じる