WordPressに目次を設置する方法をご紹介

簡単に記事の作成・編集ができるWordPress。
今回は、WordPressでの目次の作り方をご紹介いたします。
目次の作成は、ユーザビリティの向上だけではなく、Googleのサイト評価にも大きく関わってくる要素のひとつです。作成方法としては、大きく分けてプラグインを使う方法とプラグインを使わない方法の二種類があります。

ここでいうプラグインとは、IT用語で「アプリケーションの機能を拡張するプログラム」のこと。この機能をWordPressにインストールすることで、目次の作成が可能となります。

特別な理由がない限りは、プラグインを使った目次作成がおすすめです。プラグインを使わずにタグを直接編集すると、コーディングミスが起きたり、Googleの検索結果画面に目次が表示されなくなったりする場合があるためです。

記事に目次を付けるメリット

WordPressで投稿する記事には、任意の箇所に目次をつけることができます。読者が目的の情報にたどり着きやすくなったり、Googleの検索結果にサイト構造を伝えたりと、目次をつけることで様々なメリットがあります。

メリット①：記事の内容が分かりやすくなる

WEBで記事を読む際に、目次があると記事の内容をすぐに把握することができます。情報量の多いWEBの世界で、ユーザーが必要としている記事の見つけやすさはとても大切なこと。目次をつけることでユーザーが求めている情報を得やすくなり、ユーザビリティを高めることができるのです。

メリット②：すぐに読みたい箇所へジャンプできる

目次にアンカーリンクを設定することで、クリックをすると記事の該当箇所にジャンプすることができます。仮に目次がない場合、必要な情報が記載されている個所に辿り着くまで、数千字～数万字を読まなくてはなりません。ユーザーが求めている情報をいち早く提供できるという点から、メリットがあるといえます。

メリット③：Googleの検索結果に情報が反映される

目次があると、Googleの検索結果画面において、ページタイトルの下に情報が掲載されます。そのため、ユーザーは記事を読む前にどのようなことが書いてあるのかを大まかに把握することができるのです。自分に必要な情報があると判断しやすくなるため、記事へのCTR（クリック率）を高めることができます。

WordPressを使った目次の作り方

WordPressで投稿した記事に目次をつける場合、プラグインを使う方法と、プラグインを使わない方法があります。基本的にはプラグインを使う方が簡単でミスなく目次が作れるためオススメです。

プラグイン「Table of contents plus」を使って目次を作る方法

「Table of contents plus」とは？

冒頭でもお伝えした通り、プラグインとはアプリケーション機能を拡張するプログラムのことです。ここでは、「Table of contents plus」というプラグインを使った目次の作成方法をご紹介します。
「Table of contents plus」は、WordPressで目次の作成を行う際の定番プラグインのひとつで、記事内にある見出し（h1～h6）をもとに目次を生成します。そのため、既存の記事に見出しがないと、目次が反映されないので注意が必要です。

「Table of contents plus」の導入方法

導入方法としては、WordPressの管理画面の「プラグイン＞新規追加」をクリックし、「Table of contents plus」を検索します。検索後、インストール＆有効化をすることで導入完了となります。

「Table of contents plus」の設定方法

①位置
記事のどの箇所に目次を作成するかを設定することができます。デフォルトでは「最初の見出しの前」となっており、こだわりがない場合はこのままの設定で問題ありません。

②表示条件
目次を自動生成するために必要な見出し数を決めることが可能です。2～10個の間で自由に選ぶことができます。また、ここで設定した数に見出しが満たない場合、目次は自動生成されないので注意しましょう。

③以下のコンテンツタイプを自動挿入
どのタイプのページに目次を生成するかを選ぶことができます。投稿記事に自動挿入したい場合は「post」、固定ページに自動挿入したい場合は「page」にチェックを入れるなど、カスタマイズが必要です。

④見出しテキスト
目次の上に表示するテキストを設定することができます。チェックボックスのチェックを外せば、「テキストなし」の設定にすることも可能です。

⑤階層表示
見出しになっているh2やh3を目次の小見出しとして表示させるためのチェックボックスです。

⑥番号振り
目次の頭に番号を表示させたい際にチェックを入れましょう。

⑦スムーズ・スクロール効果を有効化
目次をクリックした時に、該当箇所へジャンプではなくスクロールで移動させるための設定が可能です。

⑧外観
目次の横幅や文字のサイズなどを、カスタマイズすることができます。

上記の基本設定が完了したら、目次が自動生成されるようになります。

ブロックエディタ「Gutenberg（グーテンベルク）」を使って目次を作る方法

「Gutenberg」とは？

「Gutenberg」とは、WordPress5.0より搭載された新しいテキストエディタのことです。目次の作成だけではなく、画像や動画を含んだリッチコンテンツを初心者でも簡単に作成することができます。

「Gutenberg」の導入方法

WordPress5.0以降は、デフォルトエディターとして搭載されているためインストールなどの作業は不要です。5.0より前のバージョンを使用している場合は、プラグインとしてリリースされているので、管理画面の「プラグイン＞新規追加」から「Gutenberg」を検索してください。インストール＆有効化することでWordPressをバージョンアップすることなくGutenbergを使用することができます。

「Gutenberg」での目次作成方法

Gutenbergでは、ブロックを組み合わせてコンテンツを作成していきます。目次作成も同様に、リストブロックという項目を作成することで生成が可能です。

①リストブロックで目次を作成
管理画面の「投稿＞新規追加」から、投稿編集画面を表示します。「＋（ブロックの追加）＞一般ブロック＞リスト」をクリックし、リストブロックを追加してください。ここに目次の項目を入力していきます。

②各項目にアンカーリンクを設定する
アンカーリンクとは、ページ内の該当箇所にジャンプできるリンクのことを指します。目次にアンカーリンクを設定することで、ユーザーが求めている情報をすぐに提供することができるのです。

設定手順としては、まずジャンプ先の見出しブロックにカーソルをあわせます。この状態のまま、右側に表示されるブロックパネル内にある「高度な設定」をクリックしてください。「HTMLアンカー」の入力欄が出てくるので、ここにアンカータグ（aタグ）名を入力しましょう。アンカータグとはページ遷移によく使われるタグで、別名aタグと呼ばれています。
ジャンプ先の見出しにHTMLアンカーを設定したら、次に該当箇所の目次にアンカーリンクタグを設定します。

アンカーリンクを付けたい目次項目をドラッグし、ツールバーにある「リンク」をクリックしてください。すると、下にブロックが表示されるので、先ほど設定したHTMLアンカーを入力します。その際に、必ずアンカーの先頭に「♯」を付けましょう。これを付け忘れると、正しくリンク設定がされない場合があります。

タグ直打ちで目次を作る方法

プラグインを使わず、タグを使用して直接WordPressの記事上で目次を作る方法をご紹介します。タグの直打ちの場合、見出しタグに目次タグを埋め込むことで目次の作成が可能です。

➀見出しタグでテキストを囲む
WEBページのスタイルが指定さえているCSSで目次の作成を行う場合は、目次にしたい部分を、見出しタグ（以下参照）で囲みます。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<h2 id=”●●●”>見出し1</h2>
<h2 id=”■■■”>見出し2</h2>
<h2 id=”▲▲▲”>見出し3</h2>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
記号になっている部分は、任意で設定が可能なので、自身が分かりやすいものを記載してください。

②記事の冒頭に目次タグを記載
見出しの設定が完了したら、次に目次タグを記事の冒頭に作成します。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<h2>目次</h2>
<ol>
<li><a href=”#●●●”>見出し1</a></li>
<li><a href=”#■■■”>見出し2</a></li>
<li><a href=”#▲▲▲”>見出し3</a></li>
</ol>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
記号の部分は、見出しタグで使用したテキストと同じものを用いることで、アンカーリンクの設定がされます。この時、冒頭に「♯」を付け忘れないよう注意してください。「♯」を付け忘れてしまうと、アンカーリンクが正しく設定されない場合があります。

プラグインを活用してキレイで使いやすい目次をつくろう

今回ご紹介したどの方法で目次を作っても、見た目に大きな違いはありません。しかし、プラグインを使用すると検索画面に情報が表示されるため、Googleの評価に差がでる場合があります。そのため、特別なこだわりがなければ「キレイ・簡単・評価が高い」とされているプラグインを使用した作成がおすすめです。
SEO対策やユーザビリティ向上の観点からも、ぜひ目次を用いた記事を作成してみてください。