ページ番号を入力して指定ページへ直接ジャンプする方法

はじめに

Cocoonの標準のページネーションは非常に便利ですが、記事数やアーカイブのページ数が非常に多くなった場合、何度も「次へ」をクリックしたり、間のページ番号を何度も経由したりする必要があり、目的のページにたどり着くのが大変になることがあります。

そこで、ページ番号をキーボードで直接入力し、エンターキーを押すだけでそのページに移動できる「ページジャンプ機能」を追加します。

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

完成イメージ

実装手順

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

// テンプレート（ページネーション）の後に変更
add_action('cocoon_part_after__tmp/pagination', function ($name, $args) {
  global $wp_query;

  // 現在のメインクエリから総ページ数を取得
  $pages = (int) $wp_query->max_num_pages;

  // 総ページ数が1ページ以下の場合
  if ($pages <= 1) {
    return;
  }

  $dummy_num = 999999999;

  // ページネーションのベースURLをダミー数値を含めた状態で取得
  $base_url = html_entity_decode(get_pagenum_link($dummy_num));

  ?>
  <div class="page-jump">
    <input type="number" class="page-jump__input" min="1" max="<?php echo $pages; ?>" data-base-url="<?php echo esc_url($base_url); ?>" data-dummy-num="<?php echo $dummy_num; ?>">
    <span class="page-jump__total">/ <?php echo $pages; ?> ページ</span>
  </div>
  <?php
}, 10, 2);


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

  .body .page-jump__input {
    padding: 5px;
    text-align: center;
    width: 100px;
  }

  .front-top-page:has(#index-tab-2:checked, #index-tab-3:checked, #index-tab-4:checked) .page-jump {
    display: none;
  }
  <?php

  $handle = 'cocoon-page-jump';

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


  ob_start();
  ?>
  jQuery(function ($) {
    // ページジャンプ用入力欄でのキー押下イベントを監視
    $(document).on('keypress', '.page-jump__input', function (e) {
      // Enterキーが押された場合のみ処理を実行
      if (e.key === 'Enter') {
        e.preventDefault();

        const $this = $(this);
        const val = $this.val();
        const page = parseInt(val, 10);
        const maxPages = parseInt($this.attr('max'), 10);

        // 未入力または数値以外の場合は処理を中断
        if (!val || isNaN(page)) {
          return;
        }

        // 入力されたページ番号が有効範囲内かチェック
        if (page >= 1 && page <= maxPages) {
          const baseUrl = $this.data('base-url');
          const dummyNum = $this.data('dummy-num');

          if (!baseUrl || !dummyNum) {
            return;
          }

          // ダミー数値を指定されたページ番号に置換して遷移用URLを生成
          const targetUrl = baseUrl.toString().replace(dummyNum.toString(), page);

          // 該当ページのURLへ画面を遷移
          window.location.href = targetUrl;
        }
      }
    });
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、Cocoonの標準のページ送り機能を一切損なうことなく、大規模なサイトや検索結果ページにおけるユーザーの回遊性を劇的に向上させることができます。

「何度もクリックするのが大変」という課題に対しても、数字を入力してエンターを押すだけという直感的な操作で、目的のページへストレスなく瞬間移動できるようになります。