<span class="new-txt">New!</span>タブ表示と記事の表示数変更

ある団体のホームページ（cocoon wordpress)を運営しています。

ホームページでは、インデックスページで、新着記事に加え、カテゴリー別の記事を「タブ切替」で表示していました。

通常の新着記事にはページネーション（ページ送り）が表示され、複数ページに渡る記事を順に閲覧できる仕組みとなっています。
一方で、各タブ内のカテゴリー記事については、「もっと見る」ボタンを押すことで、カテゴリーアーカイブページに遷移し、そこで初めてページネーションが表示される仕様となっています。

このたび、より使いやすく、ページ遷移を減らすため、JavaScript によるカスタマイズを行い、以下のような改善を加えました。

主な変更点

■ タブ内の記事表示数の制御（レスポンシブ対応）

スマートフォン表示（画面幅480px以下）の場合：初期表示は 5件
パソコン表示の場合：初期表示は 10件

それ以上の記事は、「全て表示」ボタンを押すことで一覧表示され、「閉じる」ボタンで再び初期表示数に戻す。

■ ページネーションの非表示化

通常の新着記事セクションについては、今回の仕様変更によりページネーション（ページ送り）は表示されないようにしました。
これにより、インデックスページ内でタブ表示と記事一覧の閲覧が完結するようになっています。

実装概要

■ JavaScriptによる制御

以下のスクリプトにより、デバイスごとに初期表示件数を制御し、「全て表示／閉じる」ボタンで切り替えを実装しています。

javascript設定

document.addEventListener('DOMContentLoaded', function () {
  const initialCountMobile = 5;
  const initialCountPC = 10;
  const isMobile = window.innerWidth <= 480;
  const initialCount = isMobile ? initialCountMobile : initialCountPC;

  const container = document.querySelector('.saishinjyoho-box');
  if (!container) return;

  container.querySelectorAll('.tab-content').forEach(tab => {
    const cardLinks = tab.querySelectorAll('.new-entry-cards .a-wrap');
    const moreBtn = tab.querySelector('.more-button');
    let expanded = false;

    cardLinks.forEach((link, index) => {
      link.style.display = (index < initialCount) ? '' : 'none';
    });

    if (moreBtn && cardLinks.length > initialCount) {
      moreBtn.style.display = 'block';
      moreBtn.addEventListener('click', function () {
        expanded = !expanded;
        cardLinks.forEach((link, index) => {
          link.style.display = (expanded || index < initialCount) ? '' : 'none';
        });
        moreBtn.textContent = expanded ? '閉じる' : '全て表示';
      });
    } else if (moreBtn) {
      moreBtn.style.display = 'none';
    }
  });
});

■ ページネーションの非表示制御

javascript設定

document.addEventListener('DOMContentLoaded', function () {
  const indexSection = document.querySelector('.front-page-type-index');
  const paginationNext = document.querySelector('.pagination-next');
  const pagination = document.querySelector('.pagination');

  if (indexSection) indexSection.style.display = 'none';
  if (paginationNext) paginationNext.style.display = 'none';
  if (pagination) pagination.style.display = 'none';
});

■ タブ表示構造（ショートコード使用）

以下のように、各カテゴリーごとのタブをウィジェットまたはHTMLブロックに設定しています。

<div class="saishinjyoho-box">
  <div class="tab-wrap">

    <input id="TAB-1" type="radio" name="TAB01" class="tab-switch" checked="checked" />
    <label class="tab-label" for="TAB-1">最新情報</label>
    <div class="tab-content">

ショートコード

【new_list count=”99″ cats=”111″ post_type=”post” type=”border_partition” arrow=0】

【new_list count=”99″ cats=”222″ post_type=”post” type=”border_partition” arrow=0】

【new_list count=”99″ cats=”333″ post_type=”post” type=”border_partition” arrow=0】

このカスタマイズにより、ページ遷移なしで複数の記事を確認できるようになり、操作性が向上しました。