WordPressにページネーションを入れる方法

WordPressでページネーションを実現するには、「WP-PageNavi」を使うか自身でテーマなりに実装をする必要があります。自分で実装をする場合は、今まではpaginate_links()を使った実装が主だったわけですが、WordPress 4.1からは簡単にページネーションを出力できるテーマ関数が用意されました。今回は、そのテーマ関数を紹介します。

WordPress 4.1で用意された関数は、the_posts_pagination()とget_the_posts_pagination()です。the_posts_pagination()とget_the_posts_pagination()の違いは、ページに出力するかしないかの違いしかありません。

the_posts_pagination()
ページ出力する
get_the_posts_pagination()
ページ出力しない

なので以下は、the_posts_pagination()について書きますが、get_the_posts_pagination()でも同じように使えます。

the_posts_pagination()の仕様

the_posts_pagination( $args );

引数	型	説明	デフォルト	必須
$args	array	ページネーションに入れたい配列	array()

the_posts_pagination()に必要な引数は$argsの1つですが、任意に指定することもできます。引数を指定するには配列である必要がありthe_posts_pagination()に指定できる配列には以下の通りです。

キー	型	デフォルト	説明
base	string	%_%	URLを参照し、ページ番号付きのリンクを生成する。デフォルトと同じ場合、formatで置き換える
format	string	?page=%#%	ページネーションのパーマリンク構造を指定
total	int	1	全体のページ数
current	int	0	現在のページ番号
show_all	boolean	false	すべてのページ番号を表示する。falseの場合、end_size, mid_sizeでコントロールする
end_size	int	1	ページ番号のリストの両端(最初と最後)にいくつの数字を表示するか
mid_size	int	1	現在ページの前後のページ番号をいくつ表示するか。
prev_next	boolean	true	リストの中に「前へ」「次へ」のリンクを含むかどうか。trueの場合、prev_text, next_textを指定
prev_text	string	__( ‘Previous’ )	前のページへ送る時のリンクの文言
next_text	string	__( ‘Next’ )	次のページへ送る時のリンクの文言
type	string	plain	戻り値のコントロール。指定できるのは、plainとlistのみ
add_args	array or boolean	false	追加のクエリ引数の配列
add_fragment	string or boolean	false	それぞれのリンクに付け加える文字列
before_page_number	string	”	各ページ番号の前に入れる文字列
after_page_number	string	”	各ページ番号の後に入れる文字列
screen_reader_text	string	__( ‘Posts navigation’ )	スクリーンリーダー用の文言

typeには、plainとlist以外にarrayも指定できますが、the_posts_pagination()においてarrayはplainに置き換えられます。

the_posts_pagination()の使い方

the_posts_pagination()の使い方は以下の通りです。

the_posts_pagination( array(
    'prev_text' => __( 'Previous page', 'twentyfifteen' ),
    'next_text' => __( 'Next page', 'twentyfifteen' ),
    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
) );

WordPress 4.1で新たに追加されたテーマTwenty Fifteenで使っている部分を抜き出しただけなのですが、これだけでページネーションが出力されます。出力結果はこんな感じです。

<nav class="navigation pagination" role="navigation">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <a class="prev page-numbers" href="http://example.com/">前のページ</a>
    <a class="page-numbers" href="http://example.com/"><span class="meta-nav screen-reader-text">固定ページ </span>1</a>
    <span class="page-numbers current"><span class="meta-nav screen-reader-text">固定ページ </span>2</span>
    <a class="page-numbers" href="http://example.com/page/3"><span class="meta-nav screen-reader-text">固定ページ </span>3</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="http://example.com/page/13"><span class="meta-nav screen-reader-text">固定ページ </span>13</a>
    <a class="next page-numbers" href="http://devops.local/page/3">次のページ</a>
  </div>
</nav>

before_page_numberが設定されているぶん各ページ番号に<span class="meta-nav screen-reader-text">固定ページ </span>が出力されています。これらを除きたければ、the_posts_pagination()の配列にあるbefore_page_numberの１行を消せば大丈夫です。

前後のページ番号を増やしたければthe_posts_pagination()にmid_sizeを指定します。

the_posts_pagination( array(
    'mid_size' => 3,
    'prev_text' => __( 'Previous page', 'twentyfifteen' ),
    'next_text' => __( 'Next page', 'twentyfifteen' ),
    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
) );

まとめ

the_posts_pagination()やget_the_posts_pagination()は、WordPressのページネーションを簡単に出力できる便利な関数です。WordPress 4.1からしか使うことができませんが、今までページネーションをつくるのがちょっと面倒だったのが楽になるのはとてもいいです。テーマ開発をするときは積極的に使っていきたいですね！