見出しを自動でページ内リンクにしてくれるプラグイン「Table of Contents Plus」

記事が長くなってしまったり、「まとめ」のように見出しの数が多くなってしまったりすると、読みたい内容がなかなか探し出せないということがあります。
そういう場合は「ページ内リンク」で目次から見出しにジャンプできるようにしておくと便利ですが、けっこう手間がかかります。
今回はそんな面倒なページ内リンク付きの目次を自動で作成してくれるプラグインを紹介します。

プラグインをインストールする

プラグインは管理画面から Table of Contents Plus と検索するか、以下のリンクからインストールします。

このプラグインを使うと上の画像のようにリンク付きの目次を自動で表示してくれるので、記事全体の内容がパッと見て分かるようになります。

Table of Contents Plusを設定する

このプラグインは設定をすることで、表示させる場所や表示のデザイン、表示させる条件を変更することができます。（設定からTOC+を選択します）

上の画像は僕のしている設定です。重要なところだけ紹介します。

Position -表示させる場所

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

1. Before first heading(default) -最初のhタグの前に表示 ←コレ
2. After first heading -最初のhタグの後に表示
3. Top -投稿の最初に表示
4. Bottom -投稿の最後に表示

Show when -hタグが何個あれば表示させるか

hタグが1つしかない場合は目次は表示されません。さらに細かくhタグが2個以上〜10個以上ある場合は表示などと設定できます。←2つ

Auto insert for the following content types -表示させるページタイプ

WordPressにはpost（投稿ページ）とpage（固定ページ）の2つのページがあります。表示させないページを設定できます。←両方チェック

Heading text -目次の見出し等

目次であることを示すために見出しを付けることができます。付けない場合は[Show title on top of the table of contents]のチェックを外しておきます。←見出しあり

また[Allow the user to toggle the visibility of the table of contents]にチェックを入れておくとユーザーが目次を隠すことができるようになります。←チェックを外した

Number list items -番号付きのリストにする

チェックを入れると番号付きのリストタグ（ul）で表示されます。外すとリストは表示されません。←リストで表示

Appearance -横幅やフォントサイズ等

[Width]では目次を表示する横幅（width）をpx指定や%指定できます。他にもFont size（文字サイズ）やPresentation（背景色）の変更などができます。←100%,none,1em,Transparent

Advanced -高度な設定

僕が設定しているのは[Heading levels]です。目次を表示させるhタグのレベル（h1,h2,h3など）を設定できます。僕はh2タグだけ表示させたいので[heading 2 - h2]にだけチェックを入れています。

主要な設定はこれで大丈夫なはずです。他の設定も調べたいけど英語でよく分からない場合は、日本語ファイルをﾎﾎ冢次男さんが作ってくれていますのでプラグインに追加してみてください。

CSSを変更する

設定はできましたが、他とかぶらないようにデザインを変えたいですよね。クラス名などは設定によって若干変わってくると思いますが、生成されるHTMLは以下のようになっています。

僕は見出しにアイコンフォントを付けたり、リストにpaddingを入れたりしています。詳しくはソースコードを見てください。

あと忘れずに書いておきたいのが、目次に戻るためのページ内リンクです。

目次にはtoc_containerというidが付くのでaタグにhref="#toc_container"と指定してあげます。これでクリックすると目次に戻るページ内リンクになります。

---

記事の内容を箇条書きしておくと「読んでみよう」という気持ちになりやすいと思います。また、読みたい箇所だけすぐに移動したいというひともいるでしょうから、ページ内リンクは親切な機能だと思います。
このプラグインを使えば過去記事を修正することなく目次を表示させることができるので、ちょっとお試しでというのもアリかもしれません。