【Cocoonカスタマイズ】「FAQ」ブロックの見出しを目次に反映する方法

記事に記載したコードは、スキンに追加されています。

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

はじめに

以下をCocoonで実現します。

【SWELL】FAQブロックをH3見出しに変更するカスタマイズ｜かんた🌊SWELLマニア

WordPressテーマSWELLのカスタマイズ作業メモです。今回はFAQブロック。FAQブロックは、サイト定番の「よくある質問」などのコンテンツを作るさいに便利なSWELLのカスタムブロックです。 SWELLのFAQブロックの「Ｑ」は、...

SWELL ver. 2.7.6でサポート済み。

「FAQ」ブロックの「Q」を見出しH3に変更します。
これにより、「FAQ」ブロックの「Q」が目次に反映されるようになります。

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

完成イメージ

FAQの質問を目次に表示

本スキンでは、「FAQ」ブロックの質問テキストに対するH2〜H6見出しタグの設定および目次への自動反映を可能にし、FAQコンテンツを交えたページ構成の整理とユーザーナビゲーションの利便性向上を実現します。

実装手順

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

add_filter('render_block_cocoon-blocks/faq', function ($content, $block) {
  $content = preg_replace(
    '/<div\s+(class="faq-question-content faq-item-content")>(.*?)<\/div>/s',
    '<h3 $1>$2</h3>',
    $content
  );

  return $content;
}, 10, 2);

さいごに

今回紹介した方法を使えば、「FAQ」ブロックのタイトルを簡単に見出しH3に変更し、目次に反映させることができます。