【WordPress】投稿本文内の見出しを自動で目次に変換する方法（プラグインなし）

function generate_table_of_contents($content) {
  if (is_single()) {
    $pattern = '/<h2(.*?)>(.*?)<\/h2>/i';
    preg_match_all($pattern, $content, $matches, PREG_OFFSET_CAPTURE);

    if (!empty($matches[0])) {
      $headings = [];
      $replacements = []; // [オフセット, 元のタグの長さ, 新しいタグ]

      foreach ($matches[0] as $index => $match) {
        $slug = 'toc-' . $index;
        $attrs = $matches[1][$index][0];
        $heading_html = $matches[2][$index][0];
        $heading_text = strip_tags($heading_html);

        $headings[] = '<li><a href="#' . esc_attr($slug) . '">' . esc_html($heading_text) . '</a></li>';

        $original_tag = $match[0];
        $offset = $match[1];
        $new_tag = '<h2' . $attrs . ' id="' . esc_attr($slug) . '">' . $heading_html . '</h2>';
        $replacements[] = [$offset, strlen($original_tag), $new_tag];
      }

      // オフセットの大きい方（本文の後ろ側）から置換することで、
      // まだ処理していない前方の見出しのオフセットがズレない
      foreach (array_reverse($replacements) as $r) {
        list($offset, $length, $new_tag) = $r;
        $content = substr_replace($content, $new_tag, $offset, $length);
      }

      $toc = '<div class="toc-box">';
      $toc .= '<p class="toc-title">目次</p>';
      $toc .= '<ul class="toc-list">' . implode('', $headings) . '</ul>';
      $toc .= '</div>';

      $content = $toc . $content;
    }
  }

  return $content;
}
add_filter('the_content', 'generate_table_of_contents');

.toc-box {
  background: #f8f8f8;
  padding: 1em;
  border-left: 4px solid #0073aa;
  margin-bottom: 1.5em;
}
.toc-title {
  font-weight: bold;
  margin-bottom: 0.5em;
}
.toc-list {
  list-style: none;
  padding-left: 1em;
}
.toc-list li {
  margin: 0.3em 0;
}
.toc-list a {
  text-decoration: none;
  color: #0073aa;
}

$pattern = '/<h3(.*?)>(.*?)<\/h3>/i';

function generate_table_of_contents_with_hierarchy($content) {
  if (is_single()) {
    $pattern = '/<h([2-3])([^>]*)>(.*?)<\/h[2-3]>/i';
    preg_match_all($pattern, $content, $matches, PREG_OFFSET_CAPTURE);

    if (!empty($matches[0])) {
      $toc = '<div class="toc-box"><p class="toc-title">目次</p><ul class="toc-list">';
      $last_level = 2;
      $replacements = []; // [オフセット, 元のタグの長さ, 新しいタグ]

      foreach ($matches[0] as $index => $match) {
        $tag_level = intval($matches[1][$index][0]);
        $attrs = $matches[2][$index][0];
        $inner_html = $matches[3][$index][0];
        $heading_text = strip_tags($inner_html);
        $id = 'toc-' . $index;

        // 見出しへのid追加は後でまとめてオフセットの大きい方から適用する
        $original_tag = $match[0];
        $offset = $match[1];
        $new_tag = '<h' . $tag_level . $attrs . ' id="' . esc_attr($id) . '">' . $inner_html . '</h' . $tag_level . '>';
        $replacements[] = [$offset, strlen($original_tag), $new_tag];

        // 階層構造の制御（目次の組み立ては先頭から順番に行う必要がある）
        if ($tag_level > $last_level) {
          $toc .= '<ul>';
        } elseif ($tag_level < $last_level) {
          $toc .= '</ul>';
        }

        $toc .= '<li><a href="#' . esc_attr($id) . '">' . esc_html($heading_text) . '</a></li>';
        $last_level = $tag_level;
      }

      // 終了タグを補完
      $toc .= str_repeat('</ul>', max(0, $last_level - 2));
      $toc .= '</ul></div>';

      // 本文への書き込みは、オフセットの大きい方（本文の後ろ側）から行う。
      // 先頭から置換すると、id属性の追加で文字列が伸びるたびに後続の見出しの
      // 実際の位置がズレてHTMLが壊れてしまう
      foreach (array_reverse($replacements) as $r) {
        list($offset, $length, $new_tag) = $r;
        $content = substr_replace($content, $new_tag, $offset, $length);
      }

      // 目次を先頭に挿入
      $content = $toc . $content;
    }
  }

  return $content;
}
add_filter('the_content', 'generate_table_of_contents_with_hierarchy');