プラグイン無しでアーカイブ系ページのページネーションを実装（複数ページ用）

一覧ページ用のページネーションthe_posts_pagination()の紹介。
基本的な表示なら、プラグイン無しで実装した方がメンテナンスが楽になりますよ。

仕様

WP4.1よりthe_posts_pagination() が実装されましたが、内部的にpaginate_links() を利用しているため両方の引数が使えます。

the_posts_pagination() の仕様

<?php the_posts_pagination( $args ); ?>

パラメータ	初期値	説明
mid_size	1	現在のページの左右に表示するページ番号の数
prev_text	Previous（JP:前へ）	投稿の前のセットへのリンクテキスト
next_text	Next（JP:次へ）	投稿の次のセットへのリンクテキスト
screen_reader_text	Posts navigation （JP:投稿ナビゲーション）	スクリーンリーダー用テキスト

※_textの表示は利用言語によって異なる。日本語は（JP:）

paginate_links() の仕様

<?php paginate_links( $args ); ?>

パラメータ	初期値	説明
base	%_%	ページ番号付きのリンクを生成するために使われるベースの URL を指定
format	?page=%#%	ページネーションの構造を指定
total	1	全体のページ数
current	0	現在のページ番号
show_all	false	true の場合、すべてのページ番号を表示 false の場合、現在のページ付近のページ番号の短いリスト。’end_size’ と ‘mid_size’ 引数でコントロール
end_size	1	ページ番号のリストの両端（最初と最後）にいくつの数字を表示するか指定
mid_size	2	現在のページの両側にいくつの数字を表示するか。ただし現在のページは含みません。
prev_next	true	「前へ」「次へ」のリンクを含むかどうか。
prev_text	__(‘« Previous’)	前のページへのリンクとして表示する文字列（’prev_next’ 引数が trueの場合）
next_text	__(‘Next »’)	次ページへのリンクとして表示する文字列（’prev_next’ 引数が trueの場合）
type	plain	戻り値の形式をコントロール ‘plain’ – 改行文字によって区切られたリンクの文字列を返します。 ‘array’ – 表示を完全にコントロールできるようにページ送りのリンクを配列に入れて返します。 ‘list’ – HTMLの ul タグを使ったリストを返します。
add_args	false	追加のクエリ引数の配列
add_fragment	（なし）	それぞれのリンクに付け加える文字列
before_page_number	（なし）	ページ番号の直前に付け加える文字列
after_page_number	（なし）	ページ番号の直後に付け加える文字列

初期値

the_posts_pagination()の初期値が優先されます。

<?php
	the_posts_pagination( array(
		'base'               => '%_%',
		'format'             => '?page=%#%',
		'total'              => 1,
		'current'            => 0,
		'show_all'           => false,
		'end_size'           => 1,
		'mid_size'           => 1,
		'prev_next'          => true,
		'prev_text'          => __( '« Previous', 'textdomain' ),
		'next_text'          => __( 'Next »', 'textdomain' ),
		'screen_reader_text' => __( 'Posts navigation', 'textdomain'),
		'type'               => 'plain',
		'add_args'           => false,
		'add_fragment'       => '',
		'before_page_number' => '',
		'after_page_number'  => '',
	) );
?>

get_the_posts_pagination()も同様ですが出力しないため、echoが必要になります。

標準のコードと出力されるHTML

<?php the_posts_pagination(); ?>

全20ページの10ページ目をみてる時のソース

<nav class="navigation pagination" role="navigation">
	<h2 class="screen-reader-text">投稿ナビゲーション</h2>
	<div class="nav-links">
		<a class="prev page-numbers" href="https://example.com/category_name/page/9/">前へ</a>
		<a class="page-numbers" href="https://example.com/category_name/">1</a>
		<span class="page-numbers dots">…</span>
		<a class="page-numbers" href="https://example.com/category_name/page/9/">9</a>
		<span aria-current="page" class="page-numbers current">10</span>
		<a class="page-numbers" href="https://example.com/category_name/page/11/">11</a>
		<span class="page-numbers dots">…</span>
		<a class="page-numbers" href="https://example.com/category_name/page/20/">20</a>
		<a class="next page-numbers" href="https://example.com/category_name/page/11/">次へ</a>
	</div>
</nav>

装飾用CSSクラス

.pagination {}
.pagination .nav-links {}
.pagination .nav-links .page-numbers {}
.pagination .nav-links .current {}
.pagination .nav-links .dots {}
.pagination .nav-links a.page-numbers {}
.pagination .nav-links a.page-numbers:hover {}
.pagination .nav-links a.prev.page-numbers,
.pagination .nav-links a.next.page-numbers {}
.pagination .nav-links a.prev.page-numbers:hover,
.pagination .nav-links a.next.page-numbers:hover {}

.navigation / .screen-reader-text / .nav-links これらのクラスは、他でも使われているため、単独で指定するより継承させた方が良い。

カスタマイズ例

サンプルで使っているCSS

.pagination .nav-links {
	text-align: center;
}
.pagination .nav-links .current {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 8px;
	border: 1px solid #f00;
	border-radius: 50%;
	background: #f00;
	color: #fff;
	font-size: 1.4rem;
	line-height: 30px;
}
.pagination .nav-links .dots {
	display: inline-block;
	margin: 8px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 30px;
}
.pagination .nav-links a.page-numbers {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 8px;
	border: 1px solid #005bac;
	border-radius: 50%;
	font-size: 1.4rem;
	text-decoration: none;
	line-height: 30px;
}
.pagination .nav-links a.page-numbers:hover {
	background: #005bac;
	color: #fff;
	transition: all .3s;
}
.pagination .nav-links a.prev.page-numbers,
.pagination .nav-links a.next.page-numbers {
	width: auto;
	padding-right: 6px;
	padding-left: 6px;
	border: 0;
	border-bottom: 1px solid #005bac;
	border-radius: 0;
	background: transparent;
}
.pagination .nav-links a.prev.page-numbers:hover,
.pagination .nav-links a.next.page-numbers:hover {
	background: #005bac;
	color: #fff;
}

前へ・次へを消す

<?php the_posts_pagination( array( 'prev_next' => false ) ); ?>

前へ・次へをアイコンフォントにする

<?php
	the_posts_pagination(
		array(
			'prev_text' => '<i class="fa fa-caret-left"></i>',
			'next_text' => '<i class="fa fa-caret-right"></i>'
		)
	);
?>

現在いるページの両側に表示するページ数を増やす

<?php the_posts_pagination( array( 'mid_size' => 3 ) ); ?>

Codex

最後に

全nページ中のnページを表示中とか色々できますが、その場合プラグインを使った方が早い事もあります。
気が向いたら、もっと踏み込んだ使い方を書くかもしれませんが・・・、
今回はここまで！！

仕様