必見！スキンカスタマイズの具体例
フロントページのデザインサンプル集
見出しデザインは選ぶだけ！

WordPress 6.9で追加された「アコーディオン」ブロックについて

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

WordPress 6.9で、新たに「アコーディオン」ブロックが追加されました。
クリックで開閉できるブロックとしては、これまでにWordPress標準の「詳細」ブロックや、Cocoon独自の「アコーディオン（トグル）」ブロックがありました。

この記事では、それぞれのブロックの特徴を比較しながら説明します。

それぞれのブロックの特徴

表1に、各ブロックの主な違いをまとめます。

各ブロックの違い
項目アコーディオン詳細アコーディオン（トグル）
初期表示で開くアイテムごとに「デフォルトで開く」で設定可能不可不可
クリックした1つだけ開く「自動で閉じる」で設定可能name属性により可能不可
見出しタグ見出し（h1～h6）のみ選択可能文字文字
HTMLの構造独自<details>タグ独自

「詳細」ブロックはWordPress 6.8からname属性が設定可能になり、同じ値を指定することで複数ブロックをグループ化し、クリックした1つだけを開く挙動が実現できます。

また、「アコーディオン」ブロックの見出しは<h1>～<h6>タグで出力されるため、目次に反映される点に注意が必要です。

「詳細」ブロックを「アコーディオン（トグル）」ブロック風にし1つだけ開き他を閉じる方法
「詳細」ブロックを「アコーディオン（トグル）」や「タイムライン」風に表示する方法を解説。name 属性を指定することで、1つの項目だけを開き、他は自動的に閉じる動作が可能になります。
chuya.s239.xrea.com

「アコーディオン」ブロックの見出しを目次に表示しない方法

アコーディオン項目やアコーディオン見出しは、Gutenbergエディター上のスタイル設定から背景色や枠線などを自由に調整できます。
そこで、アコーディオン見出しを<h1>～<h6>タグではなく<div>タグに変更します。

完成イメージ

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

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

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

実装手順

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

add_filter('render_block_core/accordion', function($block_content, $block) {
  $block_content = preg_replace(
    '#<h([1-6])([^>]*)class="([^"]*wp-block-accordion-heading[^"]*)"([^>]*)>#',
    '<div$2class="$3"$4>',
    $block_content
  );

  $block_content = preg_replace('#</h[1-6]>#', '</div>', $block_content);

  return $block_content;
}, 10, 2);

参考：「アコーディオン」ブロックを「FAQ」ブロックのデザインに変更する方法

「FAQ」ブロックの見出しを目次に反映する方法を紹介しました。

「FAQ」ブロックの見出しを目次に反映する方法
有料公開ネタを再現し、「FAQ」ブロックの見出しをH3に変更する方法を解説。SEO対策としても有効です。
chuya.s239.xrea.com

一方、「アコーディオン」ブロックの見出しは標準で目次に反映されます。
そこで、「アコーディオン」ブロックのデザインを「FAQ」ブロック（アコーディオン）風に変更します。

完成イメージ

親の借金返済のためデビルハンターをしていた少年で、裏切りに遭い死亡するも「チェンソーの悪魔」ポチタと契約し、悪魔の心臓を持つ「チェンソーマン」として蘇ったダークヒーローです。

公安対魔特異4課で働くデビルハンターです。 人間のように見えますが頭に2本の角があり、「血の悪魔」です。

ソ連から送り込まれたスパイで、「爆弾の悪魔」と融合した人間兵器（武器人間）です。

実装手順

以下のコードをstyle.cssに追加します。
本コードはスキン「メイド・イン・ヘブン」に合わせたものです。

/* アコーディオン */
.wp-block-accordion * {
  font-size: 16px!important;
  line-height: 1.8;
}

/* アコーディオン項目 */
.wp-block-accordion-item {
  border: 1px solid var(--border-color);
  margin-bottom: var(--gap30);
}

/* アコーディオン見出し */
.wp-block-accordion-heading {
  background-color: var(--border-color)!important;
  border: unset!important;
  margin: 0!important;
  padding: var(--padding15)!important;
}

.wp-block-accordion-heading:after,
.wp-block-accordion-heading:before {
  content: none;
}

.wp-block-accordion-heading__toggle {
  padding: 0!important;
}

.wp-block-accordion-heading__toggle:before {
  align-self: flex-start;
  color: #b7282e;
  content: 'Q';
  margin-right: 0.5em;
  text-align: center;
  width: 1.8em;
}

.wp-block-accordion-heading__toggle-title {
  color: #333;
  text-decoration: none!important;
}

.wp-block-accordion-heading__toggle-icon {
  color: #333;
}

/* アコーディオンパネル */
.wp-block-accordion-panel:not([aria-hidden=true],[inert]) {
  display: flex;
  padding: var(--padding15)!important;
}

.wp-block-accordion-panel:before {
  color: #007bbb;
  content: 'A';
  flex-shrink: 0;
  font-weight: bold;
  margin-right: 0.5em;
  text-align: center;
  width: 1.8em;
}

さいごに

今回紹介した方法を使えば、WordPress 6.9で追加された「アコーディオン」ブロックの見出しタグを <h1>〜<h6>から<div>タグへ変更でき、目次への反映を防ぎつつデザインの自由度を高めることができます。
テーマや構造化データへの影響を抑えながら、より柔軟なUI表現が可能になるため、FAQや補足説明などにも安心して活用できます。

タイトルとURLをコピーしました