サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2026年1月20日 18:44
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.9.2
カテゴリー数：18
タグ数：123
ユーザー数：1
----------------------------------------------
●設定
[Cocoon設定]→[目次]
- 目次の表示「目次を表示する」オン
- 表示条件「1つ以上の見出しがあるとき」
- 見出し内タグ「H見出し内のタグを有効にする」オフ★
●現象
WordPress 6.9 で追加された標準の「アコーディオン」ブロックを配置すると、★の設定をオンにした場合、アコーディオンが開閉できなくなる。
<!-- wp:accordion {"autoclose":true,"headingLevel":2} -->
<div role="group" class="wp-block-accordion"><!-- wp:accordion-item {"openByDefault":true} -->
<div class="wp-block-accordion-item is-open"><!-- wp:accordion-heading {"level":2} -->
<h2 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">アコーディオン項目1見出し</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h2>
<!-- /wp:accordion-heading -->
<!-- wp:accordion-panel {"openByDefault":true} -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
<p>アコーディオンパネル1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item --></div>
<!-- /wp:accordion -->
●原因
本来、上記ブロックは以下のようなHTMLとして出力され、button 要素や data-wp-* 属性によって開閉処理が制御されている。
<div data-wp-context='{ "autoclose": true, "accordionItems": [] }' data-wp-interactive="core/accordion" role="group" class="wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow">
<div data-wp-class--is-open="state.isOpen" data-wp-context='{ "id": "accordion-item-1", "openByDefault": true }' data-wp-init="callbacks.initAccordionItems" data-wp-on-window--hashchange="callbacks.hashChange" class="wp-block-accordion-item is-open is-layout-flow wp-block-accordion-item-is-layout-flow">
<h2 class="wp-block-accordion-heading">
<button aria-expanded="true" aria-controls="accordion-item-1-panel" data-wp-bind--aria-expanded="state.isOpen" data-wp-on--click="actions.toggle" data-wp-on--keydown="actions.handleKeyDown" id="accordion-item-1" class="wp-block-accordion-heading__toggle">
<span class="wp-block-accordion-heading__toggle-title">アコーディオン項目1見出し</span>
<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>
</button>
</h2>
<div aria-labelledby="accordion-item-1" data-wp-bind--inert="!state.isOpen" id="accordion-item-1-panel" role="region" class="wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow">
<p>アコーディオンパネル1</p>
</div>
</div>
</div>
しかし、「H見出し内のタグを有効にする」をオフにすると、見出し内のbutton タグなどが除去されてしまい、その結果アコーディオンの開閉機能が動作しなくなる。
※「アコーディオン」ブロックの見出しはH1～H6の選択となる。
また、本文冒頭に「アコーディオン」ブロック（H2見出し）がある場合、その内部に目次が生成されてしまう問題も発生する。
（最初のH2見出しの前に目次を生成するため）
わいひら reacted
2026年1月20日 22:04
ご連絡いただきありがとうございます。
アコーディオンが開閉されるように修正しました。
https://github.com/xserver-inc/cocoon/commit/b1afafb035c9fc11e7db90150fff78e49cc820d9
また、本文冒頭に「アコーディオン」ブロック（H2見出し）がある場合、その内部に目次が生成されてしまう問題も発生する。
（最初のH2見出しの前に目次を生成するため）
よろしければ上記の状態のデベロッパーツールに表示されているソースコードのスクショをアップして、いただいてよろしいでしょうか。
トピックスターター 2026年1月20日 22:04
●追記
[Cocoon設定]→[広告]→広告の表示位置「本文中」とした場合も同様です。
H2タグの前に、広告コードを追加するため、結果、wp-block-accordion内に展開されてしまいます。
わいひら reacted
トピックスターター 2026年1月20日 22:10
@yhira さん
添付した、★の部分です。
本文中の1番目のH2タグの前に、目次、広告本文中を展開します。
「アコーディオン」ブロックに属する見出しH2タグのため、結果、目次、広告が、「アコーディオン」ブロックの要素の一部となってしまう。
本文中の1番目の見出しタグ前に展開する項目は、この2項目だと思います。
他に類似がある場合、確認願います。
<div data-wp-context='{ "autoclose": false, "accordionItems": [] }' data-wp-interactive="core/accordion" role="group" class="wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow">
<div data-wp-class--is-open="state.isOpen" data-wp-context='{ "id": "accordion-item-1", "openByDefault": false }' data-wp-init="callbacks.initAccordionItems" data-wp-on-window--hashchange="callbacks.hashChange" class="wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow">
★★<div id="toc" class="toc tnt-number toc-center tnt-number border-element">
<input type="checkbox" class="toc-checkbox" id="toc-checkbox-1" checked>
<label class="toc-title" for="toc-checkbox-1">目次</label>
<div class="toc-content">
<ol class="toc-list open">
<li>
<a href="#toc1" tabindex="0">
<button aria-expanded="false" aria-controls="accordion-item-2-panel" data-wp-bind--aria-expanded="state.isOpen" data-wp-on--click="actions.toggle" data-wp-on--keydown="actions.handleKeyDown" id="accordion-item-2" class="wp-block-accordion-heading__toggle">
<span class="wp-block-accordion-heading__toggle-title">アコーディオン見出し</span>
<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>
</button>
</a>
</li>
</ol>
</div>
</div>
<h2 class="wp-block-accordion-heading">
<span id="toc1">
<button aria-expanded="false" aria-controls="accordion-item-1-panel" data-wp-bind--aria-expanded="state.isOpen" data-wp-on--click="actions.toggle" data-wp-on--keydown="actions.handleKeyDown" id="accordion-item-1" class="wp-block-accordion-heading__toggle">
<span class="wp-block-accordion-heading__toggle-title">アコーディオン見出し</span>
<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>
</button>
</span>
</h2>
<div inert="" aria-labelledby="accordion-item-1" data-wp-bind--inert="!state.isOpen" id="accordion-item-1-panel" role="region" class="wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow">
<p>ｘｘｘｘ</p>
</div>
</div>
</div>
わいひら reacted
2026年1月20日 22:11
ああ、すいません。ありがとうございます！
トピックスターター 2026年1月20日 22:30
●別件
GitHubのラベル2.8.9.3では？
2026年1月20日 22:41
GitHubのラベル2.8.9.3では？
本来はこちらがその役割でしたが、2.8.9.3を貼り付けたつもりで、プロンプトのコマンドを貼り付けてしまったものをコミットしていて気づかなく戻せなくなった（GitHubにプッシュしてしまった）ので、ひとつ飛ばして2.8.9.4としました。
https://github.com/xserver-inc/cocoon/commit/3fa6f71a8149bc2610c8e8d98591521ca7a254fa
2026年1月20日 22:45
アコーディオンブロックラッパー内のh2見出しはスキップするように正規表現を修正しました。
https://github.com/xserver-inc/cocoon/commit/541bc9a19407505e0fb48e0fb168399b29cdc352
トピックスターター 2026年1月20日 23:15
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.9.4
カテゴリー数：18
タグ数：123
ユーザー数：1
----------------------------------------------
「H見出し内のタグを有効にする」オンとした場合、「アコーディオン」ブロックが開閉することを確認しました。
「アコーディオン」ブロック内の見出しH2ではなく、見出しブロックH2の前に、目次、広告本文中が展開されることを確認しました。
本件をクローズとします。
わいひら reacted
トピックスターター 2026年1月21日 16:48
上記は破棄です。
正しく動作しません。
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.9.4
カテゴリー数：18
タグ数：123
ユーザー数：1
----------------------------------------------
●現象
「H見出し内のタグを有効にする」をオフにした状態で、アコーディオン項目を「デフォルトで開く」に設定すると、アコーディオン見出し内のHTMLタグが削除されてしまいます。
その結果、開閉操作ができなくなります。
<!-- wp:accordion {"autoclose":true,"className":"faq"} -->
<div role="group" class="wp-block-accordion faq"><!-- wp:accordion-item {"openByDefault":true} -->
<div class="wp-block-accordion-item is-open"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">あ</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->
<!-- wp:accordion-panel {"openByDefault":true} -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
<p>あ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item -->
<!-- wp:accordion-item -->
<div class="wp-block-accordion-item"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">い</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->
<!-- wp:accordion-panel -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
<p>い</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item --></div>
<!-- /wp:accordion -->
●原因
フロントページでは以下のように展開されます。
<div data-wp-context='{ "autoclose": true, "accordionItems": [] }' data-wp-interactive="core/accordion" role="group" class="wp-block-accordion faq is-layout-flow wp-block-accordion-is-layout-flow">
<div data-wp-class--is-open="state.isOpen" data-wp-context='{ "id": "accordion-item-1", "openByDefault": true }' data-wp-init="callbacks.initAccordionItems" data-wp-on-window--hashchange="callbacks.hashChange" class="wp-block-accordion-item is-open is-layout-flow wp-block-accordion-item-is-layout-flow">
<h3 class="wp-block-accordion-heading">
<span id="toc1">
★ <button aria-expanded="true" aria-controls="accordion-item-1-panel" data-wp-bind--aria-expanded="state.isOpen" data-wp-on--click="actions.toggle" data-wp-on--keydown="actions.handleKeyDown" id="accordion-item-1" class="wp-block-accordion-heading__toggle">
<span class="wp-block-accordion-heading__toggle-title">あ</span>
<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>
</button>
</span>
</h3>
<div aria-labelledby="accordion-item-1" data-wp-bind--inert="!state.isOpen" id="accordion-item-1-panel" role="region" class="wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow">
<p>あ</p>
</div>
</div>
<div data-wp-class--is-open="state.isOpen" data-wp-context='{ "id": "accordion-item-2", "openByDefault": false }' data-wp-init="callbacks.initAccordionItems" data-wp-on-window--hashchange="callbacks.hashChange" class="wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow">
<h3 class="wp-block-accordion-heading">
<span id="toc2">
<button aria-expanded="false" aria-controls="accordion-item-2-panel" data-wp-bind--aria-expanded="state.isOpen" data-wp-on--click="actions.toggle" data-wp-on--keydown="actions.handleKeyDown" id="accordion-item-2" class="wp-block-accordion-heading__toggle">
<span class="wp-block-accordion-heading__toggle-title">い</span>
<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>
</button>
</span>
</h3>
<div inert="" aria-labelledby="accordion-item-2" data-wp-bind--inert="!state.isOpen" id="accordion-item-2-panel" role="region" class="wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow">
<p>い</p>
</div>
</div>
</div>
「アコーディオン」ブロックのボタン判定で aria-expanded="false" のみを想定しているため、true の場合に正しく処理されません。
https://github.com/xserver-inc/cocoon/blob/541bc9a19407505e0fb48e0fb168399b29cdc352/lib/toc.php#L26
●対策
以下のように、aria-expanded の値を問わず判定するよう修正します。
if (strpos($h_content, '<button aria-expanded="') === 0) {
もしくは、値を明示的に考慮する場合は次のようにします。
if (preg_match('/^<button aria-expanded="(true|false)" aria-controls=/', $h_content)) {
この投稿は4日前ずつ大門未知子に変更されました
わいひら reacted
2026年1月21日 18:35
ご確認いただきありがとうございます。
アコーディオンブロックではなく、アコーディオン項目ブロックにそんなオプションがあったんですね。気づいておりませんでした。お手数をおかけして恐れ入ります。
アコーディオン開閉のデフォルト状態に対応したコードに修正しておきました。
https://github.com/xserver-inc/cocoon/commit/0644d10e57c4372291a4062b514b52d77d9a86ff
トピックスターター 2026年1月21日 22:34
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.9.4
カテゴリー数：18
タグ数：123
ユーザー数：1
----------------------------------------------
対策されていることを確認しました。
本件をクローズとします。
●ご参考
WordPress 6.8で「詳細」ブロックにname属性が追加され、クリックした項目（details）以外は閉じることが可能となり。
WordPress 6.9の「アコーディオン」ブロックは設定で、初期表示や、クリックした項目以外を閉じることが可能です。
ただ、見出しがh1～h6から選択ですが。
過去の要望は、WordPress標準ブロックで可能となり。
https://wp-cocoon.com/community/postid/59811/
フックを使えば、描画時に見出し以外に変更できます。
http://chuya.s239.xrea.com/temp/wordpress-accordion-block/
わいひら reacted
2026年1月22日 20:01
ご確認いただきありがとうございます。
アコーディオンブロックは見出しにしないでくれた方がよかったのに…
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。