【WordPress】Table of Contents Plusで各記事に目次を入れてみることに

WordPressやMarsEditのセッティングなどを学ぶべく、あちこちのサイトのお世話になっているのですが、そんなサイトの多くで見かけるのが上のような目次です。目次があるとその記事がどんな構成になっているのか分かりやすくてよさそうです。ということでこちらのサイトでも設定してみることにしました。

Table of Contents Plusプラグインのインストール

調べてみたら、みなさんTable of Contents Plusというプラグインを使っている様子。いくつかのサイトで設定の仕方を紹介していましたが、そんな中でとても分かりやすかったのがこちらのサイトでした。

Table of Contents Plus – 記事の目次を自動生成するWordPressプラグイン | ネタワン

ということでこちらに従ってTable of Contents Plusプラグインを導入してみます。まずはいつものとおりプラグインの検索からはじめます。こちらのタブから新規追加をクリック。

そして検索窓にTable of Contents Plusをタイプしてクリック。すると一番上に表示されます。

有効化をクリックして有効にします。

するとSettingというのが現れるのでここで設定していきます。

Table of Contents Plusの設定

Settingをクリックするとこのような画面になりますので、それぞれ設定していきましょう。最初は目次の位置。多くの皆さんは最初の小見出しの前に目次を置いているみたいなので、それにならうことにしました。つまり、アイキャッチ画像、イントロ、目次、小見出し1という流れになります。

小見出しの数によって目次を表示させるかさせないかも設定できます。私は4項目以上あるときに表示する設定にしています。

また目次部分に表示される言葉も設定できます。デフォルトだと英語なので、「目次」という風に変えています。さらにTable of Contents Plusで作成された目次は表示・非表示を切り替えることができますので、その切り替えをどのような言葉にするかもここで決めます。私はシンプルに「目次を表示」と「非表示」にしました。

そして目次をそもそも表示するのか非表示にしてクリックで表示させることにするのかも決める事ができます。マニュアルや解説系の記事で目次があった方がいい記事もあると思うのですが、私の場合はそれほど目次を駆使する記事もいまのところなさそうなので、デフォルトでは非表示にして、「目次を表示」をクリックすると見えるようにしました。

これについては、今後の記事の書き方にも関係してくるので、いずれ変えることになるかもしれません。設定画面はさらに続きます。

目次の各項目に番号を付けるか付けないかをここで決めます。おそらく、すでに番号入りの小見出しを設定している時にはここはチェックしなくてよいのだと思います。私は番号入り小見出しにしていないので、ここをチェック。

目次のデザインについても選択できます。カスタム設定もできるようですが、私はサイト全体の色が青っぽいのでLight Blueを選んでみました。これについても、いずれサイトのデザイン全体を見直す際にすこし調整していくかもしれません。下の方にAdvancedという項目があるので、表示させてみるとこんな具合です。

Heading3までを目次表示する古都に設定しました。他は今の所設定なしにしています。

そして設定を全て終えたら「Update Options」をクリックすれば、サイトに反映されます。

設定後の表示具合

設定してから自分のブログにいって再読込させてみたのですが、すぐには反映されないようでした。ちょっと気になったのは上述の参考にしていたサイトに書いてあったこの注意点。

１．このプラグインを利用するには、H1からH6までの見出しのHTMLタグを階層的に記述する必要があります。H1からH6までの見出しのHTMLタグが無ければ、目次は生成されません。２．このプラグインを利用するには、HTMLタグを綺麗に直打ちしている必要があります。H1からH6までの見出しのHTMLタグを階層的に記述していないと、目次がゴチャゴチャに出力されます。

私は記事を書くのにMarsEditを使っているので、HTMLタグを綺麗に直うちしているとは言えないと思います。ただ、MarsEditにはH1からH6までHeadingを設定できるようになっていて、いつもこれを使っているので、h2とかh3とかのタグはちゃんと入っているはずです。心配しつつ一晩待ってみたら無事に表示されていました。目次が必要なほど複雑な構造の記事を投稿していないので、現時点では非表示にしています「目次を表示」をクリックすると目次が現れます。