Stable Life
サイトアフィリやメルマガを駆使して稼ぐ元公務員社長井野瑛太のオフィシャルブログ
画像解説版

Table of Contents Plusのインストール方法と使い方【画像解説】

サイトを訪れた訪問者というのは、結構短気なものです。

ごちゃごちゃとしていて、目的の情報を探しにくいサイトというのは、すぐに離脱されてしまいます。

そこで、目的の情報にたどり着きやすいようユーザビリティを高める一つの手段として、記事に目次を作成するという方法があります。

今回は、WordPressブログに簡単に目次を作成することのできるWordPressプラグイン『Table of Contents Plus』のインストール方法と使い方について画像を用いて丁寧に解説していきます。

Table of Contents Plusでできること導入に際しての注意点

Table of Contetnts Pluesは、下記の画像のような目次を自動的に生成してくれるプラグインです。

このプラグインは、記事内に記載されたhタグ(見出しタグ)を利用して、自動生成する仕組みとなっています。
そのため、正しく目次を生成するための注意点として、きちんとhタグを用いて階層構造のある記事を書いている必要があります。

Table of Contents Plus00

Table of Contents Plusのインストール

WordPressへのログインとプラグインの新規追加

WordPressにログイン後、メニューより『プラグイン』⇒『新規追加』をクリックします。
Table of Contents Plus01

検索窓に『Table of Contents Plus』と入力し、Enterキーを押します。
Table of Contents Plus02

検索結果に表示された『Table of Contents Plus』のところの『いますぐインストール』をクリックします。
Table of Contents Plus03

『OK』をクリックします。
Table of Contents Plus04

プラグインの有効化

『プラグインを有効化』をクリックします。
Table of Contents Plus05

Table of Contents Plusの設定方法

設定画面の呼び出し

メニュー上の『設定』⇒『TOC+』をクリックします。
Table of Contents Plus06

設定項目の説明

1.Position
⇒目次を表示する場所をプルダウンメニューから選択します。
2.Show when
⇒目次を表示する条件について見出しがいくつ以上あるときに表示するか数字で指定します。
3.Auto insert for the following content types
⇒表示させる記事の種類にチェックを入れます。
 Post・・・投稿記事
 page・・・固定ページ
4.Heading text
⇒タイトルとして表示する文言を設定や、目次の表示・非表示を行う際の文言の設定を行います。
※デフォルトでは英語で記述されていますので、必要に応じて、『目次』・『表示』・『非表示』などと日本語で書きなおすなどします。
5.Show hierarchy
⇒目次の階層を表示するかどうかについて設定します。
Table of Contents Plus07

6.Number list items
⇒目次に番号を付けるかどうか設定します。
7.Enable smooth scroll effect
⇒目次をクリックした時に、滑らかにスクロールさせるかについて設定します。
8.Appearance
⇒目次の外観について、横幅、表示位置、文字サイズ、デザインの設定を行います。
9.Advanced
⇒『show』をクリックすると、より詳細な設定が表示されます。
※この項目は、後ほど使用します。

以上の設定が終わったら、画面下部の『Update Options』をクリックして、変更を保存します。
Table of Contents Plus08

実際にサイトの記事を確認すると下記のように表示されています。
目次は生成されているものの、項目が多すぎて逆に見づらくなっているようにも思われます。
引き続き、次の項目で、より見やすくする設定方法について説明しています。
Table of Contents Plus09

Table of Contents Plusのより詳細な設定

目次の項目を減らしてスッキリさせる設定方法

上記のとおり、デフォルトの設定では、h1~h6まですべて表示する設定となっているため、項目が多すぎごちゃごちゃしてしまいます。

詳細設定により、表示する項目を減らし、見た目をスッキリさせます。

Advanced(詳細設定)で、『Heading levels』から表示させない見出しのチェックを外し、画面下部の保存ボタンをクリックします。
Table of Contents Plus10

再度、目次の表示を確認すると、下記のとおり、表示される項目が減り、見た目がスッキリしました。
Table of Contents Plus11

Related Posts(関連記事表示プラグイン)併用時の問題点の解消方法

当サイトでは、Related Postsというプラグインを用いて、下記のように、記事下に関連記事を表示させています。
Table of Contents Plus12

関連記事部分にも見出しタグが用いられているため、下記のように、目次に関連記事部分のタイトルが表示されてしまっています。
Table of Contents Plus13

Advanced(詳細設定)中の『Exclude headings』(除外する見出し)に関連記事部分のタイトルを記入し、画面下部の保存ボタンをクリックします。
Table of Contents Plus14

すると、表示されてしまっていた関連記事の目次の表示が消えました。
Table of Contents Plus15

記事中の任意の場所に目次を表示させる方法

Table of Contents Plusでは、設定を行った条件で自動的に目次を表示しますが、下記のショートコードを記事中の目次を表示させたい場所に記入することにより、任意の場所に表示させることが出来ます。

特定の記事の目次を表示させない方法

Table of Contents Plusでは、設定を行った条件で自動的に目次を表示しますが、下記のショートコードを記事中の任意の場所に記入することにより、その記事では、目次が表示されないようにできます。


これらのショートコードはAddQuicktagプラグインに登録して、記事編集時に呼び出せるようにしておくと便利です。

以上になります。