【Easy Table of Contents】WordPressの記事内に目次を自動挿入する方法

Easy Table of Contentsの概要

Easy Table of Contentsの大きな特徴は以下の点です。

投稿が長文になると、途中で投稿全体のどの部分にいるかわからなくなってしまうことがあるかもしれません。

しかし、最初に目次で全体像を確認したり、サイドで現在位置が確認できれば、そのような懸念もなくなり訪問者の利便性も高まります。

目次は見出しの数や条件に合わせて表示・非表示を切り分けることもできるので、投稿ごとに設定をする必要もありません。

このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。

WordPress.orgから引用

Easy Table of Contentsのインストール

それでは、Easy Table of Contentsのインストールから行っていきましょう！

WordPress管理画面のメニューから「プラグイン」にカーソルを合わせ「新規追加」をクリックします。

画面右上の「プラグインを検索」に「Easy Table of Contents」と入力します。

「今すぐインストール」をクリックします。

「有効化」をクリックします。

Easy Table of Contentsがインストールされたのが確認できればOKです！

Easy Table of Contentsの設定

ではここからEasy Table of Contentsの設定の仕方をみていきましょう。

「設定」をクリック

“目次”と書かれた管理画面に切り替わります

では、ここから一つずつ解説していきます。

一般設定

サポートを有効化

ここではEasy Table of Contentsを有効にするコンテンツを選択できます。

基本的には「投稿」のみか、必要に応じて「固定ページ」にチェックをいれておくとよいでしょう。

自動挿入

自動挿入の項目では、自動的に目次を挿入するコンテンツを選択できます。
上記の“サポートを有効化”したコンテンツと合わせるとよいでしょう。
個別に設定したい場合はチェックを入れる必要はありません。

位置

位置は、目次を挿入する場所を設定することができます。

投稿の構成にもよりますが、特別な理由がなければ「最初の見出しの前」を選択するのがよいでしょう。

理由は、多くのブログ系のサイトでは「最初の見出しの前」に見出しを設置しているため、訪問者が違和感を感じる可能性が低いからです。

表示条件

表示条件は、投稿にいくつ以上の見出しがあれば目次を表示させるかという設定です。

見出しが少ない場合は目次を設置する必要性もあまりないため、3つくらいからでよいでしょう。

見出しラベルを表示＆見出しラベル

目次の上に見出しラベルを入れるかどうかと、見出しラベルのテキストをどう表示するかを設定できます。

見れば目次だということはわかると思いますが、チェックをいれ「目次」や「もくじ」などのラベルを設定しておくと親切だと思います。

折りたたみ表示

目次を折りたたむことができるようにする設定できます。

どちらでもよいですが、折りたためることにデメリットはないのでチェックをいれておきましょう。

初期状態

初期状態で目次を開いた状態か閉じた状態にするかを設定できます。

目次を折りたたんでいるサイトも多く見かけますね。

特別な理由がなければ目次は開いた状態にしておいたほうが親切でしょう。

ツリー表示

これは目次を見出しレベルに合わせてツリー表示にできる設定です。

ツリー表示のほうが見やすいためチェックをいれておきましょう。

カウンター

見出しの前に数字をいれる設定ができます。

ローマ数字も小数点表示と同じく複数数字が打たれます。

好みで決めてよいですが、補足しておくと「数字」や「小数点表示」は“見出しの最初に数字が入ったとき”にわかりにくくなります。

外観

外観に関しては、は基本的にデフォルトの設定のままで問題ありませんが、いくつか解説しておきます。

幅

目次の横幅を設定できます。

細かく設定されていますが、“Auto”もしくは“100％”にしておけば見出しの折り返しなど気にしなくてよくなるのでおすすめです。

こちらがAutoの場合です。

こちらは100％の場合です。

回り込み

目次の下にテキストがある場合に、回り込みするかどうかを設定できます。
個人的には必要ないかと思います。

上記のように位置を「最初の見出しの前」に設定した場合には、目次の下にテキストが入ることがないので関係ありません。

以下参考までに、位置を「上部」にした場合のイメージです。

こちらは回り込みなしの場合です。

こちらは左に回り込みした場合です。

テーマ

目次の色を設定できます。

好みのものを選ぶかカスタムテーマで細かく自分で調整もできますが、難しいようであれば「透明」を推奨します。

こちらは透明（投稿の背景が白）・ライトブルー・黒の目次です。

高度

ここも基本的にはデフォルトのままでOKですがいくつか解説しておきます。

見出し

これは目次に表示させる見出しレベルを設定できます。サイトに合わせて設定してください。

表示させる見出しレベルより上位の見出しレベルを非表示するようなことはやめましょう。

スムーズスクロールのオフセット

ヘッダーメニューが上部に固定されていたり、ページの上からかぶさるような設定になっている場合に、見出しがメニューの下に隠れないようにする設定です。

目次の見出しをクリックすると、その見出しまでページがスクロールします。その際に、見出しがメニューの下に隠れないように高さに設定しましょう。

オフセットする数値が足りないと見出しがメニューの下に隠れてしまいます。モバイルのスムーズスクロールのオフセットも同様です。

注意する点としては“サイトルート”から指定することです。

パス制限

これは目次を表示させたくないページを指定できます。

例えば、「https://example.com/article/new/」というページを指定したい場合は、「/article/new/」が入力する部分になります。

デフォルトのアンカー接頭辞

目次に設定した見出しに付与するidの指定ができます。

デフォルトでは「i」から始まるようになっており、特別変更する必要はありません。

ウィジェットの固定セレクタ

サイドバーに目次を固定される場合に使用します。

必要に応じて有効にしましょう。

IDの確認の仕方はこのあと解説します。

まず、ウィジェットに“目次”が追加されているので、サイドバーに設置し「ウィジェットを上部固定する」にチェックをいれます。

WEBサイトを表示させ、サイドバーのメニューのあたりで右クリックし「検証」を選択します。

サイドバーの要素を見つけたら、その中の「id=●●●」を確認します。

「＃●●●」というように、＃を先頭につけてからidを入力します。

最後に「変更を保存」をクリックして目次の設定は完了です！

まとめ

目次があることで全体像が把握しやすくなるので、とくに記事が長い場合には、WEBサイトの訪問者に投稿内容を理解してもらいやすくなります。

便利なプラグインですので、一度試してみて下さい！