目次を生成する３つのプラグイン

ワードプレスで投稿や固定ページで見出しにリンクする目次をつけたいことがある。今回は目次を自動生成するプラグインを３つ紹介する

・１．Table of Contents Plus
・２．Easy Table of Contents
・３．Rich Table of Contents

「Table of Contents Plus」プラグインは今回紹介した3つのプラグインの中で最もシンプルなプラグインだ。他の2つのプラグインでは設定項目が多くて取っつきずらい人にはこちらのプラグインをおすすめする。

「Table of Contents Plus」プラグインを使うと下記のような目次をヒョ持することができる。

設定項目は下記のようになっている。英語になっている箇所を日本語化するために
Contentsを目次に。
showを表示、
hideを非表示に変更した。

続いて背景色を水色から白に変更した。

設定を保存して目次を確認すると、英語だった箇所が日本語になり、背景色が水色から白になっていることを確認できる。また、除外設定した「h3の見出し」が目次から除外されていることを確認できる。

管理画面の設定できる目次の表示場所は、

・最初の見出しの前
・最初の見出しの後
・上
・下

の4種類しかない。

どうしてもh5の見出しの前に表示したいはどうすればいいのだろう。

答えは文中に[toc]というショートコードを記述すればいい。

「Easy Table of Contents」プラグインは簡単に投稿や固定ページに目次を設定できるプラグインだ。Easy…と名乗っている通り、設定項目も少なく簡単に使える。

管理画面の「設定」ー＞「目次」から設定項目を確認することができるが、カスタマイズできる項目は最初に紹介した「Table of Contents Plus」プラグインとほぼ同じと言ってよい。

では「Table of Contents Plus」と違うところは何なのか？と言うと、投稿ページごとに目次の設定をカスタマイズできる点が異なる。下記のように投稿ページの編集画面では「Table of Contents」の入力欄が表示されている。

目次を表示するには「目次を挿入します」にチェックを入れると目次が表示されるようになる。

面白い機能として目次に表示する見出しのテキストを別のものに差し替えることができる。

ここでは「h4の見出し」というテキストを「h4の見出し | 差しh4の見出し替えた」に変えて見るとする。下記のように入力する。

下記のように目次のテキストを書き換えることができる。

目次に表示したくない見出しがあれば除外することができる。「Easy Table of Contents」プラグインではワイルドカード(＊)を使うことで部分一致で除外できる。

例としてh4から始まる見出しを除外したい場合はh4\*と入力する

すると、h4から始まる見出しが非表示になった。

最後に「Rich Table of Contents」プラグインを紹介する。

このプラグインには「Rich」という名称が用いられているが一体何が「Rich」なのだろう？それは管理画面のユーザーインターフェースがリッチなのである。

「Rich Table of Contents」プラグインの設定画面では変更した項目が即座に右側のライブプレビューに反映されるのでどこがどのように変わったのかを即座に知ることができる。

例えば、「表示させる見出し設定」を「h2まで表示」から「h4まで表示」に変更するとお

右側のライブプレビューにて即座に反映された。ちなみにフォントも一緒に変更してみた。

タイトルの表示位置を左寄せに、h2のリスト表示を丸、h3のリスト表示を番号にするとこれも即座に反省される。

ただし、表示時のアニメーション機能はライブプレビューで書くにすることはできないようだ。なぜなら、すでに表示ずみだからだ。

「Rich」の名前を冠する通り、テーマの名称もオシャレになっている。宝石やら香水みたいな名称である。「フェミニン」と「スマート」は言葉からどんな配色かイメージできん（汗）

目次を投稿に表示するにはショートコードを表示したい箇所に貼り付ける必要がある。他の２つのプラグインと違って自動で自動ですべてのページが対象にならないけど、目次を表示したいページというのはそう多くはないのでこれで十分だ。

ショートコードにはパラメータ付きの属性を使うことで設定ページの内容を上書きして表示することができるようだ。

値	コード	解説
title=””	任意のテキスト	目次のタイトルを設定できる項目です。この値が設定されていない場合管理画面の設定が反映されます。
title_display=””	h2,h3,h4	どの見出しを表示させるかを設定できます。例えばh3としておくと、h2〜h3までの見出しが目次に表示されます。
list_h2_type=””	round,number1,number2	roundを入力すると●が、number1,number2を入力すると数字がh2見出し前に表示されるようになります。
list_h3_type=””	round,number1,number2	roundを入力すると●が、number1,number2を入力すると数字がh3見出し前に表示されるようになります。
display=””	open,close	openと入力すると目次が開いた状態で、closeと入力すると目次が閉じた状態で表示されます。
frame_design=””	frame1,frame2,frame3,frame4,frame5	目次の枠のデザインを設定できます。
animation=””	fade,slide,none	目次の表示アニメーション設定を行うことができます。