下記のコードを テーマの「single.php（投稿ページ）」 や 「page.php（固定ページ）」に追加してください。
下記コードの場合は、h2からh6のすべてを出力していますので、例えば、h3までにする場合は、
[2-6]の部分を[2-3]してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php // 投稿またはページの内容を取得 $content = get_the_content(); // 投稿またはページに見出し（h2〜h6）があるかどうかチェック $has_headings = preg_match_all('/<h([2-6]).*?>(.*?)<\/h[2-6]>/i', $content, $headings); if ($has_headings) { echo '<div class="toc">'; echo '<h2>目次</h2>'; echo '<ul>'; // 各見出しをループして目次を生成 foreach ($headings[1] as $key => $heading_level) { $heading_text = strip_tags($headings[2][$key]); $heading_id = sanitize_title($heading_text); echo '<li><a href="#' . $heading_id . '">' . $heading_text . '</a></li>'; // 各見出しにアンカーを追加 $content = str_replace($headings[0][$key], '<h' . $heading_level . ' id="' . $heading_id . '">' . $headings[2][$key] . '</h' . $heading_level . '>', $content); } echo '</ul>'; echo '</div>'; } // 目次を出力 echo $content; ?> |
目次部分は、「toc」というclassが付いた下記のようなコードが出力されますので、あとはCSSでスタイリングしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="toc"> <h2>目次</h2> <ul> <li><a href="#sample1">見出し1</a></li> <li><a href="#sample2">見出し2</a></li> <li><a href="#sample3">見出し3</a></li> </ul> </div> |
