投稿記事に目次を自動で表示するWordPressプラグイン「Table of Contents Plus」

当ブログではキャプチャが多いこともあってどうしても記事が長くなることが気になっていたのですが、手作業で目次を設定するのはちょっと手間がかかるのでどうしたものかと思っていたところ、自動で記事内に目次を作って表示してくれるWordPressプラグインを見つけたので、さっそく設置してみましたので、設定方法をメモしておきます。

使用するプラグイン

今回使用するプラグインはこちらです。

「Table of Contents Plus」
[browser-shot url=”http://wordpress.org/plugins/table-of-contents-plus/” width=”610px”]

→　WordPress Plugin Directoryのページ：WordPress › Table of Contents Plus « WordPress Plugins

→　開発者さまのサイト：Table of Contents Plus | dublue

表示イメージ

こんな感じで表示されます。

前提条件

このプラグインでは、記事内の見出し（<h2>や<h3>などの要素）から目次が生成されるので、記事が見出しタグ付きの階層構造になっていない場合にはうまく目次が表示されないようです。

プラグインのインストール

まず、プラグインをインストールします。

WordPress管理画面の［プラグイン］＞［新規追加］から「Table of Contents Plus」と検索して、

検索結果に表示された「Table of Contents Plus」の「いますぐインストール」をクリックします。

インストールが終わったら「有効化」します。

プラグインの使いかた

目次を表示するページや見ための設定をします。設定画面は、プラグイン画面の「Table of Contents Plus」の「Setting」もしくは、管理画面の［設定］＞［TOC+］から開けます。

基本設定

プラグインの設定画面では、以下の基本設定ができます。
※一部サイト独自の設定により表示されている項目があります（詳細下記）

では、設定項目を見ていきます。

• Position：目次を表示する位置

目次を表示する位置は、「Position」で設定します。


設定できる箇所は下記の4箇所です。当ブログの場合だと、デフォルト値の「Before first heading」が構成に合っていて自然だったので、それを設定しています。

• Before first heading：最初の見出しの前（デフォルト値）
  
• After first heading：最初の見出しの後
  
• Top：記事の一番上
  
• Bottom：記事の一番最後
  

見出しが何個以上あるときに目次を表示する、といった条件付けができます。下記の画像だと、3つ以上の見出しがあるときに目次が表示されます。

記事（post）または固定ページ（page）に目次を表示するかどうかを設定できます。※下記画像内で線を引いているところは、当ブログで使用しているプラグインやテーマの設定によって表示されているので、消しておきました。

Show hierarchy：目次を階層構造で表示するか
見出しの構造に合わせて目次を階層構造で表示する場合は、チェックを入れます。

Number list items：目次の項目に番号を振るかどうか
目次の項目のに番号を振りたい場合は、チェックを入れます。

Enable smooth scroll effect：目次の項目のリンクをクリックしたときにスクロールで遷移するかどうか
目次の項目リンクをクリックすると記事内の該当見出し箇所に遷移しますが、その際にスクロールで遷移させたいときはチェックを入れます。

Appearance：目次の見ための設定
目次の見た目を下記の項目で設定できます。

• Width：目次の横幅の設定
  pxや%指定が選択できます。
• Wrapping：左寄せ、右寄せなど
  指定なし、左寄せ、右寄せが選択できます。
• Font size：文字のサイズ
  pt、%、emで指定できます。
• Presentation：デザイン（見ため）
  デフォルトで用意されている5種類の見ためから選択するか、カスタム設定（CSSを自分で指定）ができます。

おまけ（ご参考）

ちなみに、当ブログの目次の見ためでは、上記の「White」を選んだ上で、下記のようなスタイルを指定しています。

[code]#toc_container {
font-size: 14px;
max-width: 100%;
margin: 30px 0;
padding: 15px 20px;
border: 2px solid #E0E0E0;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

#toc_container p.toc_title {
font-size: 1.2em;
text-align: left;
}

#toc_container span.toc_toggle {
font-size: 12px;
}

#toc_container span.toc_number {
color: #333333;
margin-right: 5px;
}[/code]

（2014年2月10日追記）上記のCSSを適用すると、下記のように表示されます。

詳細設定

詳細は省略しますが、以下のような項目も設定できます。

サイドバーなどへの表示

基本的には上記の設定で指定したページ（記事や固定ページ）の指定した箇所に自動的に目次が表示されますが、サイドバーなどにもウィジェットをつかって目次が表示できます。

表示イメージ

個別記事のサイドバーなどにこんな感じで表示できます。

ウィジェットの設定

管理画面のウィジェット設定画面を開くと「Table of Contents Plus」のウィジェットができていますので、これを表示したいところ（サイドバーなど）にドラッグアンドドロップで設置します。

設置したウィジェットは下記の項目が設定できます。

• 目次のタイトル
  特に設定しない場合は、上記の「基本設定」で設定したタイトルがそのまま表示されます。
• Show the table of contents only in the sidebar
  これにチェックを入れると、記事内の目次は表示されず、ウィジェットの目次のみが表示されます。

サイトマップの作成機能

また、このプラグインにはサイトマップの作成機能もありますが、ここでは省略します。（後日別記事にするかもしれません）

参考にさせていただきました！

こちらのブログでこのプラグインのことを知りました。ありがとうございます！
→　Table of Contents Plus – 記事の目次を自動生成するWordPressプラグイン | ネタワン

まとめ

自動で目次が作られるだけでも便利なのに、見ためや表示位置が細かく指定できて、とても使いやすいプラグインです。これですこしでも記事が見やすくなっていたらいいなぁと思いました。