【WordPress】ページネーションの「…(ドット)」を変更・編集する方法

【WordPress】ページネーションの「…(ドット)」を変更・編集する方法 WordPress

WordPress の the_posts_pagination() や paginate_links() を利用してページネーションを実装すると、ページ数が多い場合に途中が 「…(ドット)」 で省略されます。デフォルトではこの省略記号は …(三点リーダー)ですが、テーマやデザインに合わせてテキストや記号を変更することが可能です。本記事ではその方法を解説します。

スポンサーリンク

paginate_links() を直接カスタマイズする

paginate_links() 関数は 'type' => 'array' で配列として出力を取得できるため、省略記号を含む要素を差し替えることができます。

single.php等:省略記号の置換
<?php
$pagination = paginate_links( array(
  'total'   => $wp_query->max_num_pages,
  'current' => max( 1, get_query_var( 'paged' ) ),
  'type'    => 'array',
) );

if ( ! empty( $pagination ) ) {
  echo '<ul class="pagination">';
  foreach ( $pagination as $page ) {
    // 省略記号「…」を任意の文字に置換
    $page = str_replace( '&hellip;', '...', $page );
    echo '<li>' . $page . '</li>';
  }
  echo '</ul>';
}
?>

上記の str_replace() 部分を変更すれば、「…」や「続きを読む」など自由に置き換えることができます。

the_posts_pagination() の場合

the_posts_pagination() は内部的に paginate_links() を呼び出しています。'mid_size' を小さくするとドットが出やすく、大きくするとドットが出にくくなります。mid_size の調整でドットの表示頻度を変えることも可能です。

the_posts_pagination()の使用例
<?php
the_posts_pagination( array(
  'mid_size'           => 2,
  'prev_text'          => '« 前へ',
  'next_text'          => '次へ »',
  'screen_reader_text' => 'ページ送り',
) );
?>

関数化して使い回す

複数のテンプレートファイルで同じ置換処理を使いたい場合は、functions.php に関数としてまとめておくと便利です。

functions.php:再利用可能な関数
<?php
function custom_pagination_with_dots_replaced( $args = array() ) {
  $args['type'] = 'array';
  $links = paginate_links( $args );

  if ( empty( $links ) ) {
    return;
  }

  echo '<nav class="pagination" aria-label="ページネーション"><ul>';
  foreach ( $links as $link ) {
    // 省略記号「…」を任意の文字に置換
    $link = str_replace( '&hellip;', '***', $link );
    echo '<li>' . $link . '</li>';
  }
  echo '</ul></nav>';
}
?>

テンプレート側では、次のように呼び出すだけで使えます。

single.php等:関数の呼び出し
<?php
custom_pagination_with_dots_replaced( array(
  'total'   => $wp_query->max_num_pages,
  'current' => max( 1, get_query_var( 'paged' ) ),
) );
?>
paginate_linksフィルターでは省略記号を変更できない
add_filter('paginate_links', ...)で一括変更できると紹介されることがありますが、これは誤りです。WordPressコアでは、このpaginate_linksフィルターは前へ・次へ・各ページ番号リンクに対して、リンクの完全なHTMLではなくURL文字列のみを引数に呼ばれます。さらに省略記号(ドット)の<span class="page-numbers dots">&hellip;</span>部分は単純な文字列連結で生成されており、このフィルターを一切通りません。そのためpaginate_linksフィルター内で&hellip;を置換しようとしても、渡されるのはURL文字列だけなので一致するものがなく、何も変更されません。省略記号を変更したい場合は、上記のようにpaginate_links()の配列出力を直接str_replace()する方法を使ってください。

よくある質問(FAQ)

Qpaginate_links()の省略記号(…)をカスタマイズするには?
Apaginate_links()のdots_textパラメーターはありませんが、’type’ => ‘array’で配列として出力を取得し、各要素をstr_replace()で「…」を任意の文字列に置換できます。paginate_linksフィルターは省略記号のspanを通らないため使えません。
QページネーションをCSS・デザインでカスタマイズするには?
Apaginate_links()が出力するHTMLのCSSクラス(.page-numbers・.current・.dots等)に対してスタイルを定義します。子テーマのstyle.cssにカスタムCSSを追加します。
Qページネーションを使わずにAjaxで続きを読み込む実装の利点は?
Aページ遷移なしで次の記事を読み込めるためUXが向上します。ただしSEO的には各ページが独立したURLを持つページネーションの方が有利な場合があります。使用目的に応じて選択してください。

まとめ

  • paginate_links() の出力を配列で取得して str_replace() で置換する方法
  • the_posts_pagination() の mid_size 調整でドットの出現頻度をコントロール
  • 置換処理を関数化してfunctions.phpにまとめ、複数のテンプレートから呼び出す

ページネーションの「…」は小さな部分ですが、デザイン全体の印象に関わります。paginate_linksフィルターでは省略記号は変更できないので、配列出力の置換方式を使ってサイトに合わせて自由にカスタマイズしてみてください。