WordPressで目次を設定するためプラグイン「Table Of Contents Plus」を使う！

WordPressの投稿記事に簡単に目次を作りたいという場合、プラグインを利用するのも一つの手段です。

今回は「Table Of Contents Plus」というプラグインをご紹介します。

使ってみるとインストールして有効化するだけで簡単に目次を設定できました。

目次はあるだけでユーザーの利便性は高まりますし、SEO的にも効果があります。

導入から設定まで簡単だったので時短したい場合などに試してみてください。

Table Of Contents Plusのインストール

｢今すぐインストール｣ボタンをクリックして、その後有効化をクリックします。

そしてWordPressの管理画面メニューの設定をクリックすると次の画像のように｢TOC+｣が表示されます。

Table Of Contents Plusの設定項目

基本設定画面1

｢TOC+｣をクリックすると下の画像のような設定画面になります。

位置

目次の表示位置です。最初の見出しの前（デフォルト）で問題ないかと思います。

好きな場所に設定する場合はショートコードブロックに[toc]と記述し表示させたい場所に設定します。

表示条件

｢〇〇以上見出しがあるとき｣を2つにすると、対象の見出しの数が1件しかない場合は表示されません。

｢上級者向け設定｣の見出しレベルで設定したものが対象です。

以下のコンテンツタイプを自動挿入

投稿に使う場合は｢post｣を選択。今回は｢post｣を選択しました。

見出しテキスト

デフォルトでは｢Contents｣になっています。画像のように変更することも出来ます。

階層表示

見出しレベルをどこまで表示するのかを後ほど紹介する項目で設定するのですが、見出しレベルを複数使用すると自動でインデントをつけてくれます。

番号振り

見出し項目にプラグイン側で自動で番号をつけてくれます。

例えば　見出しレベルh2は[1]　見出しレベルh3 は[1-1]　のようになる。

番号は不要、もしくはご自身でコードを書くなら不要です。

スムーズ･スクロール効果を有効化

目次の項目をクリックして目的の場所に到達する間にスクロールアニメーションをつけます。

ユーザーにわかりやすいのでチェックをおすすめします。

ご自身のサイトでスムーススクロールの設定コードを書いている場合は、チェックをいれるとプラグインの設定と競合して動きが不安定化するのでチェックを入れないほうが無難です。目次がない場合でも影響があります。

外観項目

基本設定画面を下にスクロールすると外観に関する項目があります。

外観についてはカスタム部分をクリックして設定するといいでしょう。CSSを使って設定する場合は何もさわらなくてもいいです。

上級者向け項目

さらに下にスクロールすると｢上級者向け｣と書かれた項目があるのでそれをクリックすると下の画像のような項目が表示されます。

CSSファイルを除外

コードを書いてオリジナルのデザインをCSSで付ける人はチェックしたほうがいいですね。そうではない人はチェックしなくてもかまいません。

見出しレベル

どこまでのhタグを表示させるかを決める。h2,h3あたりがおすすめ。

スムーズ･スクロール上部余白

さきほどスムーズ･スクロール効果を有効化にチェックした人はここで止める場所を細かく設定できます。画面上部にピッタリ止まるより少し余裕を持たせたい場合は10pxなど具体的な数字を入れる。

こちらもCSSをご自身で記述している方はCSSの記述を優先してください。

デザインをCSSでカスタマイズ

ここはコーダー向けの余談ですが、このプラグインで作成された目次部分をデザインどおりにする場合、

#toc_container
.toc_title
.toc_list

のようなクラス名が付与されています。これに基づいてCSSを書いていきます。

投稿エリアで使用する場合はWordPress標準CSSとの競合に気を付けて、優先度を上げる必要あり。

まとめ

ここまで読んでみて使って見ようかなという方はぜひお試しください。

すばやく情報にアプローチしたい読者にとってはありがたい機能ですので積極的に導入していきましょう。