ページネーションをドロップダウンに変更する方法

はじめに

以下の質問に回答します。

ページネーションにドロップダウン式がほしい

記事数が5,000を超えてインデックページも500ページ以上になります。 読者の方の中には昔の記事から読んでくださる方がたくさんいるのですが、 これだけページが多いと移動するのが大変だなと思います。 そこでページネーションがドロップダウン式...

wp-cocoon.com

さらに、分割ページのページネーションを、ドロップダウン形式に変更します。

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

完成イメージ

実装手順

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

// テンプレート（ページネーション）を変更
add_filter('cocoon_part__tmp/pagination', function ($content) {
  global $paged, $wp_query;

  // 現在のページ番号を設定
  if (empty($paged)) {
    $paged = 1;
  }

  $icon_prev = "<span class='fa fa-angle-left' aria-hidden='true'></span>";
  $icon_next = "<span class='fa fa-angle-right' aria-hidden='true'></span>";

  $btn_prev = "<span class='page-numbers'>{$icon_prev}</span>";
  $btn_next = "<span class='page-numbers'>{$icon_next}</span>";

  // クエリから最大ページ数を取得
  $max_page = $wp_query->max_num_pages;

  // 2ページ以上の場合
  if ($max_page > 1) {
    // 前ページへのリンクを設定
    if ($paged > 1) {
      $btn_prev = sprintf('<a class="page-numbers" href="%s">%s</a>', esc_url(get_pagenum_link($paged - 1)), $icon_prev);
    }

    // 次ページへのリンクを設定
    if ($paged < $max_page) {
      $btn_next = sprintf('<a class="page-numbers" href="%s">%s</a>', esc_url(get_pagenum_link($paged + 1)), $icon_next);
    }
  }

  ob_start();
  ?>
  <div class="pagination">
    <?= $btn_prev; ?>

    <select class="pagination__select" onChange="location.href=this.value;">
      <?php for ($i = 1; $i <= $max_page; $i++): ?>
        <option value="<?= esc_url(get_pagenum_link($i)); ?>" <?php selected($paged, $i); ?>>
          <?= $i; ?> / <?= $max_page; ?>ページ
        </option>
      <?php endfor; ?>
    </select>

    <?= $btn_next; ?>
  </div>
  <?php
  return ob_get_clean();
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .pagination {
    .pagination__select {
      outline: none;
      text-align: center;
    }

    .page-numbers {
      flex-shrink: 0;
      height: 50px;
      line-height: 50px;
      width: 50px;

      &:not([href]) {
        color: #ccc;
      }
    }
  }
  <?php

  $handle = 'pagination-select';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

参考：分割ページのページネーションをドロップダウンに変更する方法

「ページ区切り」ブロックで作成した分割ページのページネーションを、ドロップダウン形式に変更します。

実装手順

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

// テンプレート（分割ページネーション）を変更
add_filter('cocoon_part__tmp/pager-page-links', function () {
  global $page, $numpages, $multipage;

  // 複数ページ分割されていない場合は終了
  if (!$multipage) {
    return;
  }

  // 前後ページ用のアイコンを設定
  $icon_prev = "<span class='fas fa-angle-left' aria-hidden='true'></span>";
  $icon_next = "<span class='fas fa-angle-right' aria-hidden='true'></span>";

  // 前後ページの初期状態を設定
  $btn_prev = "<span class='page-numbers disabled'>{$icon_prev}</span>";
  $btn_next = "<span class='page-numbers disabled'>{$icon_next}</span>";

  /**
   * 指定ページ番号のURLを取得
   *
   * @param int $page_num ページ番号
   * @return string パーマリンクURL
   */
  $get_page_url = function ($page_num) {
    $link_html = _wp_link_page($page_num);
    preg_match('/href=["\']([^"\']+)["\']/', $link_html, $matches);
    return $matches[1] ?? get_permalink();
  };

  // 前ページへのリンクを設定
  if ($page > 1) {
    $btn_prev = sprintf('<a class="page-numbers" href="%s">%s</a>', esc_url($get_page_url($page - 1)), $icon_prev);
  }

  // 次ページへのリンクを設定
  if ($page < $numpages) {
    $btn_next = sprintf('<a class="page-numbers" href="%s">%s</a>', esc_url($get_page_url($page + 1)), $icon_next);
  }

  ob_start();
  ?>
  <div class="pagination pager-post-links">
    <?= $btn_prev; ?>

    <select class="pagination__select" onchange="if (this.value) location.href=this.value;">
      <?php for ($i = 1; $i <= $numpages; $i++): ?>
        <option value="<?= esc_url($get_page_url($i)); ?>" <?php selected($page, $i); ?>>
          <?= $i; ?> / <?= $numpages; ?>ページ
        </option>
      <?php endfor; ?>
    </select>

    <?= $btn_next; ?>
  </div>
  <?php
  return ob_get_clean();
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .pagination__select {
    outline: none;
    text-align: center;
  }

  .page-numbers {
    flex-shrink: 0;
    height: 50px;
    line-height: 50px;
    width: 50px;

    &:not([href]) {
      color: #ccc;
    }
  }
  <?php

  $handle = 'pagination-select';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

さいごに

今回紹介した方法を使えば、ページネーションをドロップダウン形式に変更することができます。
ただし、ページ数が多い場合、ドロップダウン操作では使いにくいかもしれませんので、その点も考慮して実装を検討してください。