【WordPress】目次を追加する方法

よくブログを読んだりしていると目次があるブログよく見かけます。やはり目次があると全体の記事の概要がわかるので読みやすなと思います。

あれってどうやって追加するのか自分で調べてWordPressへ適用してみたので、
その方法についてまとめようと思います。

WordPressプラグインのインストール

JSを使って組み込むこともできそうでしたが、
色々調べるとWordPressのプラグインを使えば
簡単に追加できることがわかりました。

Table of Contents Plusの追加＆有効化

Table of Contents Plusで検索して上記の画像のアイコンのプラグインをインストールし有効化させます。

上位に表示されなかったのでちょっと見つけにくいかもです。

Table of Contents Plusの基本設定

WordPressの管理画面の左メニューの設定の所にTOC+というのがあるのでそこからTable of Contents Plusの設定ができます。

表示する場所

目次を表示させる場所を選べます。

記事の一番上だったり一番最初に見出しが表示された前とかに設定できるので、自分の好みに合わせてカスタマイズしてみてください。

表示条件

見出しの数によって目次を出す、出さないの設定ができます。

画像の例では見出しが4つ以上のときに目次が表示されるようになります。
見出しがあまりに少なすぎるのに目次を表示しても意味ないですからね。
適宜設定してみてください。

次の投稿タイプのときに表示

投稿タイプに合わせて目次を出す、出さないの設定が可能です。

普通の記事ページに目次を出すにはpostにチェック。

固定ページに目次を出すにはpageにチェック。

自分の場合は記事ページに目次を表示させたかったので、postのみにしました。
後の項目はちょっとよくわからないので、チェックしていないです。

見出しテキスト

記事を読みに来てくれた方がわかりやすいように日本語で
目次、表示、非表示と設定しておいたほうがいいと思います。

階層表示

階層表示にチェックした場合は上記の画像のような感じになります。

ここではh2とh3を使っていますので、h3のところは１つ階層が下がってます。

番号振り

見出しの数だけ番号が振れれます。
階層が下がると1.1みたいな感じになります。

目次のデザインの設定

デザインのところは目次のサイズや見出しのサイズなど調整ができるので、自分の好みに合わせて調整してみてください。

横幅

pxでサイズを指定することも可能ですし、画像のように表示する画面に対して相対的に指定することも可能です。

回り込み

目次を非表示にしたときに上記のように右に持ってくるのか、左に持ってくるのか選べます。

なしにすると左に設定されます。

文字サイズ

目次の見出しの文字の大きさを設定できます。
pt、%、emから設定できるので自由に文字のサイズを変更してみてください。

目次の背景デザイン

背景デザインの設定ができます。
Grey、Light Blue、White、Black、Transparentと選択できるので、自分の好みに合わせて設定してみてください。

自分はGreyがしっくりきたのでGreyに設定してみました。

上級者向けの設定

アンカーリンクを小文字にしたり、ハイフンを使ったりと上級者向けの設定ができます。

より細かい設定をしたい人はやってみてください。
ちょっとむずかしいって人は下記の設定だけ適用してください。

見出しレベル

h1は記事のタイトルで設定されているので、h2、h3にチェックを入れるようにしてください。
h4も見出しに表示したい場合はチェックを入れるといいと思います。
あんまり設定しすぎると逆に見づらくなってしまうので、h2、h3ぐらいがちょうどいいと思います。

ここまで設定が終わったら最後に更新ボタンをクリックして設定を保存します。

記事の方に戻ってみると目次が表示されていると思います。