WordPressでページネーションを作るpaginate_linksのカスタマイズ

2019.06.04
WordPress

WorePressでページネーションを生成できる便利な関数paginate_linksを使ったページ送りのデザインを変更する方法です。

paginate_linksの詳しい使い方はこちらの記事「WordPressでページネーションを実装する方法」でまとめています。

CSSでデザインを変更する

paginate_linksで生成されたhtmlタグのクラスにcssを設定してデザインを変更できます。通常、下記のようなhtmlが生成されます。

<span class="page-numbers current">1</span>
<a class="page-numbers" href="http://example.com/?paged=2">2</a>
<a class="page-numbers" href="http://example.com/?paged=3">3</a>
<a class="page-numbers" href="/http://example.com/?paged=4/">4</a>
<a class="next page-numbers" href="http://example.com/?paged=2">次へ »</a>

.page-numbers
表示されるテキストの共通クラスです。

.current
現在表示されているページのクラスです。

.next
「次へ」のテキストのクラスです。

.prev
「戻る」のテキストのクラスです。

「戻る」「次へ」のテキスト修正する

表示されるテキストはpaginate_linksのパラメータで変更できます。

<?php
 global $wp_query;    
 $big = 9999999999;
 $arg = array(
  'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
  'current' => max( 1, get_query_var('paged') ),
  'total'   => $wp_query->max_num_pages,
  'prev_text' => 'Prev',
  'next_text' => 'Next'
 );
 echo paginate_links($arg);
?>

prev_textに「戻る」、next_textに「次へ」に変わるテキストをそれぞれ設定します。

リスト形式で表示する

通常は<a>タグで表示されている箇所を<ul><li>タグで囲ったリスト形式に変更できます。

<?php
  $big = 9999999999;
  $arg = array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $wp_query->max_num_pages,
    'type'    => 'list'
  );
  var_dump(paginate_links($arg));
?>

パラメータのtypeをlistで設定します。下記のようにhtmlが出力されました。

<ul class="page-numbers">
  <li><span class="page-numbers current">1</span></li>
  <li><a class="page-numbers" href="http://hogehoge.com/?paged=2">2</a></li>
  <li><a class="page-numbers" href="http://hogehoge.com/?paged=3">3</a></li>
  <li><a class="page-numbers" href="http://hogehoge.com/?paged=4">4</a></li>
  <li><a class="next page-numbers" href="http://hogehoge.com/?paged=2">次へ »</a></li>
</ul>

cssとパラメータの応用で表示できるページネーションの幅が広がりました。