ワードプレスの目次の作り方とは？プラグインあり・なしで解説！

「ワードプレスの記事に目次があった方が良いのかな？」とお悩みですね。

結論から言うと、ワードプレスの記事内には目次を作ることをおすすめします。

なぜなら、ユーザビリティの向上・SEO対策に繋がるからです。

今回は、ワードプレスの記事に目次を作る3つの方法を解説！

人によってどの方法で目次を作るべきかが違うので、参考にしてください。

ワードプレスで目次を作って、読みやすい記事を提供しましょう。

ワードプレスの目次の役割とは？

記事には目次を設置することをおすすめします。

なぜなら、目次には以下のような2つの役割があるからです。

ワードプレスでメディア・ブログを作るときに、目次が必要である理由を確認していきましょう。

役割１．ユーザビリティの向上

まず、目次によってユーザビリティを向上させることができます。

というのも、目次が記事の冒頭にあるだけで、どのような記事なのかを把握できるからです。

ビジネス書などを買うときと同じように、目次を見れば自分の知りたいことが知れる記事なのかの判断ができます。

見出しとリンクで繋がれていれば、ワンクリックで読みたい箇所へ移動も可能です。

たとえば、1万文字の記事を全部読むことは難しいですが、目次があるとピンポイントで読みたい箇所だけ読むことができます。

すぐに知りたい内容だけを飛ばし読みできるので、読み手にとってかなり便利です。

このように、目次があることで読み手に優しいコンテンツ作りができます。

役割２．SEO対策

ワードプレスの目次は、SEO対策にも繋がります。

なぜなら、目次と見出しのリンクがあることで、検索結果での露出をふやことができるからです。

Googleの検索結果には、サイト内リンクが表示されます。

目次を載せていれば、目次そのものが検索結果の中に出てくるようになるのです。

タイトルではコンテンツ内容の詳細が分からなくても、目次が表示されることでクリック率は上昇します。

結果的にSEO対策になるのです。

このように、目次にはユーザビリティの向上とSEO対策という役割があります。

目次の必要性が分かったところで、次の章から目次の作り方を確認しましょう。

簡単！ワードプレスの目次を作る３つの方法

ワードプレスで記事の目次を作るなら、以下の3つの方法があります。

それぞれの作り方にメリット・デメリットがあります。

自分に合う目次の作り方を確認しましょう。

方法１．プラグインを使う

プラグイン「Table of Contents Plus」を使えば、自動で目次を作ってくれます。

自動挿入にしておくと、プラグインを入れる前の記事も同じように目次の挿入が可能です。

一方、手動設定をすれば記事ごとに目次を入れるか入れないを設定できます。

オリジナルのデザインに設定することもできるので、比較的自由度は高いです。

さらに、Table of Contents Plusにはサイトマップ自動生成機能がついています。

もし、サイトマップも一緒に作りたいと考えているのであれば、Table of Contents Plusはおすすめです。

一方で、Table of Contents Plusはいつまで利用できるか分かりません。

というのも、プラグインのバージョンアップ頻度が低いからです。

もしかすると、開発側の都合でサービスがストップするかもしれません。

このようなリスクがあることを理解した上で、利用しましょう。

プラグインを使った方法で目次を作成するなら『プラグイン「Table of Contents Plus」での目次の自動生成方法』を確認しましょう。

方法２．目次機能のあるテーマを使う

目次機能が備わっているワードプレステーマ を使うことで、簡単に目次を挿入することができます。

元々目次機能のあるワードプレステーマ を選べば、余計なプラグインのインストールは不要です。

テーマで一括設定しておけば、見出しをそのまま目次にしてくれます

コンテンツ作成の度に目次を設置したり、設定する必要はありません。

リライトをしても見出しを変えれば自動的に反映してくれます。

ただし、テーマで決まったフォーマットの目次が自動生成されるため、デザインや位置の自由度は低いです。

それでも設定が楽なので、テーマを使って目次を設置する人は多くいます。

目次機能のあるテーマを使って目次を作成するなら、「cocoon」と「THE THOR」がおすすめです。

cocoonを使うなら『テーマ「cocoon」の目次機能の使い方』、THE THORを使うなら『テーマ「THE THOR」の目次機能の使い方』で目次の作成方法を確認しましょう。

方法３．テキストエディタで作る

ワードプレスのテキストエディタで作成することも可能です。

自分の好きなデザインで好きな位置に目次を設置できます。

自由度の高い目次を作りたいのであれば、テキストエディタで作成しましょう。

しかし、テキストエディタで目次を作成するには、最低限HTMLの知識が必要です。

また、コンテンツ作成やリライトの度に書き直さなければなりません。

プラグインやテーマを使った目次よりは労力がかかりますが、自分のデザインに拘りたい人にはおすすめです。

テキストエディタで目次を作成するなら『テキストエディタで目次を作る方法』を確認しましょう。

プラグイン「Table of Contents Plus」で目次を自動生成

Table of Contents Plusというプラグインを使って目次を自動生成する方法をみていきましょう。

まずは、Table of Contents Plusをインストールしましょう。

インストールできたら、ダッシュボードのメニュー「設定」→TOC＋をクリックして設定を行っていきます。

目次の自動生成をするには、基本設定の3つの箇所を以下のように設定しましょう。

位置	記事のどこに目次を設置するのかを設定
表示条件	記事を自動生成する条件の設定 ※「3つ以上見出しがあるとき」にすると、見出しが2つ以下の時に目次は自動生成されません。
以下のコンテンツタイプを自動挿入	目次を自動挿入するコンテンツタイプの設定 投稿→post、固定ページ→pageにチェック

以上で自動生成の設定は完了です。

外観で横幅や文字サイズ、プレゼンテーション（デザイン）を細かく設定できます。

もっと細かい設定をしたい人は、「上級者向け」の横にあるhideというボタンを押してみて下さい。

以下のような細かい設定ができるようになります。

見出しレベル	目次に含めたい見出しレベルの設定
除外する見出し	目次に含めたくない言葉を設定

ここまで設定して、過去記事の目次が生成されていなければ以下のことをチェックしてみましょう。

上記のことを確認すると、ほとんどの場合解消されます。

早速試してみましょう。

テーマ「cocoon」の目次機能の使い方

Cocoonは、無料で利用できるモバイルフレンドリーなワードプレステーマ です。

無料テーマなのにもかかわらず、機能性・デザイン性の高さから人気のあるテーマとなっています。

Cocoonには目次生成機能が備わっているため、プラグインをインストールする必要はありません。

目次の自動生成の設定は以下の通りに行いましょう。

以上で、目次が自動生成されるようになりました。

さらに細かい設定も可能です。

①表示の切り替えの設定

表示切り換えとは、目次を表示するかしないかをユーザーが選べるようにする設定です。

さきほどの設定画面の「目次」タグの「目次切り替え」の項目で設定ができます。

「目次の表示切替機能を有効にする」にチェックを入れ、以下の言葉を入れましょう。

開	目次を表示させるときの文言 「開く」「OPEN」など
閉	目次を表示させないときの文言 「閉じる」「CLOSE」など

また、「最初から目次の内容を表示する」にチェックを入れると、デフォルトで表示されます。

常に目次を表示させたいのであれば、「目次の表示切替機能を有効にする」のチェックを外しておきましょう。

②目次に含める見出しレベルの設定

目次に含める見出しレベルを設定することができます。

たとえば、h2の見出しだけを表示させるのか、h2・h3・h4の見出しを表示させるのかを決められるのです。

デフォルトではh6見出しまでとなっています。

先ほどの設定画面の「目次」タブから「目次表示の深さ」の項目から、「H2見出しまで」「H3見出しまで」など、表示させたい見出しレベルを指定しましょう。

③目次に表示される数字の設定

目次に表示される数字の設定もできます。

さきほどの設定画面から「目次」タブを選び、「目次ナンバーの表示」で設定しましょう。

デフォルトでは、上の見出しから順番に「１」「２」「３」と数字が振られるようになっています。

見出しに「１．ワードプレスの目次の役割とは？」と数字を打ちたいのであれば、「表示しない」に設定しましょう。

他にも、数字詳細を選ぶと「1.1.1」など見出しレベルごとに詳細な数字が割り振られるよう設定することも可能です。

自分の生地の書き方に合わせて設定しましょう。

とても簡単に目次の設定ができるので、プラグインを使いたくないならワードプレステーマ をCocoonにしましょう。

テーマ「THE THOR」の目次機能の使い方

THE THORとは、HTMLやCSSの知識なしで美しいデザインのメディアを作れる有料テーマです。

集客・収益支援の機能も充実しており、ビジネスブロガーやアフィリエイターに人気があります。

THE THORでは、記事や固定ページを投稿するたびに目次のショートコードを貼り付けて自動生成することが可能です。

過去記事もショートコードで呼び出して目次を作成する必要があるので、あらかじめ注意しましょう。

目次設定の方法は以下の通りです。

デフォルトでは「表示しない」になっているので、必ず設定を忘れないようにしましょう。

さらに、以下の設定も可能です。

目次を表示するための最小見出し数を指定	指定した数以上の見出しがある場合にのみ、目次が作成されます。 例えば、「3」としていると記事に見出しが2つしかない場合、見出しは作成されません。
目次に表示する見出しのレベルを指定	目次に表示する見出しレベルを決めます。 例えば、「3」と指定すると、h1/h2/h3の見出しが全て目次になります。
目次パネルをデフォルトで閉じておく	チェックを入れると、ページ読み込み時に目次は折り畳まれます。 ユーザーが任意で目次を表示するか決めることができます。

ここまで設定できれば、目次のショートコードが使えるようになります。

目次を入れたい部分に[outline]とコードを入れると、設置完了です。

ちなみに、固定ページにも目次を設定したい場合は、「外観」→「カスタマイズ」→「固定ページ設定[THE]」から目次の設定ができます。

投稿ページと同じように設定できるので、確認してみましょう。

テキストエディタで目次を作る方法

最後にテキストエディタで目次を作る方法を見ていきましょう。

一番簡単なHTMLは、<ul>と<li>を使う方法です。

まず、見出しはそれぞれ以下のように打ち込み、見出しにid名を付けます。

<h2 id=”A”>見出し１</h2>
<h2 id=”B”>見出し２</h2>
<h2 id=”C”>見出し３</h2>

id名を付けられたら、目次を作ります。

目次には、それぞれの見出しにジャンプできるように設定しておきましょう。

<ul>
<li><a href=”#A”>見出し１</li>
<li><a href=”#B”>見出し２</li>
<li><a href=”#C”>見出し３</li>
</ul>

<ul>と<li>を使えばリストができます。

リンクの情報はa href=””で表し、先ほど決めた見出しのidに#を付けて指定します。

目次は記事の好きな位置に設置できます。

フォーマットしてメモ帳に残しておき、いつでも簡単に目次が作れるようにしておきましょう。

まとめ

ユーザビリティの向上・SEO対策のためにも、ワードプレスには目次を作るべきです。

紹介した3つの方法の中から、自分のやりやすい方法を選んで早速作ってみて下さい。

ワードプレスで目次を作って、読みやすい記事を世の中に届けましょう。