WordPress記事のユーザビリティを高めるなら、目次の実装がおすすめです。しかし、どのようにしてWordPressに目次を作ればよいのかわからない方も多いでしょう。
本記事では、WordPressに目次を作る方法を解説しています。また、おすすめのプラグインも紹介しているので、目次の導入を検討している方は、ぜひ参考にしてみてください。
WordPressに目次を入れるメリット
WordPressの記事に目次を入れることには、以下のようなメリットがあります。
- 記事の全体像を瞬時に把握できる
- 読みたい見出しに直接飛べる
- SEO対策になる
これらのWordPressに目次を入れるメリットについて見ていきましょう。
①記事の全体像を瞬時に把握できる
WordPressの目次は、記事の全体像を瞬時に把握できることが大きなメリットです。読者は記事を読む際、まず自分が関心のある情報が含まれているかを知りたいと考えます。
そのため、目次があれば記事の構成から目的の内容が含まれているのかどうかを知ることができます。一方で、目次がなければ、必要な情報を探すためにスクロールする手間が発生するため、途中で離脱されてしまう原因となるでしょう。
②読みたい見出しに直接飛べる
WordPressに目次があると、読みたい見出しに直接飛べる点がメリットです。目次の見出しをクリックするだけで、該当箇所まで自動でジャンプできるため、知りたい情報へ素早くアクセスできます。
特に、記事のボリュームが多い場合は、すべてをスクロールして探す必要がなくなるため、ユーザビリティの向上につながります。
③SEO対策になる
WordPressに目次を設置することで、SEO対策につながる点もメリットです。目次によって読者が情報を探しやすくなることで、ユーザビリティの向上が期待できます。
その結果、滞在時間の増加や、離脱率の低下につながります。読みやすい記事は検索エンジンからも評価されやすいため、WordPressブログの集客率向上に役立つでしょう。
また、WordPressを導入したが、なにから始めたらよいかわからないという方には、WordPressセミナーがおすすめです。WordPressセミナーでは、複数ジャンルのサイト制作を行いながら、WordPressの基本的な使い方やカスタマイズ方法を学習できます。
WordPressで目次を作る方法
以下は、WordPressで目次を作る主な方法です。
- プラグインを使う
- 自力で挿入する
- テーマの標準機能を活用する
これらのWordPressで目次を作る方法の特徴について見ていきましょう。
①プラグインを使う
プラグインを使う方法は、初心者でも簡単に目次を作成できるのが特徴です。プラグインとは、WordPressに新しい機能を持たせることができる拡張ツールのことで、プラグインを使えば専門知識を持っていなくても、WordPressに目次機能を気軽に実装できます。
また、無料で使えるプラグインも多く、コストをかけずに導入できる点も魅力です。
②自力で挿入する
自力で目次を作る方法は、自由にデザインを調整できる点が特徴です。リストブロックを挿入したり、HTMLを直接記述して目次を設置したりすることで、外部ツールを使わなくても目次を作成できます。
ただし、手動で設定する必要があるため、記述ミスが起こる可能性があります。また、記事ごとに目次を作成しなければならないため、記事数が多い場合は手間がかかる点に注意が必要です。
③テーマの標準機能を活用する
WordPressテーマの標準機能を活用する方法もあります。テーマによっては、初めから目次機能が内蔵されており、追加でプラグインを導入しなくても使用できます。
特に有料テーマであれば、目次のデザインや表示する見出しの数、表示階層などを設定画面から細かくカスタマイズ可能です。テーマを選ぶ際は、目次機能もあるか確認しておくとよいでしょう。
また、WordPressテーマ選びで迷っている方は、以下の記事を参考にしてください。テーマごとの特徴や選び方などを解説しています。
WordPressで目次を作れるおすすめのプラグイン
WordPressで目次を作りたいなら、以下のようなプラグインがおすすめです。
- LuckyWP Table of Contents
- Easy Table of Contents
- Table of Contents Plus
- Rich Table of Contents
これらのWordPressで目次を作れるおすすめプラグインの特徴について見ていきましょう。
①LuckyWP Table of Contents
LuckyWP Table of Contentsは、WordPressの投稿やウィジェットに目次を実装できるWordPressプラグインです。目次の階層を自由に設定できるため、柔軟なカスタマイズができます。
また、デザインテンプレートが用意されているので、目次の見た目を気軽に変更できるのもLuckyWP Table of Contentsの特徴です。
②Easy Table of Contents
Easy Table of Contentsは、投稿や固定ページに目次を自動生成できるWordPressプラグインです。目次に含める見出しや、目次を表示する条件などを指定できます。
また、特定の記事にのみ目次を表示しないようにできるなど、あると助かる細かな設定も可能です。
③Table of Contents Plus
Table of Contents Plusは、目次を自動生成できるWordPressプラグインです。設定では、目次を表示する位置や、表示する条件などをカスタマイズできます。
また、上級者向けの設定からは、目次を表示する階層や除外する目次などを指定できます。
④Rich Table of Contents
Rich Table of Contentsは、目次生成ができる日本製のWordPressプラグインです。シンプルなUIで直感的に設定を変更できるのが特徴です。
一般的な目次設定はもちろん、デザイン設定も豊富に用意されており、目次の見た目も柔軟に変更できます。
また、以下の記事では、WordPressを立ち上げたらすぐに入れたいおすすめのプラグインを厳選して紹介しています。目次以外に必要なプラグインを知りたい方は、ぜひ参考にしてください。
WordPressのプラグインで目次を作る手順
実際にWordPressのプラグインを使って、目次を作成する方法を見ていきましょう。今回は、Easy Table of Contentsを例に解説します。
①Easy Table of Contentsをインストールする
まず、Easy Table of ContentsプラグインをWordPressにインストールします。プラグインをWordPressにインストールする方法は以下のとおりです。
- WordPressの管理画面にログインする
- 「プラグイン」から「プラグインを追加」を選択する
- 検索窓に「Easy Table of Contents」と検索をかける
- 「今すぐインストール」をクリックする
- 「有効化」をクリックする
有効化を行うことで、管理画面からEasy Table of Contentsの設定を行えるようになります。
②目次の設定を行う
具体的な目次の設定を行います。サイドメニューにある「設定」から「目次」を開きましょう。
一般設定から設定できる項目と、おすすめの設定は以下の表のとおりです。
| 項目 | 説明 | おすすめの設定 |
| サポートを有効化 | 目次の有効範囲を設定する | 投稿と固定ページにチェックを入れる |
| 自動挿入 | 目次を自動挿入する投稿タイプを設定する | 投稿にチェックを入れる |
| 位置 | 記事内で目次を表示する位置を設定する | 「最初の見出しの前（デフォルト）」に設定する |
| 表示条件 | 目次を挿入する条件を設定する | 「1件以上」もしくは「2件以上」に設定する |
| Word Count Limit | 目次を表示する記事の最小文字数を設定する | 0に設定する |
| 見出しラベルを表示 | 目次の上部にラベルを表示するかを設定する | チェックを入れる |
| Toggle on Header Text | 目次を開閉できるようにするかを設定する | チェックを入れる |
| 見出しラベル | ラベルに表示するテキストを設定する | 「コンテンツ」や「目次」など、任意で設定する |
| Header Label Tag | ラベルに使用するタグを設定する | p（default）に設定する |
| Box Title | 目次ボックスの上部に表示するタイトルを設定する | 空欄のまま |
| 折りたたみ表示 | 目次右上に折りたたみ用のボタンを表示するかを設定する | チェックを入れる |
| 初期状態 | ページを表示した際に最初から目次表示させておくか、折りたたんでおくかを設定する | チェックを入れない |
| ツリー表示 | 見出しの階層によってインデントを入れるかを設定する | チェックを入れる |
| カウンター | リストの前に表示するカウンターの種類を設定する | 小数点表示（デフォルト）に設定する |
| Counter Position | カウンターと文字との間隔を設定する | 「Outside」に設定する |
| TOC Loading Method | ローディング方式を設定する | JavaScript（default）に設定する |
| スクロールを滑らかにする | クリックによる見出しへの移動を滑らかにするかを設定する | チェックを入れる |
| Exclude href from url | URLからhrefを除外するかを設定する | チェックを入れない |
| TOC AMP Page Support | AMPページでも目次をサポートするかを設定する | チェックを入れない |
一般設定のほかにも、デザイン設定も用意されているので、目次の見た目を変更したい場合は、そちらも確認してみてください。
③目次が挿入されるか確認する
Easy Table of Contentsの設定ができたら、記事を作成すると自動で目次が挿入されるかを確認してみましょう。サイドメニューの「投稿」から「新規追加」をクリックし、投稿ページに移行します。
記事作成画面から複数の見出しを設定し、画面右上のプレビューボタンをクリックして、表示を確認してみましょう。最初の見出しの上に目次が設定されていればOKです。
また、質の高いWordPressサイトを運営したいなら、WordPressセミナーで基礎から学ぶのがおすすめです。WordPressセミナーでは、プラグインの設定方法やウィジェットの配置といった基本的な内容から、PHPを使ったテーマのカスタマイズといった応用的な内容まで学べます。
セミナー名 WordPressセミナー 運営元 GETT Proskill（ゲット プロスキル） 価格(税込) 29,700円〜 受講期間 2日間 受講形式 対面（東京・大阪）・ライブウェビナー・eラーニング
WordPressで目次を作る際のコツ
WordPressで目次を作るなら、以下のコツを押さえておきましょう。
- 目次は常に展開しておく
- すべての階層を表示しない
- 導入文の直後に配置する
これらのWordPressで目次を作る際のコツについて詳しく見ていきます。
①目次は常に展開しておく
目次は、常に展開した状態で表示しておくのがおすすめです。目次機能によっては、折りたたみ表示にして画面をすっきり見せることもできます。
しかし、目次を閉じた状態では、読者が目次の存在に気づかない場合があります。また、目次を開くためにクリックやタップの手間が増えるのもデメリットです。
そのため、基本的に目次は最初から展開しておく設定にしておくとよいでしょう。
②すべての階層を表示しない
目次は、必要な階層だけを表示しましょう。見出しをすべて表示してしまうと、目次が長くなりすぎてしまい、かえって記事構成を把握しづらくなる場合があります。
階層はH3までを表示し、H4以降は非表示に設定するのがおすすめです。どの階層まで表示するかは、使用しているWordPressプラグインの設定画面から変更できます。
③導入文の直後に配置する
目次は、導入文の直後に配置するのが効果的です。記事冒頭の導入文のあと、かつ最初の見出しの前に設置することで、記事を読み始める前に構成を確認できるため、読者は自分の知りたい情報が含まれているかを素早く判断できます。
見出しから内容を把握したい読者も多いので、目次の位置が後ろにあると離脱の原因になることもあるでしょう。
WordPressの目次についてのまとめ
今回は、WordPressの目次について紹介しました。WordPressに目次を設置することで、記事の内容を把握しやすくなり、読みたい箇所へスムーズに移動できるようになります。
その結果、ユーザビリティの向上につながり、SEO対策としても有効です。WordPressではプラグインやテーマ機能を活用することで、初心者でも簡単に目次を作成できるので、ぜひ本記事を参考に実装にチャレンジしてみてください。
