【WPプラグイン不使用】目次を自動生成する方法

2022.01.29

2022.04.02

どうも！かけちまるです！

WordPressで記事の目次を作成する方法は「Table of Contents Plus」などのプラグインを使う方法や「Cocoon」などのテーマにデフォルトで目次作成機能が備わっている場合など目次をさくせいする方法はいくつかあります。

自作テーマでプラグインを入れすぎるとサイトの表示速度が低下してしまうことを気にしている人に向けて目次を自動生成する処理をjQueryで実装していこうと思います。

この記事では、

・自作で目次を生成する方法

がわかります。

今回目指す形

今回の完成形は次のような感じです。

記事の階層（sectionタグ > 大見出し > 見出し毎のdivタグ > 小見出しのように）が決まっていればHTMLが違っても目次を生成してくれそうです。

上記のJavaScriptを自分用に編集する必要はありそうですが…

どんな仕組みか？

簡単に説明すると,
記事の大見出しのテキストを抽出し、そのテキストをHTMLに当て込み変数へ追加。
次に、記事の小見出しのテキストを抽出し、そのテキストをHTMLに当て込み変数へ追加。
これをfor文で回して目次のHTMLを作成しています。

詳細を解説

ここでは、HTMLとJavaScriptで何をしているか行毎に解説します。
解説はJavaScrptの後に書いています。

HTML
コピー
<div class="content">
   <section class="section" id="section01">
       <h1 class="head_big">大見出し</h1>
  
       <div class="section_inner" id="section_inner1-1">
           <h2 class="head_small">小見出し</h2>
       </div>
       <div class="section_inner" id="section_inner1-2">
           <h2 class="head_small">小見出し</h2>
       </div>
   </section>
</div>

JavaScript
コピー
// 目次を生成
let table_of_contents = '<div class="table_container">\n'
+'<div class="table_title">目次</div>\n';
 
for(let big=1; big <= $('.section').length; big++){
 
   let head_l = $('#section0' + big).find('.head_big').text();
 
   table_of_contents += '<a href="#section0' + big + '" class="table_link_big">' + big + '.' + head_l + '</a>\n';
 
   for(let small=1; small <= $('#section0' + big).find('.head_small').length; small++){
      
       let head_s = $('#section0' + big).find('#section_inner' + big + '-' + small).find('.head_small').text();
      
       table_of_contents += '<a href="#section_inner' + big + '-' + small + '" class="table_link_small">ー' + head_s + '</a>\n';
      
   }
 
}
 
table_of_contents += '</div>';
 
$('.content').before(table_of_contents);

2行目

変数table_of_contentsを定義し、ここに目次の大枠部分（普遍的な部分）を入れます。

5行目

記事内の.sectionの数だけfor文を回します。

7行目

変数head_lに各.section内の大見出しのテキストを入れます。

9行目

大見出し用のHTMLに7行目の変数head_lとページ内リンクを当て込み、そのHTMLを変数table_of_contentsに追加します。

11行目

各.section内の.section_inner数だけfor文を回します。

13行目

変数head_sに各.section_inner内の子見出しのテキストを入れます。