TwentySeventeenのページネーション表示数を増やす方法

WordPressのデフォルトテンプレート、TwentySeventeenには最初から各ページへのリンクを並べるページネーションが設置されています。この各ページへのリンクの表示数を増やす方法と、増やしたリンクを小さい画面でも表示する方法をご紹介します。

ページネーションリンクを増やす

TwentySeventeenのページネーションはデフォルトでは上の図のようになっています。

デフォルトでページネーションが用意されていること自体は嬉しいのですが、これでは前後のページと最初・最後のページにしか移動できず、例えばこの画面から5ページ目に飛びたいと思うとページを順に辿っていかなくてはいけません。（URLを直接叩けば1発でいけますが）

個人的にですが、記事数の多いサイトではもう少しリンクが多い方がユーザーも回遊しやすく、Googleのクローラーもサイト全体を把握しやすいのではないかと思っています。

TwentySeventeenではページネーションはindex.phpやarchive.phpに直接記述されています。（テーマの編集ができる方はテンプレートパーツとして分けてしまっても良いかもしれません。）

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

テンプレートタグの the_posts_pagination でページネーションを呼び出しています。配列に3行目の mid_size を追加して表示する前後のページ数を指定しましょう。

例として表示する前後のページ数を3にしてみました。

現在1ページ目にいるので4ページ目までのリンクが表示されます。

前後3ページずつが表示されるので、4ページ目に移動すると1～7ページ目までのリンクが表示されます。

スマホ用の設定

これで大きな画面では指定したページネーションで表示されるリンク数が増えましたがスマホなどの小さな画面ではどうでしょうか。

TwentySeventeenではスマホなどの小さな画面で表示した場合、現在のページ数以外のリンクを非表示にするようCSSで記述されています。

スマホでもPC同様いくつかのページへのリンクを表示したい場合はCSSの記述を変更する必要があります。

.page-numbers {
	display: inline-block;
}

デフォルトだと display: none となっていて、画面サイズが一定以上の場合のみ inline-block となるようになっていますが、これを画面サイズ問わず inline-block となるようにします。

子テーマを使用している場合は上記の記述を付け加えればOKです。

非表示となっていたページリンクが表示されるようになりました。

しかし小さい画面でたくさんのリンクを表示しているため幅が足りず、2行になってデザインが崩れてしまっています。

大きな画面では表示されていなかった『ページ』という表記がスペースを取ってしまっているので非表示にしましょう。

.page-numbers.current .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}

こちらも小さい画面での表示がデフォルトとなっており、画面サイズが一定以上の場合のみ表記を変えるようになっていますので、大きい画面のものに統一しましょう。