フロントページ「タブ一覧」のカテゴリータブで「もっと見る」ボタンから2ページ目へ直接遷移させる方法

はじめに

Cocoon設定→インデックス→フロントページタイプ「タブ一覧」を設定した場合、カテゴリータブにはカテゴリーページの1ページが表示されます（図1参照）。
「もっと見る」ボタンをクリックすると、カテゴリー一覧ページとなり、再度、1ページ目が表示されます。

そこで、「もっと見る」ボタンをクリックした場合、2ページ目を表示するように変更します。

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

実装手順

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

add_filter('cocoon_part__tmp/list-tab-index', function ($content, $name, $args) {
  // フロントページがタブ一覧以外は処理対象外
  if (!is_front_page() || !is_front_page_type_tab_index()) {
    return $content;
  }

  // 「もっと見る」ボタンを置換
  $pattern = '/<div class="list-more-button-wrap">\s*<a href="([^"]+)" class="list-more-button">/i';

  return preg_replace_callback($pattern, function ($matches) {
    $original_url = $matches[1];

    // パーマリンク設定を確認して2ページ目URLを設定
    if (get_option('permalink_structure')) {
      // カスタムパーマリンクの2ページ目URLを設定（例: /category/news/page/2/）
      $new_url = user_trailingslashit(trailingslashit($original_url) . 'page/2');
    } else {
      // 基本パーマリンクの2ページ目URLを設定（例: /?cat=3&paged=2）
      $new_url = add_query_arg('paged', 2, $original_url);
    }

    return sprintf('<div class="list-more-button-wrap"><a href="%s" class="list-more-button">', esc_url($new_url));
  }, $content);
}, 10, 3);

さいごに

今回紹介した方法を使えば、フロントページのカテゴリータブで1ページ目の記事を読んだ読者が、スムーズに次の未読記事（2ページ目）へと読み進められるようになります。
重複した記事を何度も見せることなくユーザー体験を向上させることができるため、タブ一覧を活用している方はぜひ試してみてください。