【PHP】見出しから目次を自動生成する方法

当記事ではPHPを使用して見出しから目次を自動生成する方法について記します。
複数階層の見出しにも対応しています。

やりたいこと
目次を自動生成するPHP
WordPressで目次を自動生成したい場合
見た目の階層をわかりやすく
h2だけ目次にする

やりたいこと

下記のようなHTMLがある時に、PHPを使用して、見出しから目次を自動生成する事を目指します。
目次が挿入される場所は一番最初の見出しタグの前とします。

<div id="content">
    <h2>見出し1</h2>
    <h3>小見出し1</h3>
    <h3>小見出し2</h3>
    <h4>小小見出し1</h4>
    <h5>小小小見出し1</h5>
    <h3>小見出し3</h3>
    <h2>見出し2</h2>
    <h3>小見出し1</h3>
</div>

PHPで目次を自動生成したい場合はコンテンツを別ファイルに記述しておく必要があります。
ここではcontent.phpというファイル名にしております。

目次を自動生成するPHP

見出しから目次を自動生成するPHPは下記になります。
目次から見出しへ飛べるようにアンカーリンクも付けてくれます。

$content = file_get_contents('./content.php');  // コンテンツを取得
$content = autoTableOfContents($content);       // 目次を自動生成            
echo $content;                                  // コンテンツを出力


function autoTableOfContents($content) {
    $target = ['h2','h3','h4','h5'];
    $pattern = '/<('.implode('|', $target).')([^>]*)>(.*?)<\/h\d>/';

    if(preg_match_all($pattern, $content, $matches, PREG_SET_ORDER)){
        $toc = '<div id="toc"><p>目次</p><ul>';
        foreach($matches as $i => $match){
            $id = "toc-$i";                                                     // アンカーリンク用のID
            list($h_tag, $h_name, $h_attr, $h_text) = $match;                   // 見出しタグ、見出しのタグ名、 見出しの属性、見出しのテキストを取得
            $new_tag = "<$h_name id='$id' $h_attr>$h_text</$h_name>";           // idを付与した見出しタグを生成
            $content = preg_replace("{".$h_tag."}", $new_tag, $content, 1);     // idを付与した見出しタグに差替              
            $toc .= "<li class='toc-$h_name'><a href='#$id'>$h_text</a></li>";  // 目次リストを追加
        }
        $toc .='</ul></div>';
        $content = preg_replace("/(<$target[0])/", "$toc$1", $content, 1);      // 目次を一番最初の見出しタグの前に挿入
    }
    return $content;
}

WordPressで目次を自動生成したい場合

WordPressの場合は、先ほどのautoTableOfContents関数をfunctions.phpに記述して、コンテンツの出力箇所でフィルターフックを使用して以下のように記述したらOKです。

add_filter('the_content', 'autoTableOfContents');
the_content();

見た目の階層をわかりやすく

あとは見た目をよしなに整えるだけです。CSSのサンプルを載せておきます。
PHPが目次のリスト要素にtoc-H3などのクラスを付けてくれてるので階層をわかりやすくできます。

#toc .toc-H3 { margin-left: 15px }
#toc .toc-H4 { margin-left: 30px }
#toc .toc-H5 { margin-left: 45px }
#toc .toc-H6 { margin-left: 60px }
#toc {
    border: 3px #BDBDBD solid;
    padding: 30px;
    margin: 50px 0;
}
#toc p {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
}
#toc a{
    font-size: 16px;
    color: inherit;
}
#toc ul {
    padding-left: 20px;
}
#toc li {
    line-height: 1.8;
}