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

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

・1.Table of Contents Plus
・2.Easy Table of Contents
・3.Rich Table of Contents

1.Table of Contents Plus

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

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

設定項目のカスタマイズ

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

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



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

好きな場所に目次を表示する

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

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

の4種類しかない。

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

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

2.Easy Table of Contents

「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から始まる見出しが非表示になった。

3.Rich Table of Contents

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

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

感動のライブプレビュー機能

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

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

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

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

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

オシャレなテーマ

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

目次を投稿に表示する

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

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

コード 解説
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 目次の表示アニメーション設定を行うことができます。

投稿に埋め込む。

このように表示される。

まとめ

3つある目次生成プラグインの選択基準は次のように決めると良い。

少しだけカスタマイズした目次を使いたい場合
Table of Conetnts Plusプラグインがオススメ!

目次のデザインはあまり気にならいないから早く使いたい場合
Easy Table of Contentプラグインがオススメ!

管理画面でプレビューを見ながら細かく目次をデザインしたい場合
Rich Table of Contentプラグインがオススメ!

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。