Web制作

WordPress投稿内のhタグを検知して、自動で目次を作成する

h2,h3,h4タグを自動で検知して、目次を作ってくれる機能を自作。

↑こういう投稿内容に基づいて、

↓こういう目次を出力

ざっくり仕様としては、

①コンテンツ内のh2,h3,h4タグを検知して
②それらにid属性「content-xx」を自動付与
③content-xxがついている要素を検知して
④目次として出力

とする。

①コンテンツ内のh2,h3,h4タグを検知& ②それらにid属性「content-xx」を自動付与

functions.phpにfunctionを作成する

add_filter('the_content', 'add_id_to_headers');


function add_id_to_headers($content) {
 preg_match_all('/(<h([2-4])[^>]*)>(.*)(<\/h[2-4]>)/', $content, $matches, PREG_SET_ORDER);
 $index = 0;
 foreach ($matches as $val) {
  $index++;
  $id = 'content-' . $index;
  $content = str_replace($val[0], $val[1] . ' id="' . $id . '">' . $val[3] . $val[4], $content);
 }
 return $content;
}

③content-xxがついている要素を検知 & ④目次として出力

functions.phpに、content-xxを目印にした目次を作成するfunctionを作成

function generate_toc() {
 global $post;
 $content = $post->post_content;
 preg_match_all('/(<h([2-4])[^>]*)>(.*)(<\/h[2-4]>)/', $content, $matches, PREG_SET_ORDER);
 $ul_li = '';
 $index = 0;
 foreach($matches as $val){
  $index++;
  $id = 'content-' . $index;
  $ul_li .= '<p class="for-h' . $val[2] . '"><a href="#' . $id . '">' . $val[3] . '</a></p>';
 }

 if ($ul_li){
  $toc = '<div class="mokuji">
   <div class="left">
    <h4>この記事の目次</h4>
   </div>
   <div class="right">'
    . $ul_li .
  '</div>
  </div>';
  return $toc;
 } else {
  return '';
 }
}

んで、single.phpの任意の場所に

<?php echo generate_toc(); ?>
を配置。場所は任意だが、<?php the_content(); ?> より前に記載すべき。
cssについては、各々好きにスタイリングしてね。
TOP