【WordPress】プラグイン無しで番号付きのページネーションを実装する方法

ワードプレスでページネーションを実装したいとき、2パターンの方法があります。

1. プラグインを使う
2. 自分でコードを書く

プラグインで対応する場合は「WP-PageNavi」を使う方法が多く知られています。
ダッシュボードからプラグインを検索して有効化するだけ、特別な設定もほとんどないので簡単です。

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」で使えるオプションを紹介します。

最後に

プラグインを利用しなくてもぺージネーションを実装することができる「get_the_posts_pagination」と「the_posts_pagination」を紹介しました。
特にオリジナルのテーマを開発する際は積極的にご利用ください。