【WordPress】複数ページに分割された記事で、全ページ分の目次を表示させる方法

WordPressの無料テーマ「Cocoon」最高ですよね。Cocoonではプラグインを使わなくても記事の見出しから自動的に「目次」を生成・表示させる機能があります。素晴らしいですね。
さて、この目次ですが、長文となった記事を複数ページに分割したりすると、それらのページごとの目次が作られます。これはどうでしょうか。SEOの観点だったり、基本的な考え方のベースにページ単位で完結するというものがあったりするのでしょう。でも、分割されていても、記事が一つなら、目次もその記事全体分で一つという方が、しっくりくるという人もいるでしょう。また、２ページ目を読み進めている人が、１ページ目のあの箇所に戻りたいという人もいるでしょう。
今回はそうした人たちに向けて、複数ページに分割された記事で、全ページ分の目次を全ページに表示させる方法です（テーマはCocoonを前提にした説明です）。

functions.phpにコードを書きこむ

Cocoonにせっかく、目次表示の機能はあるのですが、今回は泣く泣く、表示しない設定にします。［Cocoon設定］の［目次］タブから、［目次を表示する］のチェックが外れていることを確認してください。
では、早速、複数ページに分割された記事で、全ページ分の目次を全ページに表示させる為のコードです。［外観］の［テーマエディター］から、functions.phpに下記のコードを書きこみます。記事中のhタグに応じて目次を作っていきます。ひとまず、h1～h6全てに対応します。本来h1タグは記事タイトル以外では使わないルールですが、WordPressではh1タグを使えない仕様にはなっていないので、対応しています。このコードの特徴は「$up_down」という配列にリストを作るためのタグ「ol」と「li」の組み合わせを11個用意して、連続するhタグの階層差に着目して呼び出します。それによってループの回数を減らし、タグの微調整はWordPressのタグ補正機能に委ねることにより、50行足らずのシンプルなコードを実現しています。

function toc_by_percredere($content){
  if(is_singular()){
    global $post;
    $current_page_num = (get_query_var('page') == 0) ? 0 : get_query_var('page') - 1;
    $htags = array();
    $tag_num = array();
    $p_link = get_permalink();
    $pages = explode('<!--nextpage-->', $post->post_content);
    $up_down = array("</li></ol></ol></ol></ol></ol></li>", "</li></ol></ol></ol></ol></li>", "</li></ol></ol></ol></li>", "</li></ol></ol></li>", "</li></ol></li>", "</li>", "<ol>", "<ol><ol>", "<ol><ol><ol>", "<ol><ol><ol><ol>", "<ol><ol><ol><ol><ol>");
    for($p = 0; $p < count($pages); $p++){
      preg_match_all('/(<h([1-6])>.+)<\/h[1-6]>/u', $pages[$p], $tag_each_page, PREG_SET_ORDER);
      $htags[] = array_column($tag_each_page,1);
      $tag_num = array_merge($tag_num, array_column($tag_each_page, 2));
    }
    if(!empty($tag_num)){
      $tag_num[] = min($tag_num);
      $htag_init = $tag_num[0] - min($tag_num) + 6;
    }
    $c = 0;
    for($a = 0; $a < count($htags); $a++){
      for($b = 0; $b < count($htags[$a]); $b++){
        $htags_diff = $tag_num[$c + 1] - $tag_num[$c] + 5;
        if($a == $current_page_num){
	  $for_toc .= preg_replace('/<h[1-6]>/u', "<li><a href='". "#". $b. "'>", $htags[$a][$b]). "</a>". $up_down[$htags_diff];
          $content = preg_replace('/(<h[1-6])>/u','$1'. " id='". $b. "'>", $content, 1);
        }else{
          if($a == 0){
            $for_toc .= preg_replace('/<h[1-6]>/u', "<li><a href='". $p_link. "#". $b. "'>", $htags[$a][$b]). "</a>". $up_down[$htags_diff];
          }else{
            $for_toc .= preg_replace('/<h[1-6]>/u', "<li><a href='". $p_link. ($a + 1). "/#". $b. "'>", $htags[$a][$b]). "</a>". $up_down[$htags_diff];	
          }
        }
        $c++;
      }
    }
    if($current_page_num == 0){
      $content = preg_replace('/(<h[1-6].+<\/h[1-6]>)/u', "<div class='toc'><div class='toc-title'>contents</div>". $up_down[$htag_init]. $for_toc. "</ol></div>". '$1', $content, 1);
    }else{
      $content = "<div class='toc'><div class='toc-title'>contents</div>". $up_down[$htag_init]. $for_toc. "</ol></div>". $content;	
    }
  return $content;
  }
}
add_filter('the_content','toc_by_percredere');

実際に貼付した画像が下記です。「以下に子テーマ用の関数を書く」の下に貼付してください。

目次のスタイルを整える

上記のコードだけで、目次は生成されますが、少しスタイルを整えたり、表示、非表示の切り替えができるようにします。この辺は皆さんのお好みでカスタマイズしてみてください。

style.cssにコードを書きこむ

目次表示の微調整と表示、非表示（open、close）切替の設定のコードです。［外観］の［テーマエディター］から、style.cssに下記のコードを書きこみます。

.toc{
   margin:auto;
}
.toc-title::after {
   content: '[close]';
   margin-left: .5em;
   cursor: pointer;
   font-size: .8em;
}
.toc-title.active::after {
   content: '[open]';
}
.article ol{
   padding-left:15px;
}

javascript.jsにコードを書きこむ

最後に、目次の表示、非表示を動作させるコードです。［外観］の［テーマエディター］から、javascript.jsに下記のコードを書きこみます。

$('.toc-title').click(function(){
   $(this).toggleClass("active").next().fadeToggle();
})

これで、スタイルも整って、表示、非表示もできる目次が自動で生成されます。
この記事はそんなに長文ではありませんが、複数ページに分割された記事で、全ページ分の目次が全ページに表示されることを確認する為、この下に改ページを入れます。また、１ページ目は目次を最初のhタグ（見出し）の直前に入れていますが、２ページ目以降はページの一番最初に目次を入れます。
それができているかを確認するため、あまり無いとは思いますが、２ページ目の開始を段落からにしています。