WordPress で目次を自動表示するプラグイン「Table of Contents Plus」の設定方法・使い方

ブログに手動で目次を表示させる場合、各見出しに固有の id をつけてページ内リンク（ジャンプリンク）を設定して…と、面倒な作業が必要です。

でも WordPress なら、プラグインで目次を自動表示させることができます。目次をつけることで読者が記事の内容を把握しやすくなり、多少の SEO 効果も期待できるので、ぜひ導入してみてください。

本記事ではプラグイン「Table of Contents Plus」の具体的な設定方法と使い方を解説しています。

Table of Contents Plus 設定方法

それでは、さっそくプラグイン「Table of Contents Plus」の使い方を見ていきましょう。

01. インストール・有効化

プラグイン新規追加画面から「Table of Contents Plus」で検索、または WordPress 公式ディレクトリよりダウンロードしてインストールしてください。

Table of Contents Plus – WordPress プラグイン | WordPress.org 日本語  

インストール完了後、そのまま有効化します。

管理画面サイドバーの「設定」に「TOC+」という項目が追加されるので、ここから初期設定を行っていきます。

02. 基本設定

最初に基本設定部分の解説です。

どのように設定すればよいかわからないときは、下のキャプチャ画像と同じようにしてみてください。設定をこまめに変えても問題ないので、どこをいじるとどうなるのか確認しながら作業を行っても OK です。

オリジナルデザインにする場合や目次全体を中央寄せにする場合は、CSS の指定が必要です。

最初に仮設定だけしておいて、あとから細かく調整するのがよいでしょう。

Table of Contents Plus デザインカスタマイズはこちら

03. 上級者向け設定

設定画面下部の「上級者向け」横にある「show」をクリックすると、詳細設定画面が表示されます。

その部分の設定を見ていきましょう。

デフォルト設定の場合、目次からのリンクは以下のような形になります。

<!-- 見出しが日本語のみの場合 -->
<a href="https://example.com/#i-1">日本語の見出し</a>

<!-- 日本語・英語が混在している場合 -->
<a href="https://example.com/#English">日本語＆Englishの見出し</a>

<!-- 英語のみの場合 -->
<a href="https://example.com/#Heading_Test">Heading Test</a>

「小文字」や「ハイフン」設定は英語が含まれているときのものなので、とくに気にしなくてよいでしょう。「デフォルト接頭辞」は日本語見出しで適用されますが、こちらも初期設定のままでとくに問題ありません。

最初は「見出しレベル」のみ設定しておけばよいと思います。

<h4> 以下まで深くしている場合、すべての見出しを反映させると目次がかなり長くなってしまいます。基本は <h2> と <h3> のみにしておき、あとは個々の書き方に合わせて調整してください。

設定画面以外のオプション

「Table of Contents Plus」は、ショートコードやウィジェットでの表示に対応しています。

任意の位置に目次を表示させる

設定画面では表示位置が 4 つしか指定できません。

任意の位置に目次を表示させる場合は、ショートコード [toc] を表示させたい場所に入れてください。

自動表示が無効になっている設定でも、ショートコードが入っている記事では目次が表示されます。

任意のページは目次を非表示にする

任意のページで目次を非表示にする場合、以下 2 つの方法があります。

ショートコードを使用する場合、位置は本文内のどこでも OK です。

サイドバーに表示させる

サイドバーにウィジェットエリアがあるテーマなら、専用ウィジェットを配置するとサイドバーに目次が表示されます。

「目次をサイドバーのみに表示」にチェックすると、本文内の目次が消えてサイドバーのみの表示となります。

プラグイン「Q2W3 Fixed Widget for WordPress  」を併用すると、目次を追尾させることも可能です（画像の「Fixed Widget」にチェックを入れる）。

サイドバーの追尾（固定）は効果がある？Google AdSense で検証した結果

SEO 効果を狙うには

見出し（≒目次）をきちんと使うことで、読者が記事を読みやすくなるほか、検索評価にも良い影響があります。

検索結果でのクリック率も多少向上するかもしれません。

見出しは各章のタイトルと考える

<h2> に「それから」とか <h3> に「つまり」など、見出しタグをただの区切りとして使っていないでしょうか。

もしそのような状態で見出しを表示させても、読者は記事に何が書かれているのかわからないでしょう。

記事タイトル・リード文・目次 の 3 つで「この記事には何が書かれており、読む価値があるか」を判断してもらうのが理想的です。適当に考えるのではなく、見出しは各章のタイトルとして考えるとよいですね。

検索結果に見出しが表示されることがある

「Table of Contents Plus」で目次を表示したとき、本文内の各見出しに固有の id をつけた <span> が挿入されます。

たとえば、主要サイトのテキストリンク色比較 という記事では、目次はこのように表示されています。

見出しの HTML と目次からのリンクは以下のような形です。

<!-- 見出し -->
<h2><span id="i">キャプチャ専用アプリ</span></h2>

<!-- 目次からのリンク -->
<a href="#i">キャプチャ専用アプリ</a>

必ずではありませんが、この「見出しへのリンク」が検索結果に直接表示される場合があります。

ユーザーが本当に必要としている情報にすぐアクセスできるよう配慮されているわけですね。

Search Console 「検索結果のパフォーマンス」で「#」が付いている URL が表示されていたら、見出しへのリンクを指しています。

ここから見出しを改善するヒントが見つかるかもしれません。

Table of Contents Plus よくある質問

目次が表示されなくなりました

アップデート直後など、何らかのタイミングで「見出しレベル」のチェックが外れる場合があります。上級者向け設定を開き、チェックが入っているか確認してみてください。

目次が 2 つ表示されてしまいます

他の目次プラグイン、またはテーマの目次機能が有効になっていると思われます。プラグインやテーマの設定を見直し、Table of Contents Plus のみ有効な状態にしてください。

まとめ

以上、目次を簡単に自動表示できる WordPress プラグイン「Table of Contents Plus」のご紹介でした。

どのような内容でも絶対に目次が必要、というわけではありません。また、見出しが多くなるとそのぶん目次も長くなってしまいますから、自分のブログに合わせて調整してください。

WordPress には運営に役立つプラグインがたくさんあるので、目的に応じて少しずつ取り入れていくと楽しいですよ。

WordPress初心者におすすめの定番プラグイン 8 選