Personal WP Customization Notes (PWCN)

WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなど

標準のブロックと少量のコードでタブ切り替えコンテンツを作る方法

公開日：2024(令和6)年11月5日／最終更新日：

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



ページ内のタブ切り替えは、内容が長くなってしまうのを防ぐのにいい方法ですし、何よりHTML上には出力されているので検索エンジンからきちんと内容を認識してもらえるのでとても好都合です。

しかしながらWordPress標準のブロックにタブ切り替え用のものは存在しませんから、通常はカスタムHTMLブロックを使ってHTML構造を追加しつつ、タブがクリックされた時に内容が切り替わるようCSSクラスを変化させるjQueryコード、そしてクリックされたタブの中身が表示するようにし、全体の体裁を整えるためのスタイルコードを追加する必要があって結構大変ですね。

そこで今回は、ブロックエディターに標準搭載されているグループ化機能を使ってタブ形式で表示させるコンテンツを作る方法を紹介します。

前者のカスタムHTMLでは各タブの内容もすべてHTMLで書く必要があるのに比べ、今回紹介する方法で実装するとタブ内コンテンツはそのまま必要なブロックを挿入するだけになり、設置後の編集の手間が省けるのが最大のメリットです。

タブ切り替えコンテンツの仕組み

タブコンテンツが動作する仕組み

横に並んだ複数のタブのうち、任意のものをクリックするとその内容のみが画面上には表示される．．というのがタブコンテンツです。

例えば3つのタブが存在する切り替えコンテンツでは、タブとその中身になるものを3組用意しておいて、1のタブをクリックしたら1の内容が表示されてその他は非表示になり、2のタブを．．という動作をさせる必要があります。

これを実装するには以下のような仕組みが必要です。

  • タブ表示させるためのHTMLを作る
  • スタイルコードでクリックされたタブの内容を表示し、その他のタブの内容は非表示にする
  • jQueryでタブクリック時に特定のCSSクラスを付加したり削除したりする

まずは次項のコード例で、実際にタブ切り替えが行われる仕組みと必要なコードを理解しましょう。

タブコンテンツのコード例

試しに2つのタブを持つ切り替えコンテンツを作成してみます。以下が必要なコードすべてです。

ブロックエディターで「カスタムHTMLブロック」を追加してコピー後、プレビュー画面などで動作確認をしてください。

<div class="ha-tabs">
  <ul class="ha-tab-links">
    <li class="active"><a href="#tab1">タブ1</a></li>
    <li><a href="#tab2">タブ2</a></li>
  </ul>

  <div class="ha-tab-content">
    <div id="tab1" class="ha-tab active">
      <h2>タブ1の内容</h2>
      <p>ここに内容を記述します。</p>
    </div>
    <div id="tab2" class="ha-tab">
      <h2>タブ2の内容</h2>
      <p>ここに内容を記述します。</p>
    </div>
  </div>
</div>

<style>
/* タブ表示のスタイル */
.ha-tabs {
	width: 100%;
}

.ha-tab-links {
	list-style: none;
	padding: 0;
	display: flex;
	margin-bottom:4px;
}

.ha-tab-links li {
	margin-right: 4px;
}

.ha-tab-links li a {
	text-decoration: none;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.ha-tab-links li.active a {
	background: #000;
	color:#fff;
}

.ha-tab-content {
	border: 1px solid #ccc;
	padding: 20px;
	margin-top:0;
}

.ha-tab {
	display: none;
}

.ha-tab.active {
	display: block;
}

</style>

<script>
jQuery(document).ready(function($) {
	$('.ha-tabs').each(function() {
		var $container = $(this);
		var $tabLinks = $container.find('.ha-tab-links a');
		var $tabs = $container.find('.ha-tab');

		$tabLinks.on('click', function(e) {
			e.preventDefault();//誤動作を防止する

			// すべてのタブとリンクのアクティブクラスを削除
			$tabLinks.parent().removeClass('active');
			$tabs.removeClass('active');

			// クリックされたリンクのアクティブクラスを追加
			$(this).parent().addClass('active');

			// 対応するタブを表示
			var targetTab = $container.find($(this).attr('href'));
			targetTab.addClass('active');
		});
	});
});
</script>

もしも動かない場合はjQueryがきちんと読み込まれていない可能性がありますので、以下のコードを<script>の上に追加して保存してからプレビュー画面等を開き、「Ctrl」+「F5」を押してキャッシュのクリアをしてみてください。

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>

以下に動作デモ表示させていますので同じように動くか確認してください。

タブ1の内容

ここに内容を記述します。

タブ2の内容

ここに内容を記述します。

たったこれだけのコードで、以下の機能を実装できます。

  • タブ表示させるためのHTMLを作る
  • スタイルコードでクリックされたタブの内容を表示し、その他のタブの内容は非表示にする
  • jQueryでタブクリック時に特定のCSSクラスを付加したり削除したりする

簡単なコードの解説

コードは先頭に表示させるHTML、次にstyleタブで囲まれたスタイルコード、最後にscriptタグで囲まれたスクリプトで構成されています。

スタイルコードを見ていただくと、タブをクリックした時の本文（ha-tab）にactiveというクラスが追加されていればdisplay:block;を指示して表示させ、追加されていなければdisplay:none;で非表示にしています。

jQueryでは、HTMLの最初に書いているリストタグのリンクがクリックされる度に、一旦「active」を外し、リンク先（タブ１は#tab1、タブ２は#tab2というID）のクラスに「active」を付けるようにしていて、これに呼応してスタイルが適用され、表示／非表示が切り替わるという仕組みです。

そしてページを表示させた時に最初にタブ１が開くよう、HTMLコード上ではタブ１に予め「active」クラスを付加し、ページが開いたときにはこのタブ（タブ１）が開くようにしています。

同時にリンクされたタブがどれなのかが分かりやすくなるよう、クリックされたリストタグにも「active」クラスを付け外しするようにして、それに呼応するスタイルコードで背景に色を付けたり外したりしています。

これ以上詳しく解説しても文章が長くなるだけですし、比較的短いコードなのでこの位にしておきますから、あとは文章とコードを見比べて解読してください。

そしてついでに．．．

ページ内に複数のタブコンテンツを配置したい場合には、以下のようにします。

  • 各タブにあるID（「tab1」「tab2」）を別の文字列に変更する
  • リストにあるリンクURLを変更した文字列に変更する

本ページのコードではコードを丸ごと複数設置しても動作するようにしていますが、HTMLの構造上同一ページに同一のIDが存在するのはNGで、SEOに悪影響を及ぼすため、必ず別のIDにするようにしましょう

QA Analytics QA Analytics

標準ブロックの組み合わせとテーマファイルの編集でタブコンテンツを作る

WordPressの魅力は何といってもブロックでいろいろな表現ができることですね。

そこでここからは、前項のコードを基礎として、カスタムHTMLブロックを使わず、かつ、タブ内の内容をブロックで編集できるようにします。

スタイルコードはテーマのstyle.cssへ追記する

前項のコードのうち、以下のスタイルコードの部分は、有効化しているテーマのstyle.cssへ追記します。

/* タブ表示のスタイル */
.ha-tabs {
	width: 100%;
}

.ha-tab-links {
	list-style: none;
	padding: 0;
	display: flex;
	margin-bottom:4px;
}

.ha-tab-links li {
	margin-right: 4px;
}

.ha-tab-links li a {
	text-decoration: none;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.ha-tab-links li.active a {
	background: #000;
	color:#fff;
}

.ha-tab-content {
	border: 1px solid #ccc;
	padding: 20px;
	margin-top:0;
}

.ha-tab {
	display: none;
}

.ha-tab.active {
	display: block;
}

jQueryはテーマのJS読み込み用ファイルへ記述する

以下のjQueryのコードは、テーマのJS読み込み用ファイルへ追記します。

jQuery(document).ready(function($) {
	$('.ha-tabs').each(function() {
		var $container = $(this);
		var $tabLinks = $container.find('.ha-tab-links a');
		var $tabs = $container.find('.ha-tab');

		$tabLinks.on('click', function(e) {
			e.preventDefault();//誤動作を防止する

			// すべてのタブとリンクのアクティブクラスを削除
			$tabLinks.parent().removeClass('active');
			$tabs.removeClass('active');

			// クリックされたリンクのアクティブクラスを追加
			$(this).parent().addClass('active');

			// 対応するタブを表示
			var targetTab = $container.find($(this).attr('href'));
			targetTab.addClass('active');
		});
	});
});

上記コードはWordPressの読み込むjQueryライブラリ上で動作するようにしています。JS用のファイルがテーマに存在しない場合や、読み込み順の問題でエラーが出る場合などには、以下のページを参考に対処してみてください。

子テーマから任意のjQueryやJavaScriptコードを読み込ませる方法＆任意のファイルを読み込ませる方法
jQueryが動かないときのチェックポイントと対処

HTMLの部分はブロックで構成するようにする

以下をコピーして、段落ブロックへ「プレーンテキストとして貼り付け」をするか、「Ctrl」+「Shift」+「V」（値として貼り付けるためのキーボードショートカット）で貼り付けると自動的にブロックへ変換されます。

通常の貼り付けを行うとコードとして表示されてしまうので、必ずプレーンテキストで貼り付けます

<!-- wp:group {"metadata":{"name":"タブコンテンツ"},"className":"ha-tabs","layout":{"type":"constrained"}} -->
<div class="wp-block-group ha-tabs">
<!-- wp:list {"className":"ha-tab-links"} -->
<ul class="wp-block-list ha-tab-links"><!-- wp:list-item {"className":"active"} -->
<li class="active"><a href="#tab1">タブ１</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#tab2">タブ２</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:group {"metadata":{"name":"タブコンテンツグループ"},"className":"ha-tab-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group ha-tab-content"><!-- wp:group {"metadata":{"name":"タブコンテンツ1"},"className":"ha-tab active","layout":{"type":"constrained"}} -->
<div id="tab1" class="wp-block-group ha-tab active"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">【タブ1の内容】</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここに内容を記述します。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"タブコンテンツ2"},"className":"ha-tab","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
<div id="tab2" class="wp-block-group ha-tab" style="margin-top:0px;margin-bottom:0px"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">【タブ2の内容】</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここに内容を記述します。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

タブに表示する文字列は適当なものへ変更（リンク先は「#tab1-a」「#tab2-a」にする）し、「タブ1の中身」「タブ2の中身」になっている場所へ実際にタブ内で表示させたいコンテンツをブロックを使って追加すればOKです。

タブの数を増やしたい時は

上記の参考コードはタブを2つ表示させて切り替えるものですが、以下の処置をすれば3個以上のタブコンテンツを作成することができます。

編集するのはHTMLの部分だけです。

例えば1つタブを追加したい場合は以下のようにします。

  • コードの上の方にあるリストタグのリストを追加し、「#tab3-a」へリンクさせるようにする
  • タブの中身があるグループ化された部分をコピーし、idを「tab3-a」にする

ちなみに以下がタブを3つにした場合のコードです。

通常の貼り付けを行うとコードとして表示されてしまうので、必ずプレーンテキストで貼り付けます

<!-- wp:group {"metadata":{"name":"タブコンテンツ"},"className":"ha-tabs","layout":{"type":"constrained"}} -->
<div class="wp-block-group ha-tabs">

	<!-- wp:list {"className":"ha-tab-links"} -->
	<ul class="wp-block-list ha-tab-links">
		<!-- wp:list-item {"className":"active"} -->
		<li class="active"><a href="#tab1">タブ１</a></li>
		<!-- /wp:list-item -->

		<!-- wp:list-item -->
		<li><a href="#tab2">タブ２</a></li>
		<!-- /wp:list-item -->
	</ul>
	<!-- /wp:list -->

	<!-- wp:group {"metadata":{"name":"タブコンテンツグループ"},"className":"ha-tab-content","layout":{"type":"constrained"}} -->
	<div class="wp-block-group ha-tab-content">

		<!-- wp:group {"metadata":{"name":"タブコンテンツ1"},"className":"ha-tab active","layout":{"type":"constrained"}} -->
		<div id="tab1" class="wp-block-group ha-tab active">
			<!-- wp:heading {"level":3} -->
			<h3 class="wp-block-heading">【タブ1の内容】</h3>
			<!-- /wp:heading -->

			<!-- wp:paragraph -->
			<p>ここに内容を記述します。</p>
			<!-- /wp:paragraph -->
		</div>
		<!-- /wp:group -->

		<!-- wp:group {"metadata":{"name":"タブコンテンツ2"},"className":"ha-tab","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
		<div id="tab2" class="wp-block-group ha-tab" style="margin-top:0px;margin-bottom:0px">
			<!-- wp:heading {"level":3} -->
			<h3 class="wp-block-heading">【タブ2の内容】</h3>
			<!-- /wp:heading -->

			<!-- wp:paragraph -->
			<p>ここに内容を記述します。</p>
			<!-- /wp:paragraph -->
		</div>
		<!-- /wp:group -->
		</div>
	<!-- /wp:group -->
	</div>
<!-- /wp:group -->

上記はタブが2つの場合のコードですが、以下の手順でタブを増やしたり、複数のタブコンテンツを設置したりすることも可能です。

タブの数を増やす

以下の手順でタブの数を増やすことができます。

  1. 投稿編集画面上の「三」をクリックしてブロック一覧を表示させる
  2. 「タブコンテンツ2」というグループを複製して「タブコンテンツ3」などに名前を変更する
  3. 「タブコンテンツ3」のHTMLアンカーを「tab2」から「tab3」へ変更する
  4. 「タブコンテンツ」という名前のグループ下にある「リスト」を選択する
  5. 新しくリスト行を追加し、タブのタイトルとなる文字列を入力し、「#tab3」へリンクを張る

ページ内に複数のタブコンテンツを設置する

HTMLの基準としてはページ内に同一ID(HTML上でid=”〇〇”と出力される部分＝これはブロックエディターでは「HTMLアンカー」に文字列を入力すると出力される)があると、内容がきちんと認識されずSEOに大きくマイナスとなることがあるため、以下のようにして別のタブコンテンツを挿入します。

  1. 上記のタブコンテンツ用のHTMLをもう一度コピーして貼り付け、ブロックとして展開する
  2. ブロックの一覧から「タブコンテンツ1」「タブコンテンツ2」のHTMLアンカーをページ内で一意のものに書き換える
  3. 「タブコンテンツ」グループ下にあるリストそれぞれのリンク先を2で変更したものにする

パターンとして登録しておくと便利

毎回ブロックをコピーしたり、タブ数を変更したりするのは、今回のは特にグループ化を何重にも行っていて大変なので、パターンに登録しておけばいつでも呼び出せますね。

パターンの使い方は以下をご覧ください。

WordPress6.3で変わった「パターン（旧再利用ブロック）」の使い方、使い勝手を良くする方法（メモ）

以上、タブ切り替え式コンテンツの作り方、ブロックで編集できるようにする方法でした。

基本となるコードは単純なので、特に後から編集しないならカスタムHTMLで直接書いてもいいですし、後々のメンテナンスをブロックで楽にしたいという方はブロック化の手法を用いればいいでしょう。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
カテゴリー、タグ、カスタムタクソノミーの説明文でHTMLを使用できるようにする
ひまあーと（管理人）

ひまあーと（管理人）

WordPressと出会ったのはTwenty Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。 本サイトでは主にTwenty Twenty-TwoをはじめとするWordPress標準のブロックテーマのカスタマイズ方法、多彩な機能を詰め込んだ【Hima Art Utility】プラグインの紹介などをしています。 WordPressへの感謝、プラグイン作者への感謝を込めて、ささやかながら日本語翻訳に参加させていただいています（参加プロダクトはこちら）

Personal WP Customization Notes (PWCN)
WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなど