株式会社アルファクトリー

最新のIT情報を発信する 大阪のIT会社で働く社長のブログ CEO BLOG

記事の見出しごとに目次を作れるプラグイン

最近よく見かける、ブログ記事の「目次」。

こちらは「プラグイン」で簡単に作成することが出来ますので、ご説明します。

『Table of Contents Plus』

2013-1016-094817[1]

WordPressにてよく使われる見出しタグ、<h2>や<h3>を認識して自動的にリンク付きの目次を作成してくれるWordpressプラグインです。最近、ニュース系のブログメディアなどを運営しているところは結構、実装しています。このブログに導入しましたので、備忘録を作成します。

インストール方法

インストールはこちらから
WordPress Table of Contents Plus WordPress Plugins

まずは、プラグインをインストールします。インストール方法などは省きますが、管理画面で「Table of Contents Plus」と検索するか上記から、ダウンロードしてFTPサーバーにアップロードしてください。

初期設定

まずインストール後は初期設定をしてください。有効化した時点で目次が作成されますが、デフォルトの設定では、個別記事には目次は表示されません。表示したい場合は少し設定が必要です。

インストール済みプラグインから、「Table of Contents Plus」の設定。
もしくは設定画面から「TOC+」をクリックしてください。

設定方法

①見出しが何個以上あれば、目次を出すかを設定

②「post」⇒個別記事、「page」⇒固定ページ
(※)デフォルトは固定ページだけになっているので個別記事に出したい場合は「post」にチェック

③目次の名前です。目次や見出しなどでいいかと思います。

④表示、非表示の切り替え名です。表示、非表示でいいかと思います。

※その下の初期状態非表示はチェックすると記事が開いた際は目次が閉じた状態がデフォルトとなります。

導入後

こんな感じのモノが出てきます。

2016-08-08_205826

テーマ自体もカスタマイズ可能です。お好みのテーマを選択してみてもいいかと思います。

目次の位置

目次を表示する位置も変更可能です。このプラグインでは表示する場所から変更出来ます。

2016-08-08_212547

1、最初の見出しの前(デフォルト): 一番初めの見出しの前に表示。 デフォルト設定です。

2、最初の見出しの後(デフォルト): 一番初めの見出しの後ろに表示。

3、トップ: 記事の一番上部に表示。

4、ボトム: 記事の一番下部に表示。

4通りの設定が出来ますが、デフォルト設定が1番、一般的に見やすいかと思います。

一部の見出しタグを除外する

 

「関連記事はこちら」や固定で何かを出している場合で<h2>や<h3>が使われている場合、それも目次に入ってしまうので、下記で除外しましょう。

上級者向けをクリックして下記に「関連記事はこちら」などと入力しておいてください。

2016-08-08_213237

※ちなみに「h4」だけ除外したい場合などは、上記の見出しレベルのheading4-h4のチェックを外せばオッケーです。

まとめ

目次の生成に関して自作で組んだりも出来ますが、このプラグインは入れるだけなので結構便利です。

目次の生成自体のメリットはユーザビリティ的に言えば、長い記事などを見やすくするという事でしょうか。ユーザビリティを配慮したサイトはSEO的に有利と言えますのでこういったこともやっておくと良いですね。

ただ、デメリットは<h3>などタグで見出しを作っておかないと、このプラグインを導入してもあまり意味がないと言えます。


PAGETOP