タブでコンテンツを切り替える方法

このチュートリアルでは、ページの一部を「タブ」で切り替える実装方法を紹介します。
アニメーションなしで、スッキリ動作する軽量構成です。

1 実装のポイント

• HTMLでタブメニューとコンテンツを定義
• CSSで選択タブの見た目を制御
• JavaScriptでクリック時に内容を切り替え
• WordPressでは functions.php にスクリプトを登録

2 functions.php にコードを追加

注意： 必ず子テーマの functions.php に追加してください。親テーマに直接追加するとアップデートで消える可能性があります。

//-------------------------------------------
// タブ切り替え用スクリプトを読み込む
//-------------------------------------------
function add_tab_script() {
    wp_enqueue_script(
        'tab-script',
        get_stylesheet_directory_uri() . '/js/tab.js', // jsフォルダ内のtab.jsを読み込む
        array(), // 依存なし
        false,
        true // フッターで読み込み
    );
}
add_action('wp_enqueue_scripts', 'add_tab_script');

3 JavaScript にコードを追加

ファイル名：tab.js
保存先：wp-content/themes/child-theme/js/tab.js

//-------------------------------------------
// タブ切り替え用スクリプトを読み込む
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
  const tabs = document.querySelectorAll(".tab-menu li");
  const contents = document.querySelectorAll(".tab-content");

  tabs.forEach(function(tab) {
    tab.addEventListener("click", function() {
      tabs.forEach(t => t.classList.remove("active"));
      contents.forEach(c => c.classList.remove("active"));
      tab.classList.add("active");
      const target = tab.getAttribute("data-tab");
      document.getElementById(target).classList.add("active");
    });
  });
});

3.1 ディレクトリ構造

4 HTML構造

クラシックエディタの記事本文にも貼れるHTML例です。

<div class="tab-area">
  <ul class="tab-menu">
    <li class="active" data-tab="tab1">犬向けサービス</li>
    <li data-tab="tab2">猫向けサービス</li>
    <li data-tab="tab3">その他ペット</li>
  </ul>

  <div class="tab-content active" id="tab1">
    <p>ドッグトレーニング、しつけ教室、トリミング、ペットホテルなど</p>
  </div>

  <div class="tab-content" id="tab2">
    <p>キャットシッター、猫専用ホテル、食事・健康サポートなど</p>
  </div>

  <div class="tab-content" id="tab3">
    <p>小動物ケア、爬虫類飼育相談、ペットグッズ販売など</p>
  </div>
</div>

5 汎用CSS

/* -----------------
 * タブ切り替え用
 * --------------- */
.tab-menu { /** タブメニュー全体 **/ 
  display: flex; /** 横並び **/ 
  list-style: none; /** ドット削除 **/ 
  padding: 0; /** 余白リセット **/ 
  margin: 0 0 10px 0; /** 下マージン **/ 
}
.tab-menu li { /** 各タブ **/ 
  flex: 1; /** 均等幅 **/ 
  padding: 12px; /** 内側余白 **/ 
  text-align: center; /** 中央寄せ **/ 
  background: #e0f4f6; /** 通常時背景 **/ 
  cursor: pointer; /** カーソル変更 **/ 
  border-radius: 8px 8px 0 0; /** 上角丸 **/ 
  font-weight: bold; /** 太字 **/ 
  transition: background 0.3s; /** ホバー効果 **/ 
}
.tab-menu li.active { /** アクティブタブ **/ 
  background: #e91e63; /** アクティブ色 **/ 
  color: #fff; /** 文字色白 **/ 
}
.tab-content { /** コンテンツ領域 **/ 
  display: none; /** 非表示デフォルト **/ 
  background: #d9f3f5; /** 背景 **/ 
  padding: 20px; /** 内側余白 **/ 
  border-radius: 0 0 8px 8px; /** 下角丸 **/ 
}
.tab-content.active { /** 表示中 **/ 
  display: block; /** 表示 **/ 
}

6 完成イメージ

7 代用プラグイン

もしコード管理が難しい場合、以下のプラグインでも同等のことが可能です。

• Shortcodes Ultimate：ショートコードでタブを作成可能。
• WP Tabs：GUIでタブを作成、ページにショートコード挿入。
• Elementor：ウィジェットでビジュアルにタブ作成。

8 まとめ

今回の構成は、アニメーションなし・軽量・高速表示を意識した設計です。
WordPressでも確実に動作し、キャッシュ系プラグインとの相性も良好です。
必要に応じてCSSやJSを拡張してフェード切り替えなどにも発展可能です。