JavaScriptでWordPressの記事ページに目次を表示する
「WordPressのプラグインを使わずに、ブログに目次を入れたい」
「プラグインは重そうだから別の方法で目次を作りたい」
この記事では、WordPressの目次についてお悩みの方に、プラグインを使わずに目次を追加する方法をお伝えします。
プラグインを使わないので、ページの軽量化が見込めますよ！
作成結果の見た目はこの記事ページの目次と同じになります。
コードをコピペするだけで使えるので、ぜひコードだけでも参考にしてみてください！
JavaScriptでWordPressの記事ページに目次をつくるための手順
以下はJavaScriptで目次をつくる際のポイントです。
手順を押さえたうえで、続きを読んでいただければと思います。
- 記事内のh2タグすべてにクラスを付与する
h2タグをすべて取得する- 取得した
h2タグのテキストを抜き出す - 目次用のHTMLを生成して、それに抽出したテキストを設定し、アンカーリンクを設定する
- 目次の対象要素に完成したHTMLを順に挿入する
【コピペコード】JavaScriptでWordPressの記事ページに目次をつくる
JavaScript
//変数の設定
var articleTitles = document.querySelectorAll('.article-content h2'); //記事内のh2タグをすべて取得
var indexArea = document.querySelector('.index-area'); //目次のエリアを取得
var indexList = document.querySelector('.index-list'); //目次の親要素を取得
var indexTitles = []; //生成した目次を保存する配列
//h2があれば処理を実行
if(articleTitles.length){
//h2があれば、目次のエリアを表示
indexArea.classList.add('show');
//取得したh2にidを設定し、目次のHTMLにアンカーリンクと抽出したテキストを設定する
articleTitles.forEach(function(title, index) {
var id = 'articleTitle-' + index;
title.setAttribute('id', id);
var text = title.textContent;
var indexHtml = '<li class="index"><a class="scroll" href="#' + id + '">' + text + '</a></li>';
indexTitles.push(indexHtml);
});
}
//対象要素に目次を順に挿入
indexTitles.forEach(function(title) {
indexList.insertAdjacentHTML('beforeend', title);
});HTML
<div class="index-area">
<h2>目次</h2>
<ul class="index-list">
</ul>
</div>SCSS
.index-area{
display: none;
padding: 1.5em;
background: #f8f9fa;
margin-bottom: 2em;
h2{
margin-bottom: 1em;
}
.index-list{
list-style: initial;
margin-left: 1.3em;
li{
+ li{
margin-top: 1em;
}
a{
color: #17a2b8;
text-decoration: underline;
}
}
}
&.show{
display: block;
}
}大枠はこのような感じです。
このコードをコピペしていただくだけで、この記事で表示されている目次を表示できます！
CSSはデザインに合わせて、適宜修正してください。
JavaScriptでWordPressの記事ページに目次を表示する方法を解説
1. HTMLに目次を表示するコードを記述する
まずは、目次を表示する場所にコードを追加します。
先ほどお伝えした「コピペコード」のHTMLを、目次を表示したい場所にそのままコピペしてください。
<div class="index-area">
<h2>目次</h2>
<ul class="index-list">
</ul>
</div>2. 必要な要素を変数に設定する
次にJavaScriptファイルの作成に進みます。
まず、今回のプログラムで必要な要素を変数として用意します。
それぞれの変数と変数の説明は以下のとおりです。
var articleTitles = document.querySelectorAll('.article-content h2'); //記事内のh2タグをすべて取得
var indexArea = document.querySelector('.index-area'); //目次のエリアを取得
var indexList = document.querySelector('.index-list'); //目次の親要素を取得
var indexTitles = []; //生成した目次を保存する配列3. h2タグがある場合に目次エリアを表示する処理をつくる
目次エリアはh2タグがなければ表示する必要がありませんので、最初はCSSで非表示にしています。
.index-area{
display: none;
}そして、h2タグがひとつでもあれば、目次の要素にshowクラスを付与して表示する仕様にしました。
//h2があれば処理を実行
if(articleTitles.length){
//h2があれば、目次のエリアを表示
indexArea.classList.add('show');
}4. 取得したh2タグにidを設定してアンカーリンクの下準備をするコードを作成
アンカーリンクを使用するにはid属性を設定する必要があるので、その処理を作成します。
//h2があれば処理を実行
if(articleTitles.length){
//h2があれば、目次のエリアを表示
indexArea.classList.add('show');
//取得したh2にidを設定し、目次のHTMLにアンカーリンクと抽出したテキストを設定する
articleTitles.forEach(function(title, index) {
var id = 'articleTitle-' + index;
title.setAttribute('id', id);
});
}forEachメソッドは順番に配列の要素にアクセスするためのメソッドです。
この機能を利用して、取得したh2が格納されている配列（articleTitles）の要素に順番にアクセスします。
また、forEachメソッドの引数にはそれぞれ下記の値が自動的に入ります。
| 第1引数 | アクセスした要素 |
| 第2引数 | 順番 |
今回の処理では、h2タグにid属性を設定するために、第2引数の「順番」（index）を利用して加工します。
var id = 'articleTitle-' + index; //h2タグに設定するidの値を作成（articleTitle-0、articleTitle-1 ...）
title.setAttribute('id', id); //id="articleTitle-0"、id="articleTitle-1" ...setAttibuteは属性に値を設定するメソッドです。
この機能を利用して、作成した値（articleTitle-●●）をid属性に設定します。
これでアンカーリンクの下準備は完了です！
5. 目次用のHTMLを生成する
次に目次用のHTMLを生成します。
目次には以下の情報が必要です。
- アンカーリンク
h2のテキスト
アンカーリンクは前項で作成したので、ここではh2のテキストのみを抽出します。
そのあと「アンカーリンク」と「抽出したテキスト」をHTMLタグに設定し、完成した目次用のHTMLを配列に保存していきます。
//h2があれば処理を実行
if(articleTitles.length){
//h2があれば、目次のエリアを表示
indexArea.classList.add('show');
//取得したh2にidを設定し、目次のHTMLにアンカーリンクと抽出したテキストを設定する
articleTitles.forEach(function(title, index) {
var id = 'articleTitle-' + index;
title.setAttribute('id', id);
var text = title.textContent;
var indexHtml = '<li class="index"><a class="scroll" href="#' + id + '">' + text + '</a></li>';
indexTitles.push(indexHtml);
});
}textContentプロパティには対象となる要素の文字列情報が保存されています。
このプロパティにアクセスして、タイトルのテキストを取得します。
var text = title.textContent;ここまでで「アンカーリンク」と「タイトルのテキスト」が準備できました。
次にそれらをHTMLに設定し、完成形のHTMLを配列（indexTitles）に保存していきます。
var indexHtml = '<li class="index"><a class="scroll" href="#' + id + '">' + text + '</a></li>';
indexTitles.push(indexHtml);pushは配列の最後に要素を追加するメソッドです。
こちらを使用して配列（indexTitles）に要素（indexHtml）を順番に追加してきます。
これで必要な要素が準備できました。
あとは目次のエリアにこれらを挿入するだけです！
6. 目次の対象要素に作成したHTMLを順に挿入する
要素を挿入するメソッドとしてinsertAdjacentHTMLを使用します。
//対象要素に目次を順に挿入
indexTitles.forEach(function(title) {
indexList.insertAdjacentHTML('beforeend', title);
});insertAdjacentHTMLメソッドは対象要素を基準として、「第1引数で指定した場所」に「第2引数で指定した要素」を挿入します。
今回の例でいうと以下のような処理が実行されます。
indexList（目次が挿入される要素）のbeforeend（閉じタグの前）にtitle（目次用のHTML）を挿入
以上です。
これで目次のリストが完成です！
完成形は、この記事の上部にある「目次」を確認してください！
【まとめ】JavaScriptでWordPressの記事ページに目次をつくる方法
この記事では、JavaScriptでWordPressの記事ページに目次を追加する方法をお伝えしました。
WordPressのプラグインを使わなくても、今回のコードをコピペしていただければ目次を作成することが出来ます。
WordPressのプラグインは非常に便利です。
ただ、プラグインを使いすぎるとWebページの表示が重くなってしまい、表示に時間がかかる傾向があります。
「あれもこれも」と欲しいものを追加していくのは好ましくありません。
ページの表示速度は速いほうが、ユーザーに快適さを提供できます。
何より、表示速度が速いことは離脱率の減少につながります。
プラグインを使わずにプログラムを実装することは大変ですが、ユーザーのことを思うとやる価値はあるのではないでしょうか！
以上です。
少しでもお役に立てたら幸いです。
参考になりました！ありがとうございます！(*´꒳`*)
参考にしていただきありがとうございます！
嬉しいです！