WordPress目次の作り方｜プラグインあり・なしの方法

WordPressの目次は、記事内の見出しを一覧にし、読みたい位置へ移動しやすくするナビゲーションです。長い解説記事では役立ちますが、見出しが2つしかない短い記事へ大きな目次を置くと、本文より目立つことがあります。

作り方は、プラグインで自動生成する、テーマ機能を使う、アンカーリンクを手動で設定する、の3つです。この記事では選び方から表示されない場合の確認まで説明します。

WordPressの目次は必要？設置する判断基準

目次が向くのは、内容が複数の話題に分かれ、見出しを見れば目的の箇所を選べる記事です。手順記事、用語集、比較記事、よくある質問が多いページでは、ページ冒頭から必要な節へ移動できます。

一方、短いお知らせ、写真中心のページ、見出しが少ない記事では必須ではありません。自動挿入を全投稿へ有効にする前に、最低見出し数や投稿タイプを設定し、不要な記事で非表示にできるか確認します。

目次は文章の「見出し」から作られます。列と行で情報を比べる「表」とは別のものです。比較データを本文へ入れたい場合は「表の挿入と作り方」を確認してください。

設置を決めるときは、文字数より「途中から読めるか」を見ます。最初から順に読まないと意味が通らない短い物語や告知は、長くても目次が不要な場合があります。反対に、項目ごとに独立した回答がある記事は、それほど長くなくても目次が役立ちます。

閲覧データがあるサイトでは、記事内リンクの利用、離脱位置、問い合わせ前に読まれる節を確認します。目次を追加した前後で、必要な情報へ到達しやすくなったかを見て、単にクリック数が増えたことだけを成功としません。

WordPressで目次を作る3つの方法

方法	向く人	長所	注意点
プラグイン	多数の記事へ自動表示したい	条件、階層、開閉などを設定しやすい	更新、競合、表示速度を確認
テーマ機能	使用テーマに目次機能がある	デザインをテーマに合わせやすい	テーマ変更で機能や設定が変わる
手動	少数ページだけ細かく調整したい	追加プラグインが不要	見出し変更時にリンクも直す必要がある

まず使用中のテーマに目次機能がないかを調べます。テーマ機能があるのに別の目次プラグインを有効にすると、目次が二重に表示されることがあります。

サイト全体で必要な機能を整理しながら選ぶ場合は「おすすめプラグイン」も参考になります。目次だけのために高機能な製品を複数入れず、現在のテーマと編集方法に合うものを一つ選びます。

3つの方法を併用する場合は優先順位を決めます。通常記事はテーマ機能、長いマニュアルだけ手動目次、といった使い分けは可能です。ただし、同じページで自動目次と手動目次が同時に出ないよう、記事単位の無効化設定を確認します。

将来テーマを変更する可能性が高いなら、テーマ依存の設定が消えたときの影響を見ます。プラグインを選ぶ場合も、ショートコードを本文へ大量に残す方式か、無効化後に本文だけが残る方式かを確かめます。

プラグインで目次を作る方法

一般的な目次プラグインは、本文中のH2、H3などを解析し、それぞれへのアンカーリンクを生成します。記事ごとの表示・非表示、最低見出し数、挿入位置、対象投稿タイプ、階層表示、開閉などを設定できます。

導入手順は次のとおりです。

1. 使用テーマに目次機能がないか確認する
2. バックアップを取り、ステージングでプラグインを試す
3. 公式ディレクトリで提供元、更新日、対応WordPressを確認する
4. インストールして有効化する
5. 対象投稿タイプ、最低見出し数、表示階層を設定する
6. 長い記事と短い記事の両方で表示を確認する
7. スマートフォン、キーボード操作、印刷表示を確認する

見出しを拾う範囲を広げすぎると、サイドバーや関連記事の見出しまで入る場合があります。本文のどの領域を解析するプラグインか、使用テーマとの互換性を確認してください。

自動生成は、記事の見出しが意味のある順番で作られていることが前提です。文字を大きくするためにH2を使ったり、H2の直下でH4へ飛んだりすると、目次の階層も不自然になります。プラグイン設定で隠す前に、本文の構造を直します。

ページビルダー、ACF、タブ、アコーディオン内の見出しは、プラグインによって取得できない場合があります。画面に見える見出し数と、目次が解析するHTMLの範囲が一致するかをテストします。

目次プラグインの選び方

機能一覧より、記事の編集方法との相性を見ます。選定時には次を確認します。

• 投稿、固定ページ、カスタム投稿タイプを個別に指定できるか
• 自動挿入と任意位置へのブロック・ショートコードを選べるか
• H2だけ、H2とH3など表示階層を決められるか
• 特定見出しを除外できるか
• 記事単位で表示を止められるか
• 開閉ボタンをキーボードで操作できるか
• 同じアンカーIDを重複生成しないか
• キャッシュやページビルダーと併用できるか
• 開発とセキュリティ更新が継続しているか

固定表示や追従表示は便利ですが、スマートフォンの画面を覆うことがあります。広告、ヘッダー、Cookie案内と重なる場合は、追従を使わない、表示位置を変えるなどの調整が必要です。

HTMLへ追加する量とスクリプトも確認します。単純な本文内目次に大きな外部ライブラリは不要な場合があります。実際のページで読み込みファイル、レイアウトのずれ、操作までの時間を比較し、機能数だけで選ばないでください。

サポート掲示板では、現在のWordPressと同じバージョンで未解決の問題がないかを見ます。利用数や評価が高くても、自分のテーマ、ページビルダー、多言語機能と組み合わせた互換性は別に確認します。

Easy Table of Contentsの基本設定

Easy Table of Contentsは、投稿、固定ページ、対応するカスタム投稿タイプの見出しから目次を自動生成できるプラグインです。投稿タイプ、自動挿入、挿入位置、見出しレベル、階層、開閉、記事ごとの除外などを設定できます。

基本設定は次の順で行います。

1. 管理画面の「プラグイン」でEasy Table of Contentsを検索し、有効化する
2. 「設定」の目次設定を開く
3. 表示する投稿タイプを選ぶ
4. 自動挿入を使うか、任意位置のショートコードを使うか決める
5. 表示する最低見出し数を設定する
6. 見出し階層をH2とH3など必要な範囲に絞る
7. タイトル、開閉、番号、幅、色をテーマに合わせる

ショートコードを使う場合は、目次を置きたい位置へez-tocショートコードを挿入します。設定画面やショートコードの名称はバージョンで変わる可能性があるため、現行の公式配布ページとプラグイン内ヘルプを確認してください。

有効化後は、H2だけの記事、H3を含む記事、同じ見出し名がある記事を試します。更新前には変更履歴を読み、ステージングでレイアウトとアンカーを確認します。

設定を一度に変えると原因を追いにくいため、最初は対象投稿タイプ、最低見出し数、H2・H3だけを決めます。その後、開閉、番号、スムーズスクロール、除外条件を一つずつ調整します。記事単位の設定が全体設定を上書きする場合は、優先関係を記録します。

見出しの番号を本文側でも手入力している場合、プラグインの番号表示を有効にすると「1. 1.」のように重複します。番号は本文と目次のどちらで管理するかを決めます。

テーマ機能で目次を作る方法

Cocoon、SWELLなど、目次機能を持つテーマがあります。テーマ側で最低見出し数、表示階層、開閉、記事ごとの非表示を設定できる場合は、追加プラグインを入れずに済みます。

設定場所はテーマごとに異なります。カスタマイザー、テーマ設定、投稿編集画面の個別設定、専用ブロックなどを公式マニュアルで確認してください。似た名称の子テーマや追加プラグインが必要な機能もあるため、利用中の製品とバージョンを確かめます。

テーマ変更を予定している場合は、目次が消える、設定が引き継がれない、アンカーURLが変わる可能性があります。目次機能をテーマへ依存させるか、独立プラグインへ任せるかを、サイトの更新計画で決めます。

テーマ設定を使う場合も、公式マニュアルの対象バージョンを確認します。古い記事のスクリーンショットと現在の管理画面で場所が違うことがあります。テーマ独自の目次ブロックや投稿個別設定がある場合は、全体設定との優先順位を試します。

子テーマのCSSで目次を装飾するときは、テーマ更新後のHTML構造変更に注意します。要素のクラスへ過度に依存した指定は崩れやすいため、変更履歴を確認し、ステージングで更新テストを行います。

プラグインなしで目次を手動作成する方法

ブロックエディターでは、見出しブロックにHTMLアンカーを設定し、リストからそのIDへリンクできます。3つの見出しへ移動する例なら、次のように作ります。

1. 移動先の見出しブロックを選ぶ
2. 右側の「高度な設定」でHTMLアンカーへ英数字のIDを入れる
3. ページ冒頭にリストブロックを置き、見出し名を並べる
4. 各リスト項目へ、先頭に#を付けたアンカーをリンクする
5. プレビューでクリックし、正しい見出しへ移動するか確認する

たとえばIDをpluginにした場合、同じページ内のリンク先は#pluginです。IDはページ内で重複させず、空白を含めません。日本語IDも使える場合がありますが、共有や保守を考えると短い半角英数字とハイフンが扱いやすいでしょう。

見出しブロックの階層とアンカー設定は「見出しの作り方」で詳しく確認できます。見出し名を変えてもIDを維持すれば古いリンクは動きますが、リンク文字と内容がずれるため、目次側も更新します。

手動目次では、見出しを追加・削除したときに自動では追従しません。記事の更新チェックへ「目次と見出しの一致」を加えます。ほかの記事やメールから特定の節へリンクしている場合は、アンカーIDを変えるとリンクが切れるため、表示名の変更とIDの変更を分けて考えます。

固定ヘッダーがあるサイトでは、移動先の見出しがヘッダーの裏へ隠れることがあります。テーマのスクロール余白設定やCSSのscroll-margin-top相当を使い、パソコンとスマートフォンで確認します。URL末尾に#アンカーを付けて直接開いた場合も同じ位置へ移動できるかを試します。

読みやすい目次にする設定

目次は、全見出しをそのまま詰め込めばよいものではありません。大きな節だけで全体像が分かるならH2まで、読者が細かい手順へ直接移動する必要があるならH3まで表示します。H4以下まで並べると長くなりやすいため、記事構造そのものを見直します。

表示位置は導入文の直後が一般的ですが、結論の前に大きな目次が割り込む場合は位置を調整します。目次タイトル、開閉ボタン、現在位置の表示は、本文と区別でき、操作方法が分かる表現にします。

スマートフォンでは、初期状態を閉じる、最大高さを設けるなどの方法があります。ただし閉じた状態でも「目次」と認識でき、キーボードと画面読み上げで操作できることを確認してください。

目次の項目名は見出しから取られるため、見出しだけ読んでも内容が分かる表現にします。「ポイント」「詳細」のような語が続くと、目次から違いを判断できません。長すぎる見出しはスマートフォンで何行にもなるので、意味を保ったまま簡潔にします。

階層のインデントは、H2とH3の関係が視覚だけでなくHTMLのリスト構造でも伝わることが理想です。文字色だけで階層を示さず、番号や余白を組み合わせます。現在位置の強調は、色だけに依存しない表示を検討します。

開閉状態をCookieやローカルストレージへ保存する機能がある場合は、プライバシー方針とキャッシュへの影響を確認します。利用者が閉じた目次を再び開くボタンが見失われないようにします。

WordPressの目次が表示されないときの対処

表示されない原因は、見出し数、対象投稿タイプ、挿入方法、テーマ競合に分けて確認します。

1. 本文が見出しブロックで作られ、単なる太字ではないか
2. 設定した最低見出し数を満たしているか
3. 投稿または固定ページが対象になっているか
4. 記事個別の「目次を表示しない」が有効でないか
5. 自動挿入の位置がテーマで出力される領域にあるか
6. ショートコードや目次ブロックを正しく置いたか
7. キャッシュを消しても表示されないか
8. テーマ機能と別プラグインが競合していないか

目次は出るが移動しない場合は、アンカーIDの重複、JavaScriptのエラー、固定ヘッダーによる隠れ、遅延読み込みを確認します。同じ名前の見出しが複数ある記事では、生成されたIDが一意になっているかを実際のHTMLで確かめます。

切り分けのためにプラグインを停止する場合は、本番で一括停止せず、ステージングで一つずつ試します。設定を初期化する前に、画面メモやエクスポートで元へ戻せる状態にします。

目次に「まとめ」しか出ないなど一部だけ欠ける場合は、見出しレベルの対象、除外語、CSSクラスによる除外を調べます。ブロックエディターでは見出しに見えても、カスタムHTML内で正しく閉じられていないタグが後続構造を壊すことがあります。

クリックすると別ページへ移動する場合は、base要素、キャッシュされた古いURL、相対リンクの生成を確認します。日本語や記号を含むアンカーでブラウザごとに挙動が違う場合は、短い英数字IDへ変更し、既存共有リンクへの影響を確認します。

ログイン中だけ表示されない、またはその逆なら、管理バーの高さ、ページキャッシュ、権限別コンテンツを切り分けます。目次の生成結果をキャッシュする製品では、記事更新後に目次キャッシュも再生成する必要があります。

目次とSEOの関係

目次を置くだけで検索順位が上がるとは限りません。目次の価値は、ページの内容を把握し、必要な節へ移動しやすくすることです。見出しと本文が質問に答えていなければ、目次だけ整えても改善にはなりません。

アンカーリンクは、ページ内の特定位置を共有しやすくします。検索結果がページ内の見出しを示すこともありますが、表示は検索エンジンが判断するため保証できません。

目次用プラグインが構造化データを追加する場合は、テーマやSEOプラグインと重複していないかを確認します。不要なschema、隠しリンク、過剰なキーワードを追加する設定は避け、実際に見える見出しと目次を一致させます。

検索エンジン向けに見出しを増やすのではなく、読者の疑問が変わる地点で見出しを作ります。目次の項目数を多く見せるために同じ説明を細分化すると、本文を行き来する回数が増えます。ひとつの節で答えられる内容はまとめます。

ページ内リンクへアクセス解析のイベントを付ける場合は、個々のクリックを順位の代理にせず、読了、問い合わせ、次ページへの移動とあわせて見ます。計測用スクリプトが目次の通常操作やプライバシー設定を妨げないようにしてください。

よくある質問

まとめ

WordPressの目次は、長い記事の見出しを一覧にし、必要な節へ移動しやすくする機能です。多数の記事へ同じ条件で入れるならプラグイン、テーマに機能があればテーマ設定、少数ページを細かく調整するなら手動アンカーが向きます。

導入時は、最低見出し数、対象投稿タイプ、H2・H3の範囲、開閉、記事ごとの非表示を調整してください。表示されないときは、見出しブロック、件数条件、対象ページ、個別設定、キャッシュ、競合の順に確認します。順位のためではなく、記事内を迷わず読めるように使うことが基本です。