《WordPress》Table of Contents Plusで記事に目次を表示しよう!

ブログを始めたばかりの人で、WordPressで記事を書いて「どんな出来栄えかな~」と、プレビューや実際の画面で記事を見てみると「・・・なんか足りない・・・?」と感じた人。

そう、「目次」がないんです!

wordpressには目次を表示する機能が標準装備されていません。
ここでは「Table of Contents Plus」のインストール方法、設定について紹介します。




「Table of Contents Plus」をインストールしよう!

まずは「Table of Contents Plus」をインストールする方法ですが、ダッシュボードの「プラグイン」にマウスをあわせると「新規追加」とあるので、それをクリック。

出てきた画面の右側上部の「プラグインの検索」に、「Table of Contents Plus」と入れて検索すれば、下の画面に出てくるのでインストールして有効化すればOKです。

設定画面

では「Table of Contents Plus」の設定をしていきますが、まずは画面右の「設定」の「TOC+」をクリックして下さい。

ここで目次の細かい設定をしていきます。

基本設定


位置:目次を表示する位置。
表示条件:見出しが何個以上あれば目次を表示するか。
以下のコンテンツタイプを自動挿入:目次を表示するページ。大体の人は記事ページ(post)で充分なので、postのみにチェックを。
見出しテキスト:目次の上部に表示するタイトル。目次を表示・非表示できるようにしたければ項目にチェックを。
階層:見出し3や見出し4を使っている時、目次に表示する。
番号振り:目次の見出しタイトルに番号を振る。
スムーズ・スクロール効果を有効化:目次の見出しタイトルをクリックしたとき、直接飛ぶか、スクロール風に飛ぶかの設定。
横幅:目次の横幅。スマホなどでも適切な幅になる「自動(デフォルト)」のままでOKです。
回り込み:「なし(デフォルト)」のままで。ここを「右」「左」としてしまうと文章が左or右に表示され、ページのデザインが崩れます。
文字サイズ:目次内の文字のサイズ。文章中の文字サイズと比較した大きさ。
プレゼンテーション:目次のデザイン。

上級者向け


基本的にはいじらなくて大丈夫ですが、よく設定しそうなところはこのあたりになると思います。

CSSファイルを除外:自分でつくった独自の目次CSSを使いたいときはチェック。
見出しレベル:目次に表示する見出しのレベルの選択。(見出し1ならheading1-h1)
除外する見出し:ここにキーワードを入れると、そのキーワードと同じ見出しは除外(非表示)になります。

そこまで弄ることはないでしょうが、もっと細かく設定したいときはここで設定しましょう。

記事の文章中に「見出し」を設定しよう

「Table of Contents Plus」では記事の本文に「見出し」がないと目次がつくれません。
この見出しの文章が目次のタイトルとして表示されます。

まずは見出しにするタイトルを書きます。
次は記事作成画面の上部の「ビジュアル」をクリックしましょう。

次に見出しにしたい文章(タイトル)を選択したら、左上にある「段落」から見出しの階層を選択します。

※このとき文章の下に別の文章があると、まとめて見出しに変わってしまいます。テキストのほうで改行しておくと大丈夫です。

目次のタイトルは「見出し2」、そのタイトルの中の細かいタイトルは「見出し3」と、階層が下になるにつれ数字が大きくなります。
ちなみに「見出し1」は記事そのもののタイトルに使われているので、基本使うことはありません。

 

見出しが設定されるとこんな感じになります。
「記事タイトルその1」は見出し2、「階層その1」「階層その2」は見出し3に設定してます。

見出しを設定し終わったら画面右上の「プレビュー」で実際の画面を見てみましょう。

こんな感じで目次が表示されています。
あとは自分の好みの目次に設定していけば終了です。

最後に

これで記事に目次を表示するプラグイン「Table of Contents Plus」の紹介を終わります。
ブログの内容によっては目次がいらない人もいるでしょうが、目次が欲しい人はこのプラグインで目次を表示しましょう。