WordPress記事の目次が自動でつく仕組み

ブログ作成中、とても驚いた事があります。

作成した記事を確認すると目次が勝手についているのです！

目次は、見出し小見出しが自動で書き出されていて、各箇所へリンクもついているのでクリックをするととべるようになっています。

ページを１から自分の手打ちで作った場合、このように目次を作成してクリックして該当箇所にとぶには、
飛び先の該当部分にidをつけて、目次部分には各飛び先へのアンカーリンクをつけて……
とひとつひとつ設定してやらなければならないので結構手間がかかります。ところが、WordPressのいくつかのテーマや専用プラグインを使えば、目次を自動で生成してくれることがわかりました。これは便利ですね。

目次を自動で作ってくれるテーマやプラグインは何か、自動で生成される見出しの仕組みはどうなっているのか、調べてみました。私と同じくWordPress初心者で仕組みを勉強したい方のお役に立ちましたら幸いです。

目次の自動生成を使う方法
- 目次作成に対応しているテーマ
- 目次作成をするプラグイン
目次の自動生成の仕組み
まとめ

目次の自動生成を使う方法

いくつかのテーマが目次の自動生成に対応しています。対応していないテーマであっても、プラグインをいれると同じように目次の自動生成が可能です。

目次の自動生成に対応していれば、記事を書いた際に「見出し」を複数つけると、自動的に目次が生成されます。

もし、記事内にH2、H3などの見出しを作成しても目次ができないよという方は、テーマが目次の自動生成に対応していないかもしれません。その際はプラグインの使用も検討してみましょう。

目次作成に対応しているテーマ

目次作成に対応しているテーマは多く存在します。ただ、優秀なプラグインで補うことができますので、ほとんどのテーマについているというほど多くはないです。

Cocoon
yStandard
Emanon free

これらはWordPressの代表的な無料テーマですが、目次作成機能が備わっています。

それぞれテーマの設定画面から表示やカスタマイズ等が可能です。

例えば、Cocoonの目次機能はダッシュボードから「Cocoon設定」を開いて「目次」タブを開くと、詳細設定をすることができます。初期設定では目次に数値を振る設定になっているので、数値を振りたくない方はこちらのメニューから変更しましょう。

Cocoonの公式解説ページはこちら

参考

目次作成をするプラグイン

目次作成に対応しているテーマだけでなく、プラグインでも目次をつけることが可能です。

代表的なプラグインは

Easy Table of Contents
LuckyWP Table of Contents
Table Of Contents Plus

などが挙げられます。それぞれメリットや仕様の違いがありますので、試してみて自分にあったものをカスタマイズしてみてください。

なお、目次作成のプラグインについて調べると、Table Of Contents Plus がよくヒットするのですが、こちらのプラグインは2024年10月8日に閉鎖してしまっているようです。一時的な閉鎖だと書かれているので、再開した際は使用してみたいですね。

目次の自動生成の仕組み

目次はどのような仕組みで自動生成されているのでしょう。ここでは私が現在（2024/11）仕様しているテーマ「Cocoon」について見てみます。

記事作成ページの「オプション」→「コードエディタ」としてコードを見れば目次が入っているのがわかるはず！と仮説を立て、コードを見てみたのですが

あら、実際は空白です。何も入っていません。

記事の編集ページには書かれていないということは、ページが生成された後に動的に目次が挿入されているのではないかと考えられます。そして、ブログ記事を作成して、目次が入る場所はいつも「H2見出し」の真上です。

どこかで、

目次をH2見出しの真上に挿入する

というプログラムが書かれているのではないかと推測しました。

テーマを格納しているサーバーを開いてCocoonの親テーマの中身を見たところ、libフォルダ内にそれらしきphpファイルが複数ありました。

中身を見ると、最初のH２タグの前に目次を出力する命令や見出しの深さの設定の反映などが書かれておりました。よって、テーマを構成しているphpファイルによって、各見出しを取得し、最初のH２タグの前に目次の出力が行われていることがわかりました。これらのファイルはいじってしまうと戻せずリセットが必要になりますので、目次を変更したい際はメニュー画面からの変更がおすすめです。