WordPressの記事が長くなると、「読みたい場所が見つかりにくい」「途中で離脱されそう」と気になりますよね。そんなときは、記事の冒頭に目次を置くと、読者が内容を把握し、必要な見出しへすぐ移動できるようになります。
初心者が複数の記事へ目次を付けるなら、見出しから自動生成するプラグインを使う方法が簡単です。特定の記事だけに付けたい場合やプラグインを増やしたくない場合は、WordPress標準の見出し・リスト・HTMLアンカーを使って手動でも作れます。
この記事では、Easy Table of Contentsを使う自動作成と、ブロックエディターだけで作る手動設定の両方を解説します。目次が表示されない原因や、読みやすく整えるポイントも一緒に確認しましょう。
WordPressで目次を作る3つの方法
WordPressで目次を作る方法は、大きく分けて次の3つです。記事数と利用中のテーマに合わせて選びます。
| 方法 | 向いている人 | 特徴 |
|---|---|---|
| プラグインで自動生成 | 複数の記事へ目次を付けたい人 | 見出しを読み取り、目次とリンクを自動で作れる |
| テーマの目次機能 | 対応テーマを利用中の人 | プラグインを追加せず、テーマの設定で表示できる |
| 手動で作成 | 特定の記事だけに付けたい人 | 標準ブロックで作れるが、見出しの追加・変更時に修正が必要 |
まず利用中のテーマに目次機能があるか確認してください。すでにテーマで自動生成している状態で目次プラグインも有効にすると、目次が2つ表示されることがあります。
目次を作る前に見出しの階層を整える
自動作成でも手動作成でも、先に記事の見出しを整理することが大切です。目次プラグインは、本文に設定されたH2やH3などの見出しを読み取り、一覧にします。
H2は大きな話題、H3はその中の小さな話題として使います。H2の次にいきなりH4を置くような飛び方は避け、H2→H3→H4の順に階層を下げてください。
文字を太くしたり大きくしたりしただけでは、WordPressは見出しとして認識しません。投稿編集画面で「見出し」ブロックを使い、H2やH3を設定しましょう。WordPress公式ドキュメントでも、見出しは内容を整理し、人と検索エンジンの双方が構造を理解しやすくする要素として説明されています。
見出しブロックの操作は、WordPress公式のHeading block解説でも確認できます。
Easy Table of Contentsで目次を自動作成する手順
ここからは、WordPress.org公式ディレクトリで公開されている「Easy Table of Contents」を例にします。投稿や固定ページの見出しを読み取り、目次を自動挿入できるプラグインです。
プラグインの対応バージョン、更新日、サポート状況は変わるため、インストール前にEasy Table of Contents公式ページを確認してください。
プラグインを検索して有効化する
WordPress管理画面へログインし、［プラグイン］→［プラグインを追加］を開きます。右上の検索欄へ「Easy Table of Contents」と入力してください。
似た名前のプラグインも表示されます。名前と作者を公式ページと照らし合わせ、Easy Table of Contentsの［今すぐインストール］をクリックします。インストールが終わったら［有効化］をクリックしてください。
目次を表示する投稿タイプを選ぶ
有効化したら、管理画面の［設定］→［Table of Contents］を開きます。最初に確認するのは「Enable Support」と「Auto Insert」です。
- Enable Support：目次機能を使える投稿タイプを選びます。
- Auto Insert：目次を自動挿入する投稿タイプを選びます。
通常のブログ記事へ自動表示するなら、まず「投稿」を対象にします。固定ページにも必要かどうかはサイト構成によるため、すべてに機械的なチェックを入れないでください。
既存記事が多いサイトでAuto Insertを有効にすると、対象の記事へ一斉に目次が表示されます。いきなり本番で変更せず、ローカル環境やステージング環境で表示を確認してから反映しましょう。
表示条件と位置を設定する
設定画面を下へ進み、何個以上の見出しがあるときに表示するか、記事内のどこへ挿入するかを決めます。
- 表示条件：短い記事まで目次だらけにならないよう、見出し数の下限を決めます。
- 位置：最初の見出しの前など、読者が本文を読み始める前に見つけやすい場所を選びます。
- 見出しラベル：「目次」など、役割が分かる短い名前にします。
- 階層表示：H2の下にH3を一段下げて表示すると、記事構造が伝わりやすくなります。
最初から色や余白を細かく変更する必要はありません。まず目次が正しく生成され、リンクが動くことを確認してから、サイトに合わせて外観を調整します。
設定を保存して実際の表示を確認する
設定を保存し、H2とH3がある記事を表示します。次の画像では、H2が大項目、H3が一段下がった小項目として自動生成されています。
目次の項目をクリックし、対応する見出しまで移動できるか確認してください。パソコンだけでなくスマートフォンでも、文字が小さすぎないか、項目が画面からはみ出していないか、開閉ボタンを押しやすいかを見ます。
特定の記事だけに目次を入れる
すべての記事へ自動挿入せず、必要な記事だけに表示したい場合はAuto Insertを使わず、ショートコードを利用できます。投稿編集画面で「ショートコード」ブロックを追加し、プラグイン公式ページに案内されている目次用ショートコードを入力します。
ショートコードの記述や利用できる属性は更新で変わる可能性があるため、コピーする際は必ずプラグイン公式ページの「Shortcode」を確認してください。
WordPress標準ブロックで目次を手動作成する手順
特定の記事だけに小さな目次を置くなら、プラグインを使わず手動で作成できます。見出しにHTMLアンカーという目印を付け、その目印へリストからリンクします。
HTMLアンカーは、ページ内の特定の場所へ直接移動するための名前です。たとえば「設定方法」という見出しへ目印を付けると、同じページの目次からその見出しへ移動できます。
見出しへHTMLアンカーを設定する
- 投稿編集画面で、移動先にする見出しブロックを選択します。
- 右側の設定サイドバーで［高度な設定］を開きます。
- ［HTMLアンカー］へ半角英数字とハイフンを使った名前を入力します。
- 同じ記事内で重複しない名前を付けます。
たとえば「プラグインを使う」という見出しなら、内容が分かる短いアンカー名にします。空白、日本語、記号を混ぜるより、半角英数字とハイフンで統一すると管理しやすくなります。
WordPress公式ドキュメントでも、HTMLアンカーは特定のブロックへ直接リンクするための固有のアドレスとして説明されています。設定欄が見つからない場合は、高度な設定の公式解説を確認してください。
リストから見出しへリンクする
- 記事の冒頭へ「目次」という見出しを追加します。
- その下へリストブロックを追加し、見出し名を項目として入力します。
- 項目の文字を選択し、ツールバーのリンクボタンをクリックします。
- 先ほどのアンカー名の先頭に「#」を付けたリンク先を入力します。
- 各項目を同じ手順で設定し、プレビューで移動を確認します。
手動の目次はシンプルですが、見出しを追加・削除・変更しても自動では更新されません。記事を直したときは、目次の項目とリンク先も一緒に見直してください。
テーマの目次機能を使う場合
Cocoonなど、一部のWordPressテーマには目次の自動作成機能があります。利用中のテーマに機能がある場合は、目次プラグインを追加する前にテーマの公式マニュアルを確認しましょう。
テーマの目次機能は設定をまとめやすい反面、別のテーマへ変更すると使えなくなることがあります。将来テーマを変更する予定があるなら、移行時に目次の表示方法を切り替える必要があることも覚えておいてください。
無料テーマの特徴と選び方は、次の記事で比較しています。
目次が表示されないときの確認ポイント
見出しの数が表示条件に届いていない
目次プラグインには「見出しが何個以上なら表示する」という条件があります。短いテスト記事で表示されない場合は、設定した見出し数と表示条件を比較してください。
文字を見出しブロックにしていない
段落の文字を太くしただけでは、自動生成の対象になりません。編集画面でブロックの種類が「見出し」になっているか、H2やH3が設定されているか確認します。
投稿タイプが対象外になっている
投稿では表示されるのに固定ページでは表示されない場合、Enable SupportやAuto Insertで固定ページが対象になっていない可能性があります。目次を表示したい投稿タイプだけにチェックを入れてください。
テーマとプラグインの目次が重複している
目次が2つ表示される場合は、テーマと目次プラグインの両方が有効になっていないか確認します。どちらか一方へ統一し、キャッシュを削除してから再読み込みしてください。
リンクを押しても見出しへ移動しない
手動作成では、リンク先の先頭に「#」があるか、見出し側のHTMLアンカーと同じ文字列かを確認します。大文字と小文字、ハイフンの有無、重複にも注意してください。
読みやすい目次にするためのポイント
長すぎる見出しを短くする
目次は記事の地図です。見出しが文章のように長いと、一覧性が下がります。「何について説明する章か」が分かる長さに整えてください。
表示する階層を増やしすぎない
H4やH5まで目次へ入れると、項目が多くなりすぎることがあります。初心者向けの記事では、まずH2とH3で全体像が伝わるか確認しましょう。
スマートフォンで押しやすくする
項目の間隔が狭すぎると、別のリンクを誤って押しやすくなります。文字サイズ、行間、左右の余白を確認し、目次全体が画面からはみ出さないようにします。
目次だけで読了率が上がると考えない
目次は読みやすさを助けますが、内容そのものの代わりにはなりません。冒頭で結論を伝え、見出しと本文の内容を一致させ、同じ説明を繰り返さないことも大切です。
WordPressの目次についてよくある質問
目次はすべての記事に必要ですか？
必要ではありません。見出しが少ない短い記事では、目次が本文より目立ってしまうことがあります。記事の長さと見出し数に応じて表示条件を設定してください。
目次はSEOに効果がありますか？
目次を置くだけで検索順位が上がるとは限りません。ただし、見出し構造が整理され、読者が必要な情報へ移動しやすくなることは、記事の使いやすさにつながります。検索キーワードを不自然に目次へ詰め込まないでください。
目次プラグインを複数入れてもよいですか？
同じ役割のプラグインを複数有効にする必要はありません。表示の重複やリンクの競合を避けるため、比較はテスト環境で行い、使うものを一つに絞ります。
まとめ
WordPressで複数の記事へ目次を付けるなら、見出しから自動生成するEasy Table of Contentsなどのプラグインが便利です。利用中のテーマに目次機能がある場合は、重複を避けるためテーマ側の機能を先に確認します。
特定の記事だけなら、見出しブロックへHTMLアンカーを付け、リストからリンクする手動作成もできます。どの方法でも、H2とH3の階層を整え、パソコンとスマートフォンでリンクと表示を確認しましょう。
プラグインの選び方や安全な追加手順を確認したい方は、次の記事も参考にしてください。