WordPressの記事に目次を表示するには、本文の見出し構造を整えたうえで、利用中のテーマやプラグインに合った方法を選ぶ必要があります。
本記事で扱うのは、設定前の確認、表示方法、表示されない場合の切り分け、公開前の点検です。
WordPressで目次を表示する前に確認すること
最初に、目次を付ける記事と、現在利用できる機能を確認してください。準備をせずに設定を増やすと、目次が重複する原因になります。
| 対象記事 | 目次を付ける記事と、現在の見出し数を確認する |
|---|---|
| 利用中の機能 | テーマ、プラグイン、編集画面に目次機能があるか調べる |
| 見出し構造 | H2とH3が見出しとして設定され、階層が飛んでいないか確認する |
利用中のテーマやプラグインに目次機能があるか確認する
まず確認したいのは、WordPressで利用中のテーマと有効化済みのプラグインです。設定項目に「目次」があれば、追加機能を導入せずに表示できる可能性があります。
すでに目次機能が動いているなら、別の機能を追加する前に設定場所を特定してください。複数の機能を同時に使うと、目次の二重表示や設定の競合につながります。
編集画面に目次ブロックを追加できるかどうかも確認対象です。利用できる方法をひととおり把握しておけば、テーマ、プラグイン、ブロックのどれで表示するかを迷わず判断できます。
記事内の見出し数と階層を確認する
目次は通常、記事内に設定されたH2やH3などの見出しをもとに作られる仕組みです。対象の記事を開き、段落を太字にしただけでなく、きちんと見出しとして設定されているかを確かめたうえで、見出しの順序を上から確認します。
H2の直下にH3を置く構成は自然ですが、H2の次にいきなりH4へ飛ぶ構造は避けるのが基本です。
見出しが極端に少ない記事では、目次の自動表示条件を満たさないことがある点に注意してください。現時点の見出し数を把握しておくと、後で設定値と照合する際に役立ちます。
目次に反映される見出し構造を整える
目次の分かりやすさを左右するのは、本文の見出し構造です。表示設定を始める前に、H2とH3それぞれの役割を整理しておきましょう。
主要な話題をH2に設定する
記事の主要な話題や大きな区切りにはH2を使ってください。目次を開いたとき、H2だけを追って記事全体の流れがつかめる状態が理想です。
たとえば、設定方法、表示されない原因、公開前の確認というように話題が分かれているなら、それぞれをH2として独立させ、一つのH2に複数の主要テーマを詰め込まないようにします。
同じ階層の見出しは、扱う情報の大きさもそろえることが大切です。一つだけ細かな操作名になっている場合は、ほかのH2と同程度の範囲を表す名称へ見直しましょう。
H2の詳細をH3で整理する
H3は、直前のH2で示した話題をさらに詳しく分けるときに使う見出しです。H2の内容を分割する必要がなければ無理にH3を追加する必要はなく、たとえば「目次の設定」をH2にした場合、その詳細にあたる「表示位置」や「対象見出し」はH3として整理できます。
どのH2に属するのか分からないH3がある構成は、修正が必要なサインです。
細分化しすぎると、目次の項目が増えて目的の場所を探しにくくなる点に注意してください。読者が移動先を選ぶために必要な区切りだけを、見出しにしましょう。
見出しだけで内容が伝わる表現にする
目次には見出しの文言がそのまま並ぶため、「ポイント」や「詳しく解説」だけでは移動先の判断が困難です。見出し単体で、その節の内容が具体的に伝わる表現に直します。
似た表現が続く場合は、それぞれの違いを明確にしてください。「設定方法」と「設定について」を並べるより、「表示位置を設定する」と「対象見出しを設定する」とした方が内容を区別しやすくなります。
ただし、本文の内容より広い約束を見出しに持ち込むのは避け、節内で実際に答えている範囲と見出しを一致させることが重要です。
WordPressの記事に目次を表示する方法
目次の表示方法は、現在の環境で利用できる機能から選びます。次の基準で方法を決めてから、該当する設定に進んでください。
テーマの目次機能を使って表示する
利用中のテーマに目次機能がある場合は、まずテーマ側の設定画面を開いてください。目次の有効化、表示対象となる投稿、表示条件に関する項目を探しましょう。
機能を有効にしたら設定を保存し、対象記事のプレビューを開いてください。目次が自動挿入される位置と反映されている見出しを確認したうえで、設定項目の名称や場所が利用中のテーマによって異なる点も踏まえておきましょう。
見つからないときは「テーマに目次機能がある」と決めつけず、テーマ側が提供する設定画面や案内を確認する姿勢が必要です。
目次プラグインを使って表示する
目次プラグインを利用する場合は、管理画面から対象プラグインの設定を開き、目次機能が有効か、投稿が表示対象に含まれているかを確かめてください。続いて自動表示に必要な見出し数や対象階層などの条件を設定し、記事側の見出し構造と一致しているかを確認しましょう。
テーマ側にも目次機能がある場合は、どちらか一方だけを使う構成にしてください。具体的なインストールから表示確認までの手順は、次の章でまとめて説明します。
目次ブロックを記事内に配置する
編集画面で目次ブロックを利用できる場合は、対象記事を開き、ブロックの追加画面から目次に該当する項目を探してください。見つかったら、導入文の後など希望する位置に配置しましょう。
ブロックを選択し、表示対象の見出し階層や開閉状態など、利用できる設定を確認してください。不要な項目が含まれる場合は、本文の見出し構造もあわせて見直します。
ブロック方式は配置場所を指定しやすい一方、記事ごとに追加する手間がかかる場合もある点には注意が必要です。複数記事へ共通表示したいのか、特定の記事だけに置きたいのかで選ぶと迷いません。
プラグインで目次を表示する手順
ここでは「Easy Table of Contents」を例に、インストールから表示確認までの流れを説明します。ほかのプラグインを使う場合は、設定項目や画面名の違いに注意が必要です。
目次プラグインをインストールする
WordPress管理画面の「プラグイン」から「新規プラグインを追加」を開きます。検索欄に「Easy Table of Contents」と入力し、表示されたプラグインをインストールして有効化してください。
投稿を対象にして自動挿入を有効にする
プラグインの設定画面を開いたら、まず目次機能の対象として「投稿」を有効にします。次に、投稿への自動挿入をオンに切り替えてください。この時点では、固定ページなど不要な投稿タイプまで対象に含めないよう注意しましょう。
表示位置と対象見出しを設定する
続いて設定するのは、目次を自動挿入する位置、表示に必要な見出し数、対象とする見出し階層（H2のみか、H3まで含めるか）です。記事側の見出し構成と条件がかみ合っていないと、機能が有効でも目次は表示されません。
記事ごとの設定を確認する
設定を保存したら、対象記事の編集画面を開き、個別設定で目次が非表示になっていないかを確認します。最後にプレビューを開き、目次が意図した位置と内容で表示されているかを確かめてください。
手順をまとめると、次のような流れになります。
- WordPress管理画面の「プラグイン」から「新規プラグインを追加」を開く。
- 「Easy Table of Contents」を検索し、インストールして有効化する。
- プラグインの設定画面を開き、目次機能の対象として「投稿」を有効にする。
- 投稿への自動挿入を有効にする。
- 表示位置、見出し数、対象階層を設定し、記事ごとの個別設定とプレビューを確認する。
目次の表示条件と見た目を設定する
目次を表示できたら、位置、対象階層、記事ごとの表示状態を調整します。装飾に手を加える前に、目的の見出しを探しやすい設定になっているかを確認してください。
| 表示位置 | 記事の目的を伝えた後、主要な本文へ入る前を候補にする |
|---|---|
| 対象階層 | 簡潔に示すならH2、詳細な移動先も示すならH3まで含める |
| 表示・非表示 | 記事の長さと必要性を見て、全体設定と個別設定を照合する |
目次を表示する位置を決める
目次は、読者が本文の構成を確認してから読み進められる位置に置きます。導入文の直後や、最初の主要な話題に入る前は候補にしやすい場所です。
記事の先頭に置く場合でも、タイトルの直後に大きな目次が現れて本文の要点が見えにくくならないか確かめてください。短い導入文の後に配置すれば、記事の目的を伝えたうえで移動先を選んでもらえます。
同じ記事内で、自動挿入の目次と目次ブロックを併用しないでください。表示位置を変えたい場合は、現在使っている挿入方法を特定してから設定を修正します。
目次に含める見出し階層を設定する
主要な話題だけを簡潔に示したい場合は、H2を中心に表示します。H3まで見せると移動先を細かく選べる一方、項目数が増える点に注意が必要です。
長い記事でも、すべての階層を表示すれば読みやすくなるとは限りません。H2とH3で十分に内容を把握できるなら、それより深い階層は目次に含めないという判断も有効です。
階層を変更した後は、目次上の字下げや親子関係を確認してください。H3が対応するH2の下に並んでいれば、本文構造が読者に伝わりやすくなります。
記事ごとの表示・非表示を確認する
目次が役立つ長文記事では表示し、見出しが少ない短い記事では非表示にするなど、記事ごとに必要性を判断することが大切です。すべての記事に機械的に表示する必要はなく、全体設定で目次を有効にしていても投稿編集画面の個別設定で非表示になっている場合があります。
反対に、全体では非表示でも個別指定によって表示される構成になっていないかもあわせて確認してください。
設定を変更したら保存し、対象記事を改めてプレビューしてください。管理画面上の選択状態だけでなく、実際の表示結果まで確認して初めて完了といえます。
目次が表示されないときの確認ポイント
目次が表示されない場合は、設定をやみくもに変更せず、見出し数、見出し形式、機能の重複、個別設定の順に切り分けます。
見出しの数と設定した表示条件を照合する
まず、対象記事にある目次対象の見出し数を数えてください。次に、テーマやプラグインで設定した自動表示条件と照合します。
記事内の見出し数が条件に届いていなければ、目次機能が正常でも表示されない点に注意してください。原因確認のためだけに不要な見出しを増やすのではなく、条件を記事に合わせて見直しましょう。
あわせて確認したいのが、対象とする見出し階層です。記事がH3中心の構成でも、目次側でH2だけを対象にしていれば、認識される項目が不足する可能性があります。
見出しが正しく設定されているか確認する
文字を太字にしたり、文字サイズを大きくしたりしただけでは、目次用の見出しとして認識されない場合があります。編集画面で各項目の種類を確認してください。
見出しとして扱いたい箇所が通常の段落になっているなら、見出しブロックなど適切な形式に修正してください。その際は、H2の下にH3を置くという階層も崩さないようにしましょう。
修正後は記事を保存し、プレビューを再読み込みしてください。目次に新しい項目が反映されたかを見れば、見出し形式が原因だったかどうかを判断できます。
目次機能の重複と個別設定を確認する
テーマ、プラグイン、目次ブロックのうち、複数の機能を同時に使っていないかを確認します。重複している場合は、使用する機能を一つ決め、不要な方を停止してください。
続いて、対象記事の編集画面で目次が個別に非表示となっていないかを調べましょう。投稿の種類が表示対象から外れていないかも、切り分けのポイントです。
設定を直しても変化がない場合は、変更内容が保存されているかを確認したうえで、プレビューを開き直してください。一度に複数箇所を変えるのではなく、一項目ずつ結果を見ていくと原因を特定しやすくなります。
公開前に目次の表示とリンク先を確認する
設定が終わったら、実際の表示画面で目次の内容とリンク先を点検してください。編集画面に目次が見えているだけでは、確認が完了したとはいえません。
プレビューで目次の項目と順序を確認する
記事を保存してプレビューを開き、目次の項目を本文の見出しと上から順に照合してください。抜けている見出し、不要な項目、同じ意味の項目がないかを調べます。
次に、H2とH3の親子関係や並び順を確認してください。順序が不自然な場合は、目次側の見た目だけを直そうとせず、本文の見出し配置に戻って修正します。
目次を開閉できる設定を使っている場合は、初期状態もあわせて確かめてください。目次が存在していても、読者が見つけにくい表示になっていないかが判断基準です。
目次から各見出しへ移動できるか確認する
目次の最初の項目を選び、対応する見出しへ正しく移動するかを確認してください。その後も上から順にリンクを操作し、別の見出しへ誤って移動しないかを確かめましょう。
リンク先へ移動しても、見出しが画面上で分かりにくい位置に隠れていないか確認してください。目的の節をすぐ読み始められる状態になっていれば、目次としての役割を果たせています。
見出しを編集した後は、リンクの再確認も欠かせない作業です。項目名だけを更新し、移動結果を確認しないまま公開することは避けます。
パソコンとスマートフォンの表示を確認する
パソコン表示では、目次の横幅、階層の字下げ、本文との間隔を確認してください。長い見出しが不自然に折り返されていないかも見ておきます。
スマートフォン表示では、目次が画面幅からはみ出していないか、項目を無理なく選べるかを確かめてください。目次が長すぎて本文へたどり着きにくい場合は、対象階層や見出し表現を見直します。
両方の表示で項目とリンク先に問題がなければ、公開前の確認は完了です。最後に変更内容を保存し、公開または更新に進んでください。
まとめ｜WordPressで目次を表示する手順
WordPressの記事に目次を表示するには、H2とH3の階層を整え、テーマ、プラグイン、目次ブロックの中から利用環境に合う方法を選びます。表示位置、対象階層、記事ごとの表示状態も忘れずに確認してください。
表示されない場合は、見出し数と条件、見出し形式、機能の重複、個別設定の順に切り分けてください。設定後はパソコンとスマートフォンでプレビューし、各項目から正しい見出しへ移動できることを確かめてから公開しましょう。