「タイムライン」ブロックのタイトルを目次に反映する方法

はじめに

以下をCocoonで実現します。

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

WordPressテーマSWELLのカスタマイズ作業メモです。 SWELL独自のカスタムブロック「ステップブロック」をカスタマイズして、本来div.swell-block-step__titleで出力される部分を、h3の見出しタグに変更しま...

note.com

「タイムライン」ブロックのタイトルを見出しH3に変更します。
これにより、「タイムライン」ブロックのタイトルが目次に反映されるようになります。

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

完成イメージ

タイムラインのタイトルを目次に表示

本スキンでは、「タイムライン」ブロックのタイトルに対するH2〜H6見出しタグの設定および目次への自動反映を可能にし、時系列に沿ったプロセスの整理とサイト全体のナビゲーション性の向上を実現します。

chuya.s239.xrea.com

実装手順

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

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

  return $content;
}, 10, 2);

さいごに

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