【プラグインなし】WordPressでページネーション（ページャー）を作る方法
Googleの検索ページの下にある「< 前へ 1 2 3 4 5 次へ >」みたいなリンク、ページネーション（ページャー）をWordPressに設置する方法をご紹介。カテゴリーページやタグページなど、アーカイブ系のページで役に立ちます。
この記事で分かること
- プラグインなしでWordPressのページネーション（ページャー）を作る方法
この記事の著者
- フリーランス
- Webデザイナー兼UI/UXデザイナー
ページネーション表示のテンプレートタグ
WordPressでは、テンプレートタグpaginate_links()を使ってページネーションを設置する事ができます。
// ページネーションを表示するテンプレートタグ
<?php echo paginate_links(); ?>
実装すると、このようなスタイルのページネーションが表示されます。
// 10ページあるページネーションの例
« 前へ 1 … 3 4 5 6 7 … 10 次へ »
paginate_links()のカスタマイズ
paginate_links()のパラメータを活用すれば、ページネーションのスタイルをカスタマイズする事ができます。
たくさんあるパラメータのうち、ここでは重宝しそうな物を一部ご紹介。
全てのパラメータはWordPress公式リファレンスで確認することができます。
paginate_links()では以下のように、配列としてパラメータ設定を行うことができます。
<?php
$args = array(
'show_all'=> false,
'end_size'=>1,
'mid_size'=> 2,
'prev_next'=> true,
'prev_text'=> __('« Previous'),
'next_text'=> __('Next »'),
'type'=> 'plain',
'before_page_number'=> '',
'after_page_number'=> ''
);
echo paginate_links($args);
?>
| パラメータ | 目的 | デフォルト値 |
|---|---|---|
| show_all | 全てのページ番号を表示するか | false （「…」で省略する） |
| end_size | ページネーションの両端に表示されるページ数 | 1 |
| mid_size | 閲覧中のページの両端に表示されるページ数 | 2 |
| prev_next | 前後のページへのリンクを表示させるかどうか | true |
| prev_text | 前のページへのリンクテキスト | « Previous （日本語では「« 前へ」） |
| next_text | 次のページへのリンクテキスト | 次へ » （日本語では「» 次へ」） |
| type | ページネーションの出力方法 | plain |
| before_page_number | ページ番号の前につける文言 | なし |
| after_page_number | ページ番号の後ろにつける文言 | なし |
show_allパラメータ
trueにすると、全てのページ番号が表示されます。
// show_all：falseの場合
« 前へ 1 … 3 4 5 6 7 … 10 次へ »
// show_all：trueの場合
« 前へ 1 2 3 4 5 6 7 8 9 10 次へ »
end_sizeパラメータ
ページネーションの両端の数字をいくつ表示させるかを設定します。
// end_size：1の場合（左端は1、右端は10を表示）
« 前へ1 … 4 5 6 … 10 次へ »
// end_size：2の場合（左端は1と2、右端は9と10を表示）
« 前へ1 2 … 4 5 6 … 9 10 次へ »
mid_sizeパラメータ
前後のページ番号をいくつまで表示するか決めることができます。
以下は、10ページ中5ページ目を閲覧している状態のサンプルです。
// mid_size：2の場合（前2ページ（3と4）、後ろ2ページ(6と7)を表示）
« 前へ1 … 3 4 5 6 7 … 10 次へ »
// mid_size：1の場合（前1ページ（4）、後ろ1ページ(6)を表示）
« 前へ1 … 4 5 6 … 10 次へ »
prev_nextパラメータ
前後のページへのリンクを表示するかどうかを決めることができます。
// prev_next：trueの場合
« 前へ1 … 3 4 5 6 7 … 10 次へ »
// prev_next：falseの場合
1 … 3 4 5 6 7 … 10
prev_textとnext_textパラメータ
前後のページへのリンクテキストを決めることができます。
prev_nextがtrueになっている必要があります。
// prev_next：__('« Previous')
// next_text：__('Next »')
« 前へ1 … 4 5 6 … 10 次へ »
// prev_next：__('前のページへ')
// next_text：__('次のページへ')
前のページへ 1 … 4 5 6 … 10 次のページへ
typeパラメータ
リンクの出力方法を次の3つから選択できます。
・plain：リンクのみの出力
・list：li要素として出力
・array：phpの配列として返します
<!-- type：plainの場合 -->
<a href="1ページ目へのリンク">1</a>
<a href="2ページ目へのリンク">2</a>
<a href="3ページ目へのリンク">3</a>
<!-- type：listの場合 -->
<ul>
<li><a href="1ページ目へのリンク">1</a></li>
<li><a href="2ページ目へのリンク">2</a></li>
<li><a href="3ページ目へのリンク">3</a></li>
</ul>
before_page_numberとafter_page_numberパラメータ
ページ番号の前後に文字列を足す事ができます。
// before_page_numberもafter_page_numberも空の場合
前のページへ 1 … 4 5 6 … 10 次のページへ
// before_page_number： '＜'
// after_page_number： '＞'
前のページへ ＜1＞ … ＜4＞ ＜5＞ ＜6＞ … ＜10＞ 次のページへ
まとめ
実装がカンタンでカスタマイズも可能なページネーション。
ぜひ使ってみてください。
ちなみにWordPressではこのような感じで、前後のページへのリンクをつけるテンプレートタグもあります。
前のページへ 次のページへこちらもカンタンなので、サイトやページのスタイルに合わせて使い分けてもいいですね。
