《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」のプラグインです。

既にインストールが済んでいるので「有効化」になっていますが、まだな人は「今すぐインストール」と表示されます。

設定画面

では「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」の紹介を終わります。

ブログの内容によっては目次がいらない人もいるでしょうが、目次が欲しい人はこのプラグインで目次を表示しましょう。