【Cocoonカスタマイズ】「アコーディオン（トグル）」ブロックを初期状態で開くようにする方法

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

はじめに

Cocoonの「アコーディオン（トグル）」ブロックの初期表示は閉じた状態となります。
WordPress標準の「アコーディオン」ブロックのように、開いた状態に設定することができません。

「WordPress 6.9のアコーディオンブロックをカスタマイズする方法」を解説。アコーディオン・詳細・Cocoonのアコーディオン（トグル）の違いや、見出しを目次に表示させない方法、FAQやタイムライン風のデザインに変更する方法を分かりやすく紹介します。

そこで、初期表示を開いた状態に設定できるようにします。

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

完成イメージ

早川アキ

敵の言葉を聞くな！！お前はチョロすぎだ！！

実装手順

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

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

「アコーディオン（トグル）」ブロックを選択し、高度な設定→追加CSSにis-open-defaultと入力します。

ラベル

PHPを追加

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

add_filter('render_block_cocoon-blocks/toggle-box-1', function ($block_content, $block) {
  if (isset($block['attrs']['className']) && str_contains($block['attrs']['className'], 'is-open-default')) {
    $block_content = str_replace('<input', '<input checked', $block_content);
  }

  return $block_content;
}, 10, 2);

さいごに

今回紹介した方法を使えば、Cocoonの「アコーディオン（トグル）」ブロックの初期状態を開いた形に簡単に設定できるようになります。