ブログページ内の目次を自動作成してくれるWordPressプラグイン「Table of Contents Plus」をご紹介します。

右画像のようなページ内の目次を自動で作成してくれます。目次を挿入する位置も自動で判別してくれますので、手間いらずで、過去のブログにも適用されますので、とても良いですね。

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

プラグインをダウンロードしてインストールする方法

1. WordPressの「Table of Contents Plus」プラグインページからZIPファイルをダウンロードします。
2. ダウンロードしたZIPファイルを解凍します。
3. 「table-of-contents-plus」フォルダーをプラグインディレクトリ “/wp-content/plugins/” にアップロードします。
4. WordPress管理メニュー「プラグイン」で「Table of Contents Plus」を有効化します。

プラグイン画面からインストールする方法

1. WordPressの管理メニュー「プラグイン > 新規追加」から「Table of Contents Plus」で検索します。
2. 「Table of Contents Plus」を今すぐインストールして有効化します。

Table of Contents Plus プラグインの設定方法

プラグインの日本語化

英語が苦手な方は、「Table of Contents Plus」の日本語化をしましょう。

1. 「Table of Contents Plus」の日本語化ファイルのダウンロードをします。
2. すると、「toc+-ja.mo」ファイルがダウンロードされます
3. サーバーの「~/wp-content/plugins/table-of-contents-plus/languages/」ディレクトリにファイルをアップロードしましょう。
4. WordPress管理メニューの「設定 > TOC+」を表示すると日本語化されています。

プラグインの一般設定方法

日本語化したので説明なしで良さそうですが、補足程度に説明しておきます。
上記画像は、このブログの設定値です。

• 表示位置
  「最初の見出し要素の前」は、記事中に最初に出てきた「Hx」タグの直前に目次を表示。これがデフォルトだし自然な位置ではないでしょうか。
• 表示の振り分け
  ページ中に「Hx」タグが何個以上あったときに目次を表示するかを設定。
• コンテンツの種類での自動挿入
  post　投稿のページで目次を表示する。
  page　固定ページのページで目次を表示する。
• 目次の見出し文
  そのままの意味です。
• 階層を表示する
  ここは必須でチェックを入れた方が良さそうです。
• リスト項目に番号を振る
  番号を自動で振ってくれます。「1」「2」「2.1」「2.2」「3」・・・こんな感じです。
• スムーズスクロール効果の有効化
  そのままの意味です。

プラグインの外観設定方法

• 横幅
  「自動幅」か「相対100%」が良いようです。このブログは「自動幅」設定にしています。
• ラッピング
  目次を左寄せ、右寄せにするかの設定。
• フォントサイズ
  フォントサイズを「pt」「%」「em」で設定。
• 背景色
  背景色を複数から選べます。カスタム設定も有り。

プラグインのカスタマイズ

リスト項目に番号振りたいのですが、上画像のようになります。リスト番号にもリンクが張られて、ぶら下げインデントもされない。
これでは少し不格好なので、CSSを追加してみました。

テーマのCSSを追加しますので、修正は自己責任でお願いいたします。

screen.css を修正する手順

1. CSSを修正する前に「~/wp-content/plugins/table-of-contents-plus/screen.css」のコピーと取っておきましょう。
2. 「~/wp-content/plugins/table-of-contents-plus/screen.css」の最後に下記コードを追加します。
3. Table of Contents Plusプラグインの設定で、「リスト項目に番号を張る」のチェックを外します。
4. このCSSは3階層までしか対応していませんので、Table of Contents Plusプラグインの設定で、「詳細設定 > 適用する見出しレベル」で3階層までチェックを入れてください。

screen.css のCSS追加コード

#toc_container ul.toc_list { 
	margin-left:5px;
	counter-reset:section; 
}
#toc_container ul.toc_list li {
	text-indent: -1.2em;
	margin-left:1.2em;
	padding-top: 0.3em;
}
#toc_container ul.toc_list li ul { 
	counter-reset:subsection; 
}
#toc_container ul.toc_list li ul li { 
	text-indent: -1.8em;
	margin-left:1em;
}
#toc_container ul.toc_list li ul li ul { 
	counter-reset:sub2section; 
}
#toc_container ul.toc_list li ul li ul li { 
	text-indent: -2.5em;
	margin-left:1em;
}
#toc_container ul.toc_list li:before{
    counter-increment:section;
    content:counter(section) ". ";
}
#toc_container ul.toc_list li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
#toc_container ul.toc_list li ul li ul li:before {
    counter-increment:sub2section;
    content:counter(section) "." counter(subsection) "." counter(sub2section) "  ";
}

これで、リスト番号にもリンクが張られなくなり、ぶら下げインデントされています。