どうも、ぽっぽです。
僕がワードプレスをインストールしてから１ヶ月が経とうとしています。インストールしてみたのはいいけれど他のブログと何か違うと感じて調べたことの一つに、記事の目次がついていないことでした。
そこで、僕が記事に目次を付けた手順を解説します。
手段の調査
「ワードプレス」と「目次」というキーワードで検索すると、下記のような方法が見つかりました。
- 目次を追加するプラグインを利用する
- 目次を記事ごとに手打ちする
- 見出しを抽出して目次を生成して設置する
プラグインはインストールしてしまえばお手軽に目次を追加出来るようです。しかし、プラグインを追加しすぎるとサイトの表示が遅くなるそうです。また、セキュリティが低下したり、ワードプレスのメンテナンスの手間が増えるなど安易に手を出すのは良くないそうです。
他の手段もありますので、プラグインは使わないことにしました。
目次を都度手打ちするについては、めんどくさがりなので避けたいです。最終手段として保留します。
最後の目次を生成するについては、ハードルが高いかもしれないなと思ったのですが、やってみると簡単でした。
目次を生成して設置
基本方針は、記事の構成を統一して、構成から目次を生成することです。
記事ごとに構成を変える場合は適用できないですが、だいたいは下記のような構成でしょう。
- タイトル（H1タグ）
- 見出し（H2タグ）
- 小見出し（H3タグ）
- 以降見出しの繰り返し
タイトルの下に導入部分のテキスト、各見出しのテキスト文書が続くと思います。
今回は、見出し（H2タグ）を抽出して目次を自動生成し、生成した目次を差し込む方法を説明します。
記事の範囲を限定する
ページ全体は、利用しているテーマなのどによって異なる場合があります。記事の記載範囲に限定します。
そこで、DevToolsを利用して記事の範囲を確認します。
DevToolsの使い方はこちらの記事を参考にして見ください。
僕の場合、.entry-contentでした。使っているワードプレスのバージョンやテーマによって異なる可能性があるので、ご自分の記事で確認してみてください。
目次の範囲を挿入する
目次の範囲（DIVタグ）を定義して、記事に挿入します。
一番最初の見出し（H2タグ）を見つけて直前に追加します。
// 最初のH２タグの直前に目次を挿入する
function add_index_to_content( $content ) {
$index_wrap = '<div class="index_wrap"><span>目次</span></div>';
$tag = '/<h2.*?>/i';
if ( preg_match( $tag, $content, $tags )) {
$content = preg_replace($tag, $index_wrap.$tags[0], $content, 1);
}
return $content;
}
add_filter( 'the_content', 'add_index_to_content' );記載する箇所は、functions.phpです。子テーマを作成する記事を参照してください。functions.phpはこのようにサーバーで処理したい機能を追加するのに用いられます。
また、<?php ?>の間に記述するようにしてください。この表記は、PHPの処理範囲を表す記法です。
目次を生成
これで目次の範囲が挿入されますので、その範囲にjavascriptで見出し（H2タグ）の情報を抽出してリスト要素を生成します。
add_filter( 'wp_footer', function() {
?>
<script>
let indexWrap = document.querySelector('.index_wrap'); //functions.phpでH2タグの前に挿入したdivタグ
if ( indexWrap ) {
let postContent = document.querySelector('.entry-content'); //記事本文を囲んでいるラッパー
let hTags = postContent.querySelectorAll('h2'); //記事内のH2タグを全て取得
if (hTags.length > 0) {
let indexList = document.createElement("ul");
let listSrc = "";
for (let i = 0; i < hTags.length; i++) {
let theHeading = hTags[i];
theHeading.setAttribute('id', "index_id" + i); //リンクで飛べるようにIDをつける
listSrc += '<li><a href="#index_id' + i + '">' + theHeading.textContent + '</a></li>';
}
indexList.innerHTML = listSrc;
indexWrap.appendChild(indexList);
}
}
</script>
<?php
} );記載する箇所は、functions.phpです。
目次の範囲を挿入するスクリプトの次に記述します。
記事のフッターにjavascriptの記載を差し込む機能を利用しました。
最後に
functions.phpに２つのプログラムを記載するだけで、目次が自動で生成されるようになりました。
何も理解せず、コピペしても構いません。
目次がほしいなと思って調べてみて、図らずもワードプレスのfunctions.phpの使い方の一端を知ることが出来ました。
何かを始めるとそこから見える景色が変わるものですね。
