ワードプレスで記事の目次をPHPで作る方法（jsを使わない）

記事に目次を作る！

ググるとjsで作る方法がよく見つかります。
確かにjsの得意分野ですが、PHPでも普通にできるので紹介。

今回紹介する目次の仕様ついて

下記の仕様です。

・タグは「h2」のみ
・目次は一番最初のh2の上に作る
・とにかく速度優先

自分はh3まで対応はしないのでh2までしか作ってない。

普通は「h2が2個以上あった場合」など条件分岐をするものですが、
軽さ優先なのでそんな処理は一切ありません。
自分専用の超カスタマイズです。

１、functions.phpに書く

<?php
function tocsakusei($honbun){

$match = preg_match_all( '#<h2>(.+?)</h2>#', $honbun, $result );

$h2count = count($result[0]);

for($i=0;$i<$h2count;$i++){
$pattern = '<h2 id="heading'.($i+1).'">';
$subject[] = str_replace('<h2>',$pattern,$result[0][$i]);
$result[1][$i] = '<li><a href="#heading'.($i+1).'" class="mokuji-a">'.$result[1][$i].'</a></li>';
$honbun = str_replace($result[0][$i],$subject[$i],$honbun);
}

$kumitate1 = '<div id="toc"><div class="mokuji">目次</div><div id="mokuji-list"><ol>';
$kumitate2 = '</ol></div></div>';
$tocmatome = implode('',$result[1]);
$kumitate3 = $kumitate1.$tocmatome.$kumitate2;

$h2 = '#<h2.*?>#';
if(preg_match($h2,$honbun,$h2s)){
$honbun = preg_replace($h2,$kumitate3.$h2s[0],$honbun,1);
}

return $honbun;
}
add_filter('the_content','tocsakusei');
?>

正規表現でh2を検索して置換しているだけです。
classを付けている場合は調整ください。
h3まで対応したい場合は最初のマッチングでh3も含めて、ちょっと頑張ればできる。

とりあえず、これだけで目次が表示されます。
あとはCSSを自分の好きなように記載ください。

２、サンプル

このブログがサンプルになります。

元々jsでサンプルを公開されているのを使っていたので、
Class名などはそのまま使っています。
なんか見たことある、な人が多いと思う。

jsとPHPのどっちが速いのか？ですが、
この関数の実行時間は約0.00005秒。
多分PHPの方が速いと思う。

ということで、PHPでの目次はおすすめです。

３、add_filterを使いたくない場合

$honbun = apply_filters('the_content',$post->post_content);
echo tocsakusei($honbun);

add_filterは自動で実行するので便利ですが、使えない人もいるだろう。
そんな本文を変数で取得して処理をしている人は、この方法が良い。