SWELLのブログパーツに目次をつけるショートコード

// [custom_toc] - 見出しから目次を生成するショートコード
function custom_toc_shortcode($atts) {
    $content = apply_filters('the_content', get_the_content());
    $matches = [];

    preg_match_all('/<h([23])[^>]*>(.*?)<\/h[23]>/', $content, $matches, PREG_OFFSET_CAPTURE);
    if (empty($matches[0])) return '';

    $toc = '<div class="swell-toc-box"><strong>目次</strong><ul>';
    $offset = 0;

    foreach ($matches[0] as $index => $match) {
        $level = $matches[1][$index][0];
        $title = strip_tags($matches[2][$index][0]);
        $id = 'heading-' . $index;

        $anchor = '<a id="' . $id . '"></a>';
        $pos = $match[1] + $offset;
        $content = substr_replace($content, $anchor . $match[0], $pos, strlen($match[0]));
        $offset += strlen($anchor);

        $toc .= '<li class="swell-toc-level-' . $level . '"><a href="#' . $id . '">' . $title . '</a></li>';
    }

    $toc .= '</ul></div>';
    return $toc . $content;
}
add_shortcode('custom_toc', 'custom_toc_shortcode');

/* ページパーツ目次用（[custom_toc]） */

.swell-toc-box {
  border: 1px solid #ddd;
  background: #f7f7f7;
  padding: 1.2em;
  margin-bottom: 2em;
  font-size: 0.95em;
}

.swell-toc-box ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.swell-toc-box li {
  margin: 0.4em 0;
}

.swell-toc-level-2 {
  margin-left: 0;
  font-weight: bold;
}

.swell-toc-level-3 {
  margin-left: 1.5em;
  font-weight: normal;
  font-size: 0.95em;
}

[custom_toc]