分割ページのページネーションを一覧ページと同じ表示にする方法

はじめに

「ページ区切り」ブロックを用いた分割ページでは、ページネーションとボタンの表示が異なります（図1参照）。

一覧ページのページネーションでは、ページ数が多い場合に「…」で省略されることがありますが、分割ページでは全てのページ番号が表示され、ページ数が多くても省略されません。

そこで、分割ページをページネーションと同じ表示に変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/pager-page-links', function () {
  global $page, $numpages, $multipage;

  // 複数ページ以外の場合
  if (!$multipage) {
    return;
  }

  $mid_size = 2; // 現在ページの前後に表示するページ数
  $dot      = false;
  $html     = '';

  // 分割ページのURLを取得し、指定されたクラスを付与した<a>タグを生成
  $get_clean_link = function ($n, $classes) {
    // _wp_link_page()で得たHTMLから、正規表現を用いてhref属性のみを抽出
    preg_match('/href=["\']([^"\']+)["\']/', _wp_link_page($n), $matches);
    $url = !empty($matches[1]) ? esc_url(htmlspecialchars_decode($matches[1])) : '#';

    return '<a href="' . $url . '" class="' . esc_attr($classes) . '">';
  };

  // 前へボタンを追加
  if ($page > 1) {
    $html .= $get_clean_link($page - 1, 'prev page-numbers') . '<span class="screen-reader-text">' . __('前へ', THEME_NAME) . '</span><span class="fas fa-angle-left" aria-hidden="true"></span></a>';
  }

  // ページ番号を生成
  for ($n = 1; $n <= $numpages; $n++) {
    if ($n == $page) {
      // 現在のページにはクラスcurrentを追加
      $html .= '<span aria-current="page" class="page-numbers current">' . $n . '</span>';
      $dot   = true;
    } else {
      if ($n == 1 || ($page - $mid_size <= $n && $n <= $page + $mid_size) || $n == $numpages) {
        $html .= $get_clean_link($n, 'page-numbers') . $n . '</a>';
        $dot   = true;
      } elseif ($dot) {
        // ドットを表示
        $html .= '<span class="page-numbers dots">&hellip;</span>';
        $dot   = false;
      }
    }
  }

  // 次へボタンを追加
  if ($page < $numpages) {
    $html .= $get_clean_link($page + 1, 'next page-numbers') . '<span class="screen-reader-text">' . __('次へ', THEME_NAME) . '</span><span class="fas fa-angle-right" aria-hidden="true"></span></a>';
  }

  return '<div class="pagination">' . $html . '</div>';
});

さいごに

今回紹介した方法を使えば、分割ページのページ番号を一覧ページのページネーションと同じ表示に統一できます。
分割ページのページ番号は、wp_link_pages()を使用して自動生成されます。

cocoon/tmp/pager-page-links.php at bbe0139518569602848586e18de4d75906112e0d · xserver-inc/cocoon

100％GPLの無料WordPressテーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、Cocoon配布サイトからダウンロードしてください。 - xserver-inc/cocoon

github.com

wp_link_pages()はpaginate_links()とは異なり、現在のページの周囲に表示するページ番号の数を指定するmid_sizeパラメータがありません。
そのため、分割ページを独自に作成し、ページネーションに合わせる必要があります。