WordPress（ワードプレス）で目次を作成する方法【プラグインあり・プラグインなし】

更新日: 2020年09月08日

記事に何が書いてあるのかを記事冒頭でひと目でわかるようにする目次。WordPress（ワードプレス）でWebサイトやブログを作成している場合、有料テーマであれば目次機能は搭載されているものが多数ですが、無料テーマでだと目次の表示は自分で設置しなければいけないものもあります。

この記事ではWordPressで目次を作成する方法紹介します。プラグインを使って作成する方法とプラグインなしで作成する方法をそれぞれ解説しますので、ぜひ参考にしてください。

目次は必要？Webサイトやブログで目次を表示するメリットとは

まずはWordPressサイトに目次は必要なのか、そのメリットを紹介します。

Webページやブログの内容がひと目でわかる

まず目次を設置する大きなメリットとして、そのページの内容がひと目でわかる点が挙げられます。Googleをはじめとする検索エンジンを利用するユーザーの多くは、疑問や問題点を解決するためにページにWebサイトやブログを訪れ、自分の探している情報が含まれているページなのかを重要視してサイトを選別します。

Googleは、ユーザーファーストなWebページを求めています。目次があるから検索順位が優位になるということはありませんが、目次で“すぐに何が書いてあるのかを判断できる”方が、よりユーザーファーストなWebページであると判断できるでしょう。

目的の内容（見出し）部分まで記事を飛ばせる

特定の情報のみを求めているユーザーが、1万文字以上で書かれているページの全文を読むことは稀です。目次が設置してあると、その1万文字の中から求めている情報が書いてある部分（見出し）までページを飛ばして読めるため、ユーザービリティが高まります。

ページの滞在時間が長ければSEOとして評価がいいと言われますが、Googleはそのページで検索を終えたラストクリックも観測していますので、ユーザーの求める情報を素早く提供することもSEOとしてプラスになると考えられます。

検索結果に目次が表示される

上記のようにGoogle検索でページタイトルの下に見出しが表示されていることを目にしたことがある方も多いのではないでしょうか。

これは見出しが設置してあるページだけで表示される検索結果で、ユーザーは自分の求めている情報が書かれている確率が高いと判断し、結果としてCTR（クリック率）が高くなるなどの効果があります。

WordPress（ワードプレス）で目次を作成する方法

WordPressで作っているWebページに目次を作成する方法は、

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

の2種類があります。この記事では、「プラグインあり」「プラグインなし」の両方のパターンで目次作成の方法を紹介します。

プラグインを使って目次を作成する方法

では実際に目次を作成する方法を解説していきます。
目次を作成するプラグインは複数ありますが、Table of Contents PlusとEasy Table of Contentsが定番のため、この記事ではその2つのプラグインを紹介します。

Table of Contents Plusを使って目次を作成する

Table of Contents Plusは目次を作成するプラグインで、過去記事全てに反映、h2やh3の見出し構造を自動で判定して階層として表示可能なため、多くのユーザーに利用されています。

Table of Contents Plusは現在、WordPressのプラグイン検索画面から表示することができませんので、以下のリンクからzipファイルをダウンロードし、解凍せずそのままWordPressにアップロードします。

Table of Contents Plus

Table of Contents Plusの設定項目は以下になります。

【位置】
目次を表示する位置を設定します。
特別なこだわりがない限りはデフォルトの「最初の見出しの前」のままで問題ありません。

【表示条件】
「見出しが何個以上で目次を表示する」という設定です。2〜10の間で自由に設定できます。

【以下のコンテンツタイプを自動挿入】
目次を表示させるページのタイプを選択する設定です。
デフォルトではpage（投稿）のみになっていますので、固定ページなどにも目次を表示させる場合には必要に応じてチェックを入れます。

【見出しテキスト】
目次の上に表示するテキストを指定する設定です。

【階層表示】
h2やh3を階層として表示する場合にはチェックを入れます。チェックを入れていおくことをおすすめします。

【番号振り】
目次の先頭に番号を表示させる場合にチェックを入れます。

【スムーズ・スクロール効果を有効化】
目次をクリックした際に、該当の見出しまでジャンプではなくスクロールで移動する場合にはチェックを入れます。

【外観】
目次の外観を好みにカスタムできます。

これらの設定が完了したら、該当の記事に自動で目次が表示されます。

Easy Table of Contentsを使って目次を作成する

続いてEasy Table of Contentsを使って目次を表示する方法です。
Easy Table of ContentsはWordPressからダウンロード可能なため、プラグインの検索窓から直接入力してインストール・有効化します。

Easy Table of Contentsも設定内容としてはTable of Contents Plusと同様ですが、Table of Contents Plusよりも詳細な設定が可能です。
Easy Table of Contentsは日本語対応しているため、設定は迷わずできるかと思います。
Table of Contents Plusと同様に、自動で該当の記事に目次が表示されますので、個別の設定等は不要です。

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

続いてプラグインを使用せずに目次を作成する方法を紹介します。phpファイルを編集して目次を作成することもできますが、サイト全体の表示が崩れてしまうこともあるため、ここでは省略します。

プラグインを使用せずに目次を作成するには、まず見出しのタグに目次のタグを埋め込み、それをまとめた目次を記事冒頭で設置します。

見出しの装飾等がCSSで固定されているテーマであれば、見出しタグ（h2,h3.h4...）のみでテキストを囲います。この見出しタグを目次に対応したものに変更すると、目次からその見出しまでジャンプすることが可能になります。
見出しは以下のように記述します。

<h2 id="heading1">見出し1</h2>
<h2 id="heading2">見出し2</h2>
<h2 id="heading3">見出し3</h2>

idで指定している赤字部分（heading1.2.3）は任意で設定可能なので、自身でわかりやすいものにしましょう。

そして目次は以下のように記述します。

<h2>目次</h2>
<ol>
<li><a href="#heading1">見出し1</a></li>
<li><a href="#heading2">見出し2</a></li>
<li><a href="#heading3">見出し3</a></li>
</ol>

青字部分（heading1.2.3）は見出しで設定したものを記述することでアンカーリンクになります。目次はプラグインを使う方法と同じく、最初の見出しの前に設置がおすすめです。

プラグインありとプラグインなし、どちらで目次を作成するべき？

WordPressでWebページに目次を作る場合、利用しているプラグインの数が多すぎない、もしくはページの表示速度が気になるほど遅くない方はプラグインを利用しての作成をおすすめします。プラグインなしをおすすめできない理由は、2019年12月現在、この方法ではGoogle検索のタイトルの下に目次が表示されないためです。

Webページの読み込みが遅さがきになる場合以外は、プラグインを利用して目次を作成するのが良いでしょう。