フロントページ「タブ一覧」のカテゴリーにページネーションを表示する方法

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

add_filter('cocoon_part__tmp/list-tab-index', function ($content, $name, $args) {
  if (!is_front_page_type_tab_index()) {
    return $content;
  }

  // タブに表示するカテゴリIDを取得
  $cat_ids = get_index_list_category_ids();
  if (empty($cat_ids)) {
    return $content;
  }

  // 最大表示タブ数を取得
  $cat_count = apply_filters('cocoon_index_max_category_tab_count', 3);

  global $wp_rewrite;

  $number = 1;
  $target_cats = array_slice($cat_ids, 0, $cat_count);

  foreach ($target_cats as $cat_id) {
    // カテゴリなしは処理対象外
    if (!is_category_exist($cat_id)) {
      continue;
    }

    $number++;

    // カテゴリの総ページ数を取得
    $query = new WP_Query([
      'post_type'        => 'post',
      'posts_per_page'   => get_option_posts_per_page(),
      'cat'              => (int) $cat_id,
      'category__not_in' => get_archive_exclude_category_ids(),
      'post__not_in'     => get_archive_exclude_post_ids(),
      'no_found_rows'    => false,
    ]);

    // 1ページ以下は処理対象外
    if ($query->max_num_pages <= 1) {
      continue;
    }

    $category_link = esc_url(get_category_link($cat_id));
    $is_permalink  = $wp_rewrite->using_permalinks();

    // 2ページ目のURLを設定
    $next_url = $category_link;
    if ($is_permalink) {
      $next_url = user_trailingslashit(trailingslashit($next_url) . 'page/2', 'paged');
    } else {
      $next_url = add_query_arg('paged', 2, $next_url);
    }

    $next_caption = apply_filters('pagination_next_link_caption', __('次のページ', THEME_NAME));

    ob_start();
    ?>
    <div class="pagination-next tab-category-pagination">
      <a href="<?= $next_url; ?>" class="pagination-next-link key-btn"><?= $next_caption; ?></a>
    </div>

    <div class="pagination tab-category-pagination">
      <?= paginate_links([
        'base'      => $category_link . '%_%',
        'format'    => $is_permalink ? user_trailingslashit('page/%#%', 'paged') : '?paged=%#%',
        'total'     => $query->max_num_pages,
        'current'   => 1,
        'mid_size'  => 1,
        'prev_text' => '<span class="screen-reader-text">' . __('前へ', THEME_NAME) . '</span><span class="fa fa-angle-left" aria-hidden="true"></span>',
        'next_text' => '<span class="screen-reader-text">' . __('次へ', THEME_NAME) . '</span><span class="fa fa-angle-right" aria-hidden="true"></span>',
      ]); ?>
    </div>
    <?php
    $pagination_html = ob_get_clean();

    // 対象タブの「もっと見る」ボタンをページネーションに置換
    $content = preg_replace(
      '/(<div class="tab-cont tb' . $number . '">.*?)(<div class="list-more-button-wrap">.*?<\/div>)/s',
      '$1' . $pagination_html,
      $content
    );
  }

  return $content;
}, 10, 3);

以下のコードをstyle.cssに追加します。

.tab-category-pagination {
  display: block !important;
}

.tab-cont:has(.tab-category-pagination) .list {
  margin-bottom: 3rem;
}