ワードプレスでページネーションを実装したいとき、2パターンの方法があります。
- プラグインを使う
- 自分でコードを書く
プラグインで対応する場合は「WP-PageNavi」を使う方法が多く知られています。
ダッシュボードからプラグインを検索して有効化するだけ、特別な設定もほとんどないので簡単です。
対して「自分でコードを書く」というのは初心者の方にはハードルが高く躊躇してしまうかもしれません。
しかし。
実はWordPressには「get_the_posts_pagination」または「the_posts_pagination」という関数が用意されており、コレを使えばアッという間にページネーションを実装することが可能です。
「the_posts_pagination」と「get_the_posts_pagination」の違いは、ページネーションを出力するか否か。
単純にワードプレスの仕様に則ったページネーションを出力したい場合は「the_posts_pagination」を使い、独自のカスタマイズを加えたい場合は「get_the_posts_pagination」を使うのが便利です。
「the_posts_pagination」でページネーションを出力
下記のコードをテンプレートのページネーションを出力したい任意の箇所に記述します。
<?php the_posts_pagination(); ?>
これだけでページネーションが出力されます。
実際に出力されるHTMLのサンプルは次のようになります。
<nav class="navigation pagination" role="navigation" aria-label="投稿"> <h2 class="screen-reader-text">投稿ナビゲーション</h2> <div class="nav-links"> <span aria-current="page" class="page-numbers current">1</span> <a class="page-numbers" href="https://example.com/blog/page/2">2</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://example.com/blog/page/6">6</a> <a class="next page-numbers" href="https://example.com/blog/page/2">次へ</a> </div> </nav>
「get_the_posts_pagination」を使ってカスタマイズして出力
上で挙げたサンプルだと「h2」や「div」など、余分なコードが含まれているので、もっとシンプルに、また「a」タグが連続して出力されているのでリスト形式で出力するように改造します。
<?php
$args = array (
'prev_text' => '« 前へ',
'next_text' => '次へ »',
'show_all' => false,
'mid_size' => 3,
'type' => 'list',
);
$pagination = get_the_posts_pagination( $args );
$pagination = preg_replace( "/<h2[^>]*?>.*?<\/h2>/i", '', $pagination);
$pagination = preg_replace( array("/<div[^>]*?>/i", "/<\/div>/i") , array('', ''), $pagination);
echo $pagination;
?>
以下出力されるコードのサンプルです。
<nav class="navigation pagination" role="navigation" aria-label="投稿"> <ul class='page-numbers'> <li> <span aria-current="page" class="page-numbers current">1</span> </li> <li> <a class="page-numbers" href="https://example.com/blog/page/2">2</a> </li> <li> <a class="page-numbers" href="https://example.com/blog/page/3">3</a> </li> <li> <a class="page-numbers" href="https://example.com/blog/page/4">4</a> </li> <li> <span class="page-numbers dots">…</span> </li> <li> <a class="page-numbers" href="https://example.com/blog/page/6">6</a> </li> <li> <a class="next page-numbers" href="https://example.com/blog/page/2">次へ</a> </li> </ul> </nav>
これでCSSでデザインもしやすいコードになりました。
「the_posts_pagination」または「get_the_posts_pagination」で使えるオプション
上記でも少し使った、「the_posts_pagination」または「get_the_posts_pagination」で使えるオプションを紹介します。
| パラメーター | デフォルト | 説明 |
|---|---|---|
| $format | ?page=%#% | ページネーションのパーマリンク構造を指定 |
| total | 1 | 総ページ数 |
| current | 0 | 現在のページ番号 |
| show_all | false | すべてのページ番号を表示する（falseの場合はend_size、mid_sizeでコントロールする） |
| end_size | 1 | ページ番号のリストの両端（最初と最後）にいくつの数字を表示するか |
| mid_size | 1 | 現在ページの前後のページ番号をいくつ表示するか |
| prev_next | true | リストの中に「前へ」「次へ」のリンクを含むかどうか（trueの場合はprev_text、next_textを指定） |
| prev_text | __( ‘Previous’ ) | 前のページへ送るリンクテキスト |
| next_text | __( ‘Next’ ) | 次のページへ送るリンクテキスト |
| type | plain | 戻り値の指定。plainまたはlist |
| before_page_number | ” | 各ページ番号の前に入れる文字列 |
| after_page_number | ” | 各ページ番号の後に入れる文字列 |
| screen_reader_text | __( ‘Posts navigation’ ) | スクリーンリーダー用のテキスト |
最後に
プラグインを利用しなくてもぺージネーションを実装することができる「get_the_posts_pagination」と「the_posts_pagination」を紹介しました。
特にオリジナルのテーマを開発する際は積極的にご利用ください。
