プラグインなし！PHPのみでワードプレスに目次を追加する方法

ワードプレスにプラグインなしで目次を追加する方法を紹介します。あとjavascriptは使ってません。完全phpのみで目次を追加してます。

…さんざん他ブログで紹介されているんで新鮮味もなんもないんですが、参考にしてみてくださいね。

1. なぜ「プラグインなし」なの？
2. PHPのみで目次を追加する
3. functions.phpにコピペ
4. 「目次」のポイント
5. cssで目次をデザインする
6. スムーズにスクロールするならjquery使う

なぜ「プラグインなし」なの？

ぶっちゃけプラグインなしでやる必要ってないんですよね。ワードプレスには便利な目次生成プラグインがたくさんあるし、それ使った方がはるかにラクチン。

プラグイン使うと遅くなる、とかプラグイン使うとエラーが起こったとき怖い、みたいな意見も聞きますがそんなことはめったにない。

プラグインなしにこだわるのは完全に自己満足の世界だと思います。

勉強になる、くらいですかね？プラグインなしにこだわるのって。

PHPのみで目次を追加する

目次の追加方法ってjavascriptを使った方法もけっこう紹介されてるんですが、ワードプレスみたいにphpでサーバーサイドをいじれるならphpだけで目次を追加しようよ！ってことでここではphpだけで目次を作ってます。

ちなみに目次で見出しをクリックしてもスムーズにスクロールはせず、リンク先に瞬間移動しちゃいます。jqueryを使えばいいんですがページの読み込み速度が遅くなるのでやってません。

さあ！では完全なる自己満足の世界に行きましょう！

functions.phpにコピペ

いきなりですがこのコードをワードプレスのfunctions.phpにコピペしちゃってください。

function add_mokuji($content){
  
  $threshold = 4;
  
  if( preg_match_all('/<h([23])>(.*?)<\/h\1>/u', $content, $matches,  PREG_SET_ORDER) ){
    if( count($matches) >= $threshold ){
    
      $link_no = 1;
      $mokuji = '<ol id="mokuji">';
      $prev_level = 2;
      
      foreach( $matches as $m ){
        $level = $m[1];
        $text = $m[2];
        
        if($level == 3 && $prev_level == 2){
          $mokuji .= '<ol class="mokuji-indent">';
        }
        
        if($level == 2 && $prev_level == 3){
          $mokuji .= '</ol>';
        }
        
        $mokuji .= '<li><a href="#jump-' . $link_no . '">' . $text . '</a></li>';
        
        $link_no++;
        $prev_level = $level;
      }
      
      if($prev_level == 3){
        $mokuji .= '</ol>';
      }
      $mokuji .= '</ol>';
      
      $content = preg_replace('/(\s)(<h[23]>.*?<\/h)/u', "$1$mokuji$2", $content, 1);
      
      /* 見出しにID付け */
      $h_no = 1;
      $content = preg_replace_callback(
        '/<h([23])>(.*?)<\/h\1>/u',
        function($matches) use(&$h_no){
          return '<h' . $matches[1] . ' id="jump-' . $h_no++ . '">' . $matches[2] . "</h$matches[1]>";
        },
        $content
      );
    }
  }
  
  return $content;
}
add_filter('the_content', 'add_mokuji');

「目次」のポイント

最初の方にある「$threshold」の値は見出し行が記事内にいくつ以上あれば目次を生成するっていう変数。

今の状態だと4つ以上見出し行があれば目次を作るようになっています。値を増やすなり減らすなりしてカスタマイズしちゃってください。

また、このコードではh2とh3のみを目次にするようになっているのでh4以下の見出しがあったとしても無視します。h4以下って目次にはいらないかな、と。

目次は自動で記事に挿入されるんですが、挿入位置は、

1. 記事が見出しから始まってるなら、2つ目の見出しの直前
2. 記事が本文から始まってるなら、1つ目の見出しの直前

に挿入するようにしました。もくじってちょろっとその記事の説明をした後に入るパターンが多いと思うんで、できるだけ自然とそんな位置に入るようにしてあります。

cssで目次をデザインする

これで目次は入ったんですが、このままだとデザインがされてないのでcssをいじって目次の見た目をカスタマイズしてください。

ワードプレスでわざわざブログをしている方はcssでデザインをいじるのはお手のものだと思うので、カスタマイズに使うIDとクラスだけ書いときますね。

• 目次全体：#mokuji
• h3のまとまり：.mokuji-indent

スムーズにスクロールするならjquery使う

これでphpだけでワードプレスに目次を追加できました。プラグインでやればボタン一つだけど自分で作ってみるとなにやらナゾの達成感があるものですよね。

今回はphpだけで目次を作ったんですが、結局スムーズにスクロールしたいならjavascriptで自分でゴリゴリスクロール処理をプログラミングするかjqueryでパパっとスクロール処理を実装する必要があるので「ん？phpでやった意味は？」と言われればそれまでなんですが…。

ま、スムーズにスクロールしたかったらおとなしく目次もjqueryで作ったほうが早いですね！