目次から見出しに付けた特定の文字を削除する方法

はじめに

以下をCocoonで実現します。

SWELLの目次リンクから指定文字列を省く方法

SWELLの目次リンクから指定文字列を文字通りに取り除く例。正規表現を使わず、空になるラベルを保持し、見出し本文やリンク先を維持します。

motoki-design.co.jp

見出しに丸数字を付けると、目次に章番号と丸数字が重なり、見栄えが悪くなります（図1参照）。

そこで、不要な文字列を削除し、見やすいページに改善します。

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

完成イメージ

実装手順

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

add_filter('get_toc_tag', function ($html, $harray, $is_widget) {
  // 目次見出しに含まれる丸数字（①から⑩まで）を削除
  return preg_replace('/[①-⑩]/u', '', $html);
}, 10, 3);

参考：カスタムフィールドに定義した文字列を目次から削除する方法

カスタムフィールドmy_tocに登録された文字列を、目次の各見出しから削除します。

実装手順

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

add_filter('get_toc_tag', function ($html, $harray, $is_widget) {
  $toc = get_post_meta(get_the_ID(), 'my_toc', true);
  
  if (!empty($toc)) {
    // 該当文字列を削除
    $pattern = '/' . preg_quote($toc, '/') . '/u';
    $html = preg_replace($pattern, '', $html);
  }

  return $html;
}, 10, 3);

さいごに

今回紹介した方法を使えば、フックを利用することで、目次を出力する際のHTMLを簡単にカスタマイズできます。
これにより、目次内の不要な番号や記号を削除し、よりスッキリとした見栄えの良いページを作成できます。