記事に目次を追加するプラグイン:Table of Contents Plus

こんにちは。㈱シンラウンド代表の中島 達(@NakajimaSatoru)です。

記事のリード文の下に、クリックするとその場所まで遷移してくれる目次をつける事で

  • ユーザの利便性が高まる
  • 記事の全体像を見せる事で、記事の内容を伝える

といった効果があります。

そのため、基本的には全ての記事に目次をつけるべきなのですが…
1つずつコードを追加しながらやっていると、手間が非常に掛かってしまいます。

そこで、全ての記事に自動で目次を付けてくれるプラグイン;Table of Contents Plusの使い方をご紹介します。

目次を自動挿入する仕組み

目次に関しては、記事を書く際に「見出し」として設定したものを自動で目次としています。

そのため、記事の構成や、見出しの付け方がわかりにくいものだと、目次自体もわかりにくいものになってしまうので、まずは見出しをきちんと付けるようにしましょう。

プラグイン「Table of Contents Plus」のインストール&有効化

管理画面にログインし、[プラグイン]-[新規追加]をクリック

検索窓に「Table of Contents Plus」と入力

「Table of Contents Plus」を「今すぐインストール」⇛「有効化」を実施

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

普段、私が利用する際に行う設定をご紹介させて頂きます。
各項目自体、文章の意味がわかりにくいものではありませんので、必要に応じてカスタマイズしてご利用ください。

[設定]-[TOC+]をクリック

表示条件:2に変更

目次を表示するにあたっての、見出しの最低数を決めます。

基本的に目次を表示させるようにしたいため、最低数の「2」を選択します。

以下のコンテンツタイプを自動挿入:pageのチェックを外し、postにチェック

目次を自動で追加するページを指定します。

page:固定ページ
post:記事

となりますので、pageのチェックを外し、postにチェックを入れます。

見出しテキスト:テキストを目次、表示、非表示に変更

目次を追加した時のテキストの設定になります。

日本人向けのサイトの場合には、基本日本語を利用する事が好ましいので、日本語の「目次」や「表示・非表示」に変更します。

[上級向け設定]-[見出しレベル]を「heading2-h2」「heading3-h3」のみに変更

09

どのレベルの見出しまでを目次にするかの設定を行います。

目次の仕組みでも記載したように、目次に関しては、設定された見出し(h2,h3,h4,h5など)により自動で設定されます。

その際に、h4,h5まで目次にしてしまうと、記事によっては目次自体が長くなりすぎてしまい、目次を見て先を読む気を失わせてしまう場合もあります。

そこで、目次として表示する見出しを「h2」「h3」だけにする事で、見出しが長くなりすぎてしまう問題へ対応します。

まとめ

目次を自動で挿入するプラグインをご紹介させて頂きました。

目次に関しては、

  • ユーザの利便性が高まる
  • 記事の全体像を見せる事で、記事の内容を伝える

と、追加することで、記事を読んで貰える可能性が高くなるため、必ず入れるようにしましょう。

投稿者プロフィール

中島 達(Nakajima Satoru)
中島 達(Nakajima Satoru)
株式会社Synround 代表取締役

「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。

web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。

過去の事業:Webサービス×2、レンタルスペース5店舗

ABOUTこの記事をかいた人

株式会社Synround 代表取締役 「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。 web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。 過去の事業:Webサービス×2、レンタルスペース5店舗