記事内に自動で目次をつけるプラグイン「Table of Contents Plus」の使い方

ワードプレスの記事内に目次をつけたい！

WordPressのプラグイン「Table of Contents Plus」を使うと、記事内に簡単に目次を作成することができます。
[adsense]

概要

「Table of Contents Plus」は、HTMLタグであるhタグで囲った見出し文字を、自動で目次に仕立ててくれるプラグインです。

「hタグで囲った見出し文字」は、記事文中に

<h3>機能の説明</h3>

という形で記述します。

記事作成画面にhタグを入力

プラグインをインストールするだけで、記事内に上記のようなhタグの見出しを書けば自動で目次が生成されます。

「Table of Contents Plus」のインストール

通常のプラグインインストール手順でインストールできます。

まずワードプレスの管理ページを開き、「プラグイン」＞＞「新規追加」画面を開いたら、「プラグインの検索」窓で「Table of Contents Plus」と検索します。

TOC+

「いますぐインストール」をクリックし、インストールが完了したら「プラグインを有効化」します。

インストール後の設定は、サイドバーの「設定」＞＞「TOC+」で行ないます。

スタンダードな目次の作り方

「細かいことはいいので、ここのページのような目次を作りたい！」

という場合は、以下の手順をそのまま設定してみてください。

設定変更する箇所は６つです。

サイドバーの「設定」＞＞「TOC+」を開き、「Main Options」タブ内の以下の設定を変更します。

• 「Show when」を「2」にします。
• 「Auto insert for the following content types」欄の「Pages」にチェックを入れます。
• 「Heading text」欄に「目次」と入力します。
• 「Allow the user to toggle the visibility of the table of contents」のチェックを外します。
• 「Enable smooth scroll effect」にチェックを入れます。

Advanced（show）のshowをクリックします。

• 「Heading levels」にある「heading1-h1」、「heading2-h2」のチェックを外します。

「Update Options」をクリックすると、設定変更が保存されます。

この設定の状態で、記事中にh3タグを使用した見出しを２つ以上記述すれば、目次が自動生成されます。

設定項目

目次作成に関連する「Main Options」の設定項目についての説明です。

Position

目次を表示する場所を指定します。

Show when

目次を生成する条件（hタグの数）を指定します。

Auto insert for the following content type

目次を生成するページの種類を指定します。
「post」は投稿、「page」は固定ページです。

Heading text

目次内のタイトルを表示するかどうか、また表示する場合はタイトル名を記入します。

「Allow the user to toggle the visibility of the table of contents」
目次の折り畳み機能を有効にするかどうかを指定します。
また折り畳む時の「開く」「閉じる」のワードを指定できます。

「Hide the table of contents initially」
デフォルトで目次を閉じた状態にするか指定できます。
バグなのか他のPluginの影響なのかわかりませんが、当ブログではこの機能（デフォルト閉じる）がうまく動いていません。

Show hierarchy

目次の見出しを階層構造にするかを指定します。

Number list items

見出しに番号をつけるかを指定します。

Enable smooth scroll effect

目次の見出しをクリックした時に、該当箇所へなめらかにスクロールします。

Appearance : Width

目次の幅を指定します。

Appearance : Wrapping

目次の位置（左寄せ、右寄せ）を指定します。

Appearance : Font size

フォントの大きさを指定します。

Appearance : Presentation

目次のデザインを選択できます。

Advanced : Lowercase

アンカーリンクに使用するアルファベットを全て小文字にします。
見出しに英数字が使われている場合、その文字がアンカーリンクとなるのですが、そこで使用されているアルファベットを全て小文字にするかどうかを指定できます。

Advanced : Hyphenate

見出し内に半角ブランクが使われている場合、デフォルトではアンダーバー「 _ 」に変換されますが、それをハイフン「 – 」に変更します。

Advanced : Include homepage

トップページ（フロントページ）に投稿ページや固定ページが表示される際に、目次を表示するかどうかを指定します。

この機能は、テーマファイルによってはうまく機能しない場合があるようです。

Advanced : Exclude CSS file

このプラグイン自体のCSSを無視するかどうかを指定します。
チェックを入れた場合このプラグイン自体のCSSが無視されるため、「appearance」オプションで指定した値が無視されます。

Advanced : Heading levels

どのhタグを目次生成の見出しとして利用するかを指定します。

Advanced : Exclude headings

目次にしたくない見出しがある場合、文字列を指定して除外できます。
＊はワイルドカード、｜はorで利用できます。

バージョン1505で検証したところ、日本語には対応していないようです。

Advanced : Smooth scroll top offset

目次の見出しをクリックしてページスクロールした際、ページ上部に空けるすき間（オフセット）を指定します。

デフォルト30pxは、WordPressのツールバーの高さです。

「Enable smooth scroll effect」を有効にしている場合のみ、この項目を指定できます。

Advanced : Restrict path

目次を生成したいページを、URLのパスで指定します。

Advanced : Default anchor prefix

アンカーリンクに使用される文字は半角英数字ですが、見出しの文字に英数字がない場合、この欄で指定したアンカー文字が使用されます。

Q&A

目次が表示されない

インストール直後の設定では、固定ページのみ目次を表示するようになっており、投稿ページには表示されません。
「Auto insert for the following content type」の設定欄で「Page」にチェックを入れましょう。

また、同じく初期設定では、Hタグを4つ以上記載しないと目次は作成されません。

「Show when」の設定値を変更しましょう。

全てのhタグの見出しを同列の目次にしたい

「Show hierarchy」のチェックを外します。

特定の見出しを、目次の対象から外したい

「Adbanced:Exculde heading」に、除外したい見出しワードを記入します。

例えば、この記事『記事内に自動で目次をつけるプラグイン「Table of Contents Plus」の使い方』の目次だけを作成したくない場合、

*Table of Contents Plus*

と入力します。

バージョン1505で検証したところ、日本語には対応していないようです。

目次をページ内の好きな位置に配置したい

[toc] を表示したい場所に記述します。

特定のページだけ目次を表示させたくない

[no_toc] を記事内に記述します。

参考

TOC+作者のページ