プラグインを使わずにWordPressで目次を自動生成する方法

<div class="toc"> <strong class="toc-title">目次</strong> <ul> <li><a href="#toc-1">見出し2</a> <ul> <li><a href="#toc-2">見出し3</a></li> </ul> </li> <li><a href="#toc-3">別の見出し2</a></li> </ul></div>

<?php
// 投稿コンテンツをフィルタリングして目次を自動生成する
add_filter('the_content', 'generate_toc_from_content');
function generate_toc_from_content($content) { // 投稿ページ以外では処理を実行しない if (!is_single()) { return $content; } $matches = []; // h2からh6までの見出しを検索する正規表現 $heading_pattern = '/<h([2-6])(.*?)>(.*?)<\/h\1>/i'; // preg_match_allで見出しをすべて抽出し、オフセットも取得 if (preg_match_all($heading_pattern, $content, $matches, PREG_SET_ORDER | PREG_OFFSET_CAPTURE)) { $headings = []; $original_headings = []; $replaced_headings = []; foreach ($matches as $i => $match) { $level = intval($match[1][0]); $text = strip_tags($match[3][0]); $anchor = 'toc-' . ($i + 1); // 元の見出しタグ全体を保存 $original_headings[] = $match[0][0]; // IDを追加した新しい見出しタグを作成 $replaced_headings[] = sprintf('<h%d id="%s"%s>%s</h%d>', $level, $anchor, $match[2][0], $match[3][0], $level); $headings[] = [ 'level' => $level, 'text' => $text, 'anchor' => $anchor ]; } // 目次が2つ以上ある場合のみ生成 if (count($headings) < 2) { return $content; } // 階層構造を持つ目次リスト(HTML)を生成 $toc = '<div class="toc"><strong class="toc-title">目次</strong>'; $toc .= build_hierarchical_toc_list($headings); $toc .= '</div>'; // 元の見出しをID付きの見出しに一括で置換 $content = str_replace($original_headings, $replaced_headings, $content); // 目次を記事コンテンツの先頭に追加 $content = $toc . $content; // 折りたたみ用のJavaScriptをフッターに出力 add_action('wp_footer', 'add_toc_toggle_script'); } return $content;
}
// 階層構造の <ul> リストを生成する補助関数
function build_hierarchical_toc_list($headings) { $html = ''; $last_level = 0; foreach ($headings as $heading) { $current_level = $heading['level']; if ($current_level > $last_level) { $html .= str_repeat('<ul>', $current_level - $last_level); } elseif ($current_level < $last_level) { $html .= str_repeat('</ul></li>', $last_level - $current_level); } $html .= '<li><a href="#' . esc_attr($heading['anchor']) . '">' . esc_html($heading['text']) . '</a>'; $last_level = $current_level; } $html .= str_repeat('</li></ul>', $last_level); return $html;
}
// 折りたたみ用スクリプトを一度だけ出力するための関数
function add_toc_toggle_script() { // 既に出力済みの場合は何もしない if (did_action('wp_footer_toc_script') > 0) { return; } ?> <script> document.addEventListener('DOMContentLoaded', () => { const tocTitle = document.querySelector('.toc-title'); const tocList = document.querySelector('.toc ul'); if (tocTitle && tocList) { tocList.style.display = 'none'; // デフォルトで閉じる tocTitle.style.cursor = 'pointer'; tocTitle.addEventListener('click', () => { const isHidden = tocList.style.display === 'none'; tocList.style.display = isHidden ? 'block' : 'none'; }); } }); </script> <?php // スクリプトが出力されたことを記録 do_action('wp_footer_toc_script');
}

/* 目次全体のコンテナ */
.toc { background: #f7f7f7; /* 背景色 */ border: 1px solid #e0e0e0; /* 枠線 */ border-radius: 5px; /* 角丸 */ padding: 15px 20px; margin: 0 0 1.5em 0; /* 下に余白 */
}
/* 目次タイトル */
.toc-title { font-weight: bold; font-size: 1.1em; cursor: pointer; /* クリックできることを示すカーソル */ display: block;
}
/* 目次リスト */
.toc ul { list-style-type: none; /* リストの黒点を非表示 */ margin: 10px 0 0 0; padding-left: 0;
}
/* 階層のインデント */
.toc ul ul { margin-top: 5px; padding-left: 20px; /* 子要素はインデント */
}
.toc li { margin: 6px 0; font-size: 0.95em;
}
.toc a { text-decoration: none; color: #337ab7;
}
.toc a:hover { text-decoration: underline;
}