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

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

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

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

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内の子見出しのテキストを入れます。

15行目

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

21行目

最後に2行目で変数table_of_contentsに追加したHTMLタグの閉じタグを追加します。

23行目

目次HTMLが入った変数table_of_contentsを任意の場所に追加します。
※ここでは.contentの前に追加しています。

まとめ

あまり分かりやすい説明が出来なくてすみません。
ほとんどの人はプラグインを使ったり、テーマに元々備わっている機能を使って目次を生成すると思います。

なので、自分でコードを書くことにこだわりたい人やWordPressを使わない人に参考になればと思います。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

CSS変数(カスタムプロパティ)の使い方

CSS変数(カスタムプロパティ)の使い方

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

【videoタグ】HTMLでWebサイトに動画を埋め込む

【videoタグ】HTMLでWebサイトに動画を埋め込む

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

【Three.js基礎】概念の理解と立方体の実装

【Three.js基礎】概念の理解と立方体の実装

特定のブラウザのみにCSSを適応させるハック

特定のブラウザのみにCSSを適応させるハック