WordPressにはthe_posts_paginationという関数が用意されてるため、トップページの記事一覧やカテゴリーの記事一覧にページネーションを表示したいときにはthe_posts_paginationの使い方を覚えるだけで簡単にWordPressへのページネーションが実装できます。
WordPressのthe_posts_paginationが出力するページネーションの表示形式はページネーションでページが分割されたときに前と次へのリンクでページ移動できるようになり、番号付きのリンクテキストも表示できます。
WordPressのthe_posts_pagination関数
WordPressのthe_posts_pagination関数はWordPressバージョン4.1.0で新規導入されたWordPress関数です。
<?php the_posts_pagination(); ?>
WordPressを使用しているWebサイトやブログのindex.phpやcategry.phpの任意の位置にPHPの開始タグと終了タグでWordPressのthe_posts_pagination()を囲んで記述しテンプレートファイルを保存するとページネーションが表示します。
the_posts_pagination()で表示するページネーションの表示結果は初期値のパラメータが与えられて表示します。
the_posts_pagination関数がページネーションをWordPressに表示させる仕組みは、けっこう単純で、get_the_posts_navigation()関数の戻り値をecho文で表示しています。
function the_posts_navigation( $args = array() ) {
echo get_the_posts_navigation( $args );
}
get_the_posts_navigation()関数はWordPressのwp-includes/link-template.phpの2685行目にあります。
そしてwp-includes/link-template.phpの2685行目から下に少し進むと2716行目でget_the_posts_navigation()関数のパラメータが配列で記述してあります。
この配列で記述されてるパラメータがthe_posts_pagination関数でも使用する初期値のパラメータになります。
WordPressにthe_posts_pagination関数でページネーションの「PREV」「NEXT」のリンクテキストの表示や「リンク番号」の表示数を増やしたい場合は、the_posts_paginationのパラーメータを使用してページネーションをカスタマイズします。
the_posts_pagination関数のパラメータ
WordPressのthe_posts_pagination関数のパラメータは配列(array)で記述します。
<?php
the_posts_pagination(array(
'パラメータ名' => '値',
)
);
?>
WordPressCodexの「関数リファレンス/the posts pagination」の説明で紹介されているパラメータは4つです。
関数リファレンス/get the posts pagination
mid_size
ページネーションの番号リンクでページ移動をしたときの現在ページの左右に表示するページ番号の数をmid_sizeで指定できます。mid_sizeの初期値は1です。
<?php
the_posts_pagination(array(
'mid_size' => '2',
)
);
?>
例えばmid_sizeパラメータを整数の2で指定するとthe_posts_pagination関数はWordPressに表示するページネーションの番号リンクを、現在いるページの前後に2つの番号を表示します。
prev_textとnext_text
the_posts_paginationのprev_textとnext-textパラメータは、ページネーションの表示で「前のページ」と「次のページ」へ移動するリンクテキストを変更する場合に使用します。
<?php
the_posts_pagination(array(
'prev_text' => '前へ',
'next_text' => '次へ',
)
);
?>
- 「prev_text」が前のページへのリンクテキスト
- 「next_text」が次のページへのリンクテキスト
文字列で記述します。
screen_reader_text
WordPressのthe_posts_pagination関数のパラメータ「screen_reader_text」は、スクリーンリーダー用テキストを変更することができます。
the_posts_paginationでWordPressにページネーションを表示すると「次へ」や「前へ」「番号」のリンクが表示する上にHTMLのh2タグで「投稿ナビゲーション」のテキストがスクリーンリーダー用のテキストとして出力されます。
<?php
the_posts_pagination(array(
'screen_reader_text' => 'ページネーション',
)
);
?>
screen_reader_textパラメータはthe_posts-pagination関数の初期値で表示される「投稿ナビゲーション」のテキストを変更することができるパラメータです。
screen_reader_textの値に変更したい文字列を記述するとスクリーンリーダー用のテキストを変更できます。
ページネーションをthe_posts_paginationで表示
WordPressにページネーションをthe_posts_paginationで表示するときには、投稿一覧にしているトップページのindex.phpやカテゴリーの記事一覧にしているcategry.phpにthe_posts_pagination()を記述します。
the_posts_pagination(
array(
'mid_size' => 2,
'prev_text' => '次へ',
'next_text' => '前へ',
)
);
WordPressでの一覧形式の記事はループ処理をして表示するかと思うので、ループ処理が終わった下あたりに<?php the_posts_pagination(); ?>を記述、括弧内にarray()を記述してパラメータでページネーションを設定して表示させます。
functions.phpでthe_posts_paginationのパラメータをセットしておき、ページネーションを任意の関数で呼び出して表示しても良いかと思います。
function original_pagenation(){
the_posts_pagination(
array(
'mid_size' => 2,
'prev_text' => '次へ',
'next_text' => '前へ',
)
);
}
ページネーションを使用するWordPressテーマのfunctions.phpにユーザー定義関数を作成して、WordPress関数のthe_posts_pagination()にパラメータをセットしておくと、作成した関数名だけでページネーションをテンプレートに出力して表示できます。
例えば上記のPHPコードをfunctions.phpに記述した場合のページネーションの表示方法は以下のようにして表示させます。
<?php original_pagenation(); ?>
original_pagenation()をPHPの開始タグ、終了タグで囲みWordPressテーマのindex.phpやcategry.phpに記述するとページネーションをthe_posts_paginationで表示することができます。
スクリーンリーダー用テキストの表示をしない
WordPressのthe_posts-pagination()関数でページネーションを表示すると、ページ送りに使用する番号と前後のリンクの上にスクリーンリーダー用テキストがh2タグで自動で出力されます。
the_posts_paginationで表示するページネーションでスクリーンリーダー用のテキストを表示しないようにしたいと思うかもしれません。
function no_screen_reader_text($template){
$template = '
<nav class="navigation %1$s" role="navigation">
<div class="nav-links">%3$s</div>
</nav>';
return $template;
}
add_action( 'navigation_markup_template', 'no_screen_reader_text' );
そんなときには上記のPHPコードをfunctions.phpに記述します。
素直に言います。詳しいことまでは分かりません。
分かることと言えば、the_posts_pagination()で表示するaタグのリンク集団をラッピングしているHTML(navタグとdivタグ)を文字列として$template変数に代入したものを、関数の引数にしてnavigation_markup_templateにフックすることで、スクリーンリーダー用のテキストをマークアップしてるh2要素をフィルタリングしている。
ということをしてページネーションのスクリーンリーダー用テキストを表示しないようにできます。
また、navのクラスには%1$sが必要で、%1$sを書かなかった場合にはnavタグにクラス付けされている「pagination」クラスが付与されません。
divのテキストには%3$sが必要です。%3$sを記述しないとページネーションのリンクの配置が特定できなくなるようで、the_posts_pagination()でページネーションを表示させても表示されなくなってしまいます。
<nav class="navigation pagination" role="navigation">
<div class="nav-links">
<a class="prev page-numbers" href="http://x.local/">前へ</a>
<a class="page-numbers" href="http://x.local/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://x.local/page/3/">3</a>
<a class="page-numbers" href="http://x.local/page/4/">4</a>
<a class="page-numbers" href="http://x.local/page/5/">5</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://x.local/page/7/">7</a>
<a class="next page-numbers" href="http://x.local/page/3/">次へ</a>
</div>
</nav>
ラッピング要素をフィルタリングした結果、WordPressのthe_posts_pagination()関数でページネーションを表示しても、スクリーンリーダー用のテキストを表示するh2要素はソース上でも表示しなくなります。