目次を使っているサイトと言えば、有名なのがウィキペディア（Wikipedia）ですね。
Wikipediaのサイトではタイトル下に目次があって、その下に各項目の説明があるという定番スタイル、見慣れている方も多いと思います。
これをWordPressに、しかも簡単な設定で設置できるのが、今回紹介する【Table of Contents Plus】プラグインです。
【Table of Contents Plus】プラグインの基本的な機能・できること
「Table of Contents Plus」では以下のような機能がサイトへ追加できます
それから、他のプラグインと比べ、導入前後での負荷（表示速度の低下）が少ないようであることもおすすめポイントです。
目次の自動作成
このプラグインの最大の特徴は自動で目次を作ってくれるところです。h1～h6の見出しタグに応じて階層上に目次を作成してくれます
この目次は画面に表示される際に作られるので、後からページや投稿記事の内容を修正した場合でもきちんと対応してくれます。ただし、キャッシュ系プラグインの導入環境ではテストしていませんので、正常に動作するかは不明です。
もちろん、「このタグはあえて目次にしなくてもいい」という場合には、例えばh6のタグは目次にしない・・・といった設定ができます。
逆に自動表示を無効にして、ショートコードを使って任意の投稿や固定ページだけにもくじを出力することもできます。
目次の表示位置やデザインが選べる
目次の表示位置は、「記事タイトルの下」「最初の目次に表示されるタグの下」「本文の後ろ」「最初の目次に表示されるタグの上」が選択できます。当サイトでは「最初の目次として扱われているタグの上」にしてあります。
また、デザインについても変更が可能です。
サイトマップページも作れる
Google-XML-Sitemapのように要約などは表示できないものの、ページのタイトル、投稿それぞれのカテゴリーまでは表示できます。固定ページにタグを入れるだけで自動的にサイトマップができるので、プラグインを最小限に抑えたい場合にはこのプラグインで目次とサイトマップを両方使うようにしましょう。
目次生成に対する負荷が少ない
あくまでも個人的見解ですが、この手のプラグインはコンテンツを生成するのにすごく負荷がかかって表示が遅くなるものが多いのですが、このTable of Contents Plusに関してはプラグイン導入後の表示遅延はないように思われます。
本ページを最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境・公式ページなど
この紹介記事作成にあたって、試用（テスト）を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。
| テストしたサーバー | カラフルボックス |
| WordPressバージョン | 5.9.3 |
| PHPバージョン | 7.4.27 |
| テストしたテーマ | HABONE(本サイトでも使用しているオリジナルテーマ) |
| プラグインバージョン | 本記事で紹介するために試用したバージョン ：2106 公式サイトで配布されている最新バージョン ：2408 ※バージョンが違うと、仕様が大きく変更となっている可能性があります |
| テストした日 | ※本記事の最終更新日であり、実際の試用日とは異なることがあります |
| 公式サイト | https://wordpress.org/plugins/table-of-contents-plus/ ※wordpress.org上のページへのリンクです |
| 作者サイト | ※プラグイン制作者の独自ページ（サイト）リンクです |
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Table of Contents Plus】プラグインの設定画面や表示の日本語化と翻訳
【Table of Contents Plus】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます
【Table of Contents Plus】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
【Table of Contents Plus】プラグインの基本的な使い方
設定はダッシュボード左サイドバーの「設定」↣「TOC+」で行います。
以下が主な設定項目と基本的な使い方です。
基本設定タブ
- 表示条件／自動で目次を出力する最低の見出しタグの数
- 以下のコンテンツタイプを自動挿入／チェックを入れたコンテンツに対して自動で目次が表示されます
※任意に目次を挿入したい場合はすべてのチェックを外し、tocショートコードを使います - 見出しテキスト／目次リストの上に表示する文字列の設定です
- スムーズスクロール／目次をクリックした時に滑らかに移動する効果を追加できます
※既にスムーズスクロール機能があるテーマやプラグインと併用するときはOFFのままにします - 外観／見た目の設定です
上級者向け項目については、特に変更の必要はないでしょう
自動表示させない場合には、任意の場所へ以下のショートコードを挿入します。
[toc]サイトマップタブ
この機能は検索エンジン向けではなく、固定ページなどに自動でサイト内ページのツリーマップを表示させる際に使用します。
サイトマップ表示させるには、固定ページを作り、以下のショートコードを挿入します。
[sitemap]表示速度に極力影響を与えないようにするひと工夫
プラグインをたくさん使う場合、そのプラグインの動作に必要なファイルが読み込まれ、表示が重くなることがあります。
Table of Contents Plusに関しても同じことが言え、特に大掛かりなものではないものの、目次を生成するためのスクリプトとスタイルがすべてのページに1つずつ追加されます。
多少であっても影響を少なくしたい場合には、「toc」ショートコードがあるコンテンツ（投稿や固定ページ）だけに必要なものを読み込ませるのが最善の対策だと言えます。
そこで、ショートコードがあるときのみ読み込みを行うよう、以下のコードを有効化しているテーマのfunctions.phpへ追加します。
/***** Table of Contentsプラグインの処理 *****/
/* 一旦スタイルとスクリプトを無効にする */
function ha_tocp_dequeue_scripts(){
wp_dequeue_style( 'toc-screen' );
wp_dequeue_script( 'toc-front' );
}
add_action( 'wp_enqueue_scripts', 'ha_tocp_dequeue_scripts');
/* tocショートコードがある場合のみ有効にする */
function ha_tocp_enqueue_scripts() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'toc') ) {
wp_enqueue_style( 'toc-screen' );
wp_enqueue_script( 'toc-front' );
}
}
add_action( 'wp_enqueue_scripts', 'ha_tocp_enqueue_scripts');詳しい説明は省きますが、上半分は、Table of Contents Plusプラグインがすべての投稿や固定ページへ出力するスクリプトとスタイルを停止するコード、下半分が、ショートコードがあるときのみ有効にするコードです。
上記コードはtocショートコードがある場合のみ有効です。設定で自動挿入を有効にしている場合には、効果がありませんのでご注意ください
ポチップ
ポチップ
