WordPress プラグイン ブログを始める

【目次作成】Table of Contents Plusの設定方法・使い方【2021/5月更新】

悩んでいる人
WordPressで記事を書いていますが、目次を作成する方法を教えてください。

そんな疑問にお答えします。

文字量の多いコンテンツの場合、すべて読むのにたくさんスクロールしなければなりません。

それでは、ユーザにとっては手間ですし、目的の情報まですばやくたどり着くことができません。

そこで、それらの悩みを解決してくれるのが、WordPressプラグイン「Table of Contents Plus」です。

インストールすることで、すべてのページに目次を自動生成してくれるプラグインとなります。

今回は、Table of Contents Plusの設定方法、使い方についてご紹介します。

\当サイト使用WordPressテーマ/
サンプル
AFFINGER6

↓ こちらが今回作ることができる目次です。

Table of Contents Plusとは

Table of Contents Plusとは

Table of Contents Plusとは、WordPressで作成した記事内に目次を自動生成してくれるプラグインです。

「h1」〜「h6」で設定した見出しを反映してくれます。

主な機能は下記のとおりです。

Table of Contents Plusの主な機能

  • 各記事に目次を自動生成
  • 目次デザインをカスタマイズできる
  • 目次に表示したくない見出しを指定できる
  • 目次の表示場所を自由に設定できる
  • サイトマップを作成できる

インストールするだけで、後はプラグインが勝手に設置してくれるので自分で設置する必要はありません。

また、CSSの知識がある方は、目次デザインをカスタマイズできるので、他のサイトにないオリジナルデザインの目次を作ることも可能です。

※ちなみに、当サイトは初期設定のデザインです。

Table of Contents Plusの設定方法

Table of Contents Plusの設定方法

それでは、Table of Contents Plusの設定方法を見ていきましょう。

今回の手順は、以下のとおりです。

簡単な流れ

  • Table of Contents Plus インストール
  • Table of Contents Plus 初期設定(基本設定)
  • Table of Contents Plus 初期設定(上級者向け)
  • 設定後、目次が設置されているか確認

それでは、一つずつ見ていきましょう。

Table of Contents Plus インストール

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

プラグイン > 新規追加

で、プラグイン検索画面へ移動します。

右上のテキストボックスに「Table Of Contents Plus」と入力します。

すると、下記のプラグインが表示されるので、「今すぐインストール」をクリックしましょう。

インストールが完了したら、「有効化」をクリックします。

これで、インストール作業は終了です。

Table of Contents Plus 初期設定(基本設定)

続いて、初期設定をしていきます。

設定 > TOC+

をクリックし、設定画面へ移動します。

基本設定では、下記の通りに変更すればOKです。

  • 位置
  • 目次を表示する場所の設定です。こちらはデフォルトのままでOKです

  • 表示条件
  • 見出しが〇個以上のときに目次を表示する設定です。全てのページで目次が表示されるよう「2」つに変更しましょう

  • 以下のコンテンツタイプを自動挿入
  • どのページに目次を表示させるかの設定です。postにチェックをつけましょう。ちなみに、postは投稿記事、pageが固定記事ことを指します

  • 見出しテキスト
  • 目次の上のタイトルを変更できます。また、「ユーザーによる目次の表示・非表示を切り替えを許可」のチェックは外します

続いての設定箇所です。

  • 番号振り
  • 目次に番号が割り振られます。こちらは、デザインの問題で番号がないほうが良かったので、チェック外します

  • スムーズ・スクロール効果を有効化
  • 目次のリンクをクリックしたら該当箇所まで移動する効果です。チェックをつけると、スクロールしながら移動します。移動しているのは分かりやすいので、チェックをつけましょう

Table of Contents Plus 初期設定(上級者向け)

最後に上級者向けの設定です。

  • CSS ファイルを除外
  • チェックをつけます。無駄なCSSを読み込まないので、多少の速度改善になります

  • 見出しレベル
  • チェックを外すと、その見出しを非表示にできます。基本的にh2、h3、h4しか使わないので、それ以外はチェックを外して構いません

設定が完了したら、「設定を更新」をクリックします。

これで、初期設定が完了です。

設定後、目次が設置されているか確認

最後に、目次が設置されているか確認します。

すでに公開されている記事を開き、目次が設置されていれば設定完了です。

サイドバーに目次を固定する方法

サイドバーに目次を固定する方法

記事内に目次が設置されました。

最後に、サイドバーに目次を表示させたい方へ、設置方法のご紹介です。

外観 > ウィジェット

をクリックします。

TOC+をクリックし、「スクロール広告用(アフィンガー6の場合)」をクリックします。

アフィンガー6では、「スクロール広告用」ですが、WordPressテーマによって名称が違うので注意。「追尾サイドバー」「サイドバー追尾」といった文言のものを選択してください。

最後に、「ウィジェットを追加」をクリックすればOKです。

無事追加されました。

このようにサイドバーにも目次が表示されます。

↓ 動画ver

上記のように、スクロールしてもサイドバーに固定されています。

これで、ユーザは常に見たい情報に飛べるようになるわけです。

ユーザビリティを高める施策なので、ぜひ導入しましょう。

まとめ 知りたい情報にすばやく辿り着けるよう目次は設置しよう!

知りたい情報にすばやく辿り着けるよう目次は設置しよう!

今回は、Table of Contents Plusの設定方法についてご紹介しました。

目次は、ページを訪れたユーザが知りたい情報にすばやく辿り着けるようするための導線です。

設置していないサイトは、何度もスクロールしなければいけないため、ユーザに不親切です。

それでは、SEO(Google)の評価を落とす可能性もあるため、ぜひ導入しましょう。

SEOについての詳細は、【保存版】SEO対策とは?SEO対策の基本から今すぐできる対策を解説で解説しています。

本日は以上です。

他のプラグインは、WordPressおすすめのプラグイン10選!ブログ運営で欠かせないプラグインをご紹介で解説しています。

-WordPress, プラグイン, ブログを始める
-, ,