WordPressの記事一覧画面でページネーションのテンプレートタグ「the_posts_pagination()」を使えば、簡単にページネーションを作ること可能です。
がデフォルトのままだと、ちょっとダサいですよね。
そこで、このページでは the_posts_pagination() によって出力されるページネーションをカスタマイズ方法について紹介しようと思います。
具体的には「前へ」、「次へ」や「投稿ナビゲーション」の文言変更や、表示する番号の数を変更する方法などです。
リンクの色や形を変えたい
「the_posts_pagination()」によって出力される、タグ、クラスは次のようになります。
<nav class="navigation pagination" role="navigation" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<a class="prev page-numbers" href="http://localhost:8888/wordpress/page/3/">前へ</a>
<a class="page-numbers" href="http://localhost:8888/wordpress/">1</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://localhost:8888/wordpress/page/3/">3</a>
<span aria-current="page" class="page-numbers current">4</span>
<a class="page-numbers" href="http://localhost:8888/wordpress/page/5/">5</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://localhost:8888/wordpress/page/8/">8</a>
<a class="next page-numbers" href="http://localhost:8888/wordpress/page/5/">次へ</a>
</div>
</nav>なので、上記のクラスに対して、backgroundとかcolorとか好きな物を指定するとデザインを変更できます。
「投稿ナビゲーション」の表示を消す方法
そもそも、この「投稿ナビゲーション」の文字がいらないという場合は、次のクラスにdisplay:noneすれば消せます。
.screen-reader-text {
display: none;
}「投稿ナビゲーション」や「前へ」、「次へ」の文言を変える方法
文言を変えたい場合は、次のように書きます。
<?php
$params = array(
'screen_reader_text' => '表示したいテキスト' // 「投稿ナビゲーション」の文言変更
'prev_text' => '表示したいテキスト', // 「前へ」の文言変更
'next_text' => '表示したいテキスト' // 「次へ」の文言変更
)；
the_posts_pagination($params); ?>
上の「表示したいテキスト」のところに「>」や「<」などを入力すれば、その値が反映されます。
フォントアイコンも使えるので、fontawesomeからいい感じのものを探してセットしてもいいですね。
表示されるページ数を変更する場合
デフォルトでは、「最初のページ」、「最後のページ」、「表示されているページの前後のページ」、「前へページ（あれば）」、「次へページ（あれば）」が表示される仕様になっています。
この「表示されているページの前後のページ」の数を増やしたい場合は、次のように書くことができます。
<?php
$params = array(
'mid_size' => 2 // 前後に表示するページ数
)；
the_posts_pagination($params); ?>上記のように記述すると、前後のページ数が２ページずつ表示されるようになります
例えば、４ページ目を開くと、前の２ページ「２」と「３」、後の２ページ「５」と「６」が表示されます。
ページネーションのカスタマイズはこれぐらいです。
