WPで簡単に目次を表示してくれる「Table of Contents Plus」というプラグインの使い方や設定方法解説

Wordpressを使って記事を書いてるときに目次ってどうやって入れればいいんだろう？と思いました。
普通に入れようとしたらリストとかのHTMLを自分で書かなければならないし毎回それをしていたら結構面倒ですよね。
WPで作られているサイトなんかを覗いてみるとみんな同じような目次が出来ていたりしてもしかしたらプラグインがあるのでは？と思い調べてみるとありました！
「Table of Contents Plus」というプラグインで目次を簡単に生成出来るとのこと！
これを使わない手はないと思ったので実際に使ってみて目次を簡単に生成することが出来たので使い方とか備忘録として残しておきます。

「Table of Contents Plus」について

前置きで述べたように目次を簡単に生成してくれるプラグインです。
どういう仕組みかと言えばh1やh2といった見出しタグで目次となる部分を囲うことでその部分をプラグインが目次として認識して生成してくれるみたいですよ～。
設定次第で大見出しや小見出しといった階層化も簡単に出来る優れものです！

「Table of Contents Plus」をインストール～有効化

WPの管理画面のプラグイン→新規追加から右上にあるプラグインの検索で「Table of Contents Plus」と検索してみましょう。
すると紹介しているプラグインがヒットすると思うので今すぐインストール～有効化しましょう。

これだけでとりあえず使うことは出来ます！
試しに記事を書く画面で(toc)と打って見ましょう。
このように目次が出来上がったかとおもいます。

設定方法や項目の解説

上の説明まででも使うことは出来ますが、他にも色々と設定することは出来るので項目とかの解説をしていこうと思います。
プラグイン→インストール済みのプラグインから「Table of Contents Plus」を探して設定をクリック。

基本設定
基本設定では文字通り基本設定が出来ます。

位置

目次の表示位置の設定です。
・最初の見出しの前(デフォルト)
最初の見出しタグの前に目次が来ます、通常ここに置くことが多いです。
・最初の見出しの後
最初の見出しタグの後に目次が来ます。あまり見かけないような気がします。
・上
記事タイトルの下に来ます、ブログ記事なんかでは前置きを書いてから本題に入ることが多いのであまりオススメしません。
前置きなしでいきなり見出しから入る場合は最初の見出しの前とほぼ同じ位置です。
・下
記事部分の一番下に来ます、目次は最初の方で見るものなのでそこまでいい位置ではないですが、ユーザーよりも検索エンジンに配慮するという方はここに目次を置く人もいるかもしれませんね。

表示条件

見出しタグの数が〇個以上の時に目次を表示する設定です。
例：見出しが5個以上で表示するならば4個しか見出しがなければ目次が表示されず、5個からは表示されます。

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

post
管理画面の投稿の所から追加された記事に自動挿入するかどうかの設定です。
page
管理画面の固定ページから追加された記事に自動挿入するかどうかの設定です。
使うのは基本この2つだけなので他はとりあえず気にしなくて大丈夫でしょう。

見出しテキスト

目次の上にタイトルを表示
ここにチェックを入れると下の空欄に書かれた文字が目次のタイトルとして表示されます。
ユーザーによる目次の表示・非表示を切り替えを許可
チェックを入れると目次の表示・非表示をサイト閲覧者が選択できるようになります。
テキストを表示・テキストを非表示
例にあるとおりに設定しておけば問題ありません。
最初は目次を非表示
記事を開いたときに目次が既に表示されているか非表示になっているかの設定です。
チェックを入れていると記事を開いた時は目次が非表示になっており、見るためには自分で開く必要があります。

階層表示

チェックを入れると目次が階層表示されます。
例
・あ（大見出し）
　　・い（小見出し）
　　・う（小見出し）
　　　　・え（極小見出し）
　　・お（小見出し）
・い（大見出し）
こんな感じに出来ます。チェックを入れたほうが見やすいです。

番号振り

チェックを入れると目次に番号が振られます。

スムーズ・スクローズ効果を有効化

チェックを入れると目次の項目をクリックしたときに素早いスクロールで目的の項目へ移動するようになります。
チェックなしなら目次をクリックすると瞬時に目的の項目へ移動します。
スクロールの方がリッチな印象になります。

外観

見た目の設定です。
横幅
目次の横幅が設定出来ます。
変にいじるとサイトのデザインが崩れる可能性があるので初心者の方は自動のままがいいでしょう。

回り込み

デフォルトのなしで大丈夫です。
ここをいじると横幅以上にサイトデザインがおかしくなる可能性があります。

文字サイズ

目次の文字の大きさを変えられます。
文字の大きさを変更するだけなので初心者の方でも好みに合うように変更してみて大丈夫です。
ただし、大きな数字にしすぎると酷いことになります。

プレゼンテーション

目次のデザインがテンプレートとしていくつか用意されています。
カスタムで色を指定することで自由に背景色・目次を囲む線の色・目次のタイトル・リンク色・リンクにマウスカーソルを合わせた時のリンク色・クリック済のリンク色を変更することが出来ます。
カラーピッカーが用意されているので簡単にカスタムすることが出来ます。

上級者向け
上級者向けの設定はあまり気にする必要はありません。
一応気になる項目だけ解説しましょう。

CSSファイルを除外

チェックを入れると目次のデザインが完全に初期のデザインされていない状態になります。
この場合はテーマのCSSに初期のデザインが記述されている場合はそちらが適用されますが、なければデザインがされていない状態です。
上級設定の前に紹介した外観の項目も無視されます。
自分で目次のデザインを完全に制御したい場合はこちらの項目をチェックしましょう。

見出しレベル

チェックを入れた見出し番号が表示され、チェックを外すとその見出し番号は目次表示されなくなります。
記事の中でh2・h3・h4を使っているのであればh3のチェックを外すとh3で囲んでいた見出しが表示されなくなります。
全てチェックを外すと目次に何も表示されなくなります。
目次の表示したい場所を自由に選択したい場合はショートコードを使用しましょう。
目次の挿入したい場所に(toc)と撃つことでその場所に表示されます。
目次は１つしか表示されないのでショートコードを使用した場合はその場所だけに目次が表示されます。
ショートコードを2回以上書いている場合は一番最初に書いた位置に目次が表示されます。

まとめ

いかがでしたか？目次を初心者でも簡単に表示することが出来たのではないでしょうか？
今回解説したのは基本的な項目なのでもっといじってみたい！という人はCSSの知識を見につけましょ～閲覧ありがとうございました！