【Cocoonカスタマイズ】「タブ」ブロックの初期表示をタブ1以外に設定する方法方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

「タブ」ブロックの初期表示は、タブ1が固定となっており、初期表示するタブを設定する項目はありません。

そこで、タブブロックの初期表示をタブ1以外に設定できるようにします。

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

完成イメージ

ホワイトスネイク
C-MOON
メイド・イン・ヘブン

生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。

ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。

C-MOONが進化したスタンド。全世界の時を、加速させる能力を持つ。

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で設定します。
1. 「タブ」ブロックを配置します。
2. 高度な設定→追加CSSクラスに、my-active-2と入力します。
  my-active-の後に、対象となるタブ番号を入力してください。

ラベル

JavaScriptを追加

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  $('.cocoon-block-tab').each(function () {
    const className = $(this).attr('class') || '';
    const match = className.match(/my-active-(\d+)/);

    // アクティブ設定している場合
    if (match) {
      const activeIndex = parseInt(match[1], 10) - 1;
      const $targetTab = $(this).find('.tab-label').eq(activeIndex);

      // 該当タブにクリックイベント発生し開く
      if ($targetTab.length) {
        $targetTab.trigger('click');
      }
    }
  });
});

さいごに

今回紹介した方法を使えば、タブブロックの初期表示をタブ1以外に設定することができます。
これにより、ユーザーの閲覧体験をより柔軟にカスタマイズできます。