エントリーカードの表示件数を選択可能にする方法

はじめに

エントリーカードの表示件数は、設定→表示設定→「1ページに表示する最大投稿数」で設定され固定となっています。

そこで、エントリーカードの表示件数を選択可能にします。

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

完成イメージ

実装手順

以下の手順で実装します。

// テンプレート（インデックスリスト）の直前に追加
add_action('cocoon_part_before__tmp/list-index', function () {
  // 表示数の選択肢を設定
  $per_page_options = [12, 24, 36];

  // 現在の選択値を取得
  $current_value = isset($_GET['posts_per_page']) ? intval($_GET['posts_per_page']) : 12;

  ?>
  <style>
  .posts-per-page {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  </style>

  <div class="posts-per-page">
    <span class="posts-per-page__label">表示数</span>
    <form class="posts-per-page__form" method="get">
      <select class="posts-per-page__select" name="posts_per_page" onchange="this.form.submit()">
        <?php
        foreach ($per_page_options as $value) {
          $selected = $current_value === $value ? ' selected' : '';
          echo "<option value='{$value}'{$selected}>{$value}件</option>";
        }
        ?>
      </select>
    </form>
  </div>
  <?php
});


// 投稿クエリの取得条件を変更
add_action('pre_get_posts', function ($query) {
  if (is_admin() || !$query->is_main_query()) {
    return;
  }

  if (isset($_GET['posts_per_page'])) {
    // 表示数を設定
    $query->set('posts_per_page', intval($_GET['posts_per_page']));
  }
}, 20);

さいごに

今回紹介した方法を使えば、エントリーカードの表示件数をユーザーが選択できるようになり、より柔軟な投稿一覧表示が可能となります。