ワードプレスのプラグイン!Table of Contents Plusで目次を出す方法

ワードプレスで記事を書いているとき、
記事が長くなったりすることってありますよね。
こういうとき、読者のために目次があれば、
かなりわかりやすい記事になります。
目次をクリックするだけで、長い文章から
お目当ての記事を探す手間が省けますので、
読者にとっては、ありがたいです。

実は、これプラグインで一発解決しちゃいます。
そのプラグインは、『Table of Contents Plus』
というプラグインです。
インストール方法から設定まで紹介いたします。

ちなみにこんな感じで表示されるようになります。

Table of Contents Plus

Table of Contents Plusのインストール方法

まず、ワードプレスのプラグインを開けます。
そこより『新規追加』をクリックし、
検索窓に『Table of Contents Plus』と入力し
検索してください。
Table of Contents Plus

次に、一番上に『Table of Contents Plus』がでてきますので、
『今すぐインストール』をクリックします。

Table of Contents Plus

そして、『有効化』をクリックします。

Table of Contents Plus

これで、インストールの完了です。

Table of Contents Plusの設定方法は?

次に設定していきます。
プラグイン一覧より、『Table of Contents Plus』を探し出し、
『Settings』をクリックします。

Table of Contents Plus

まずは、目次の位置設定です。

Table of Contents Plus
『Before first heading』を選択すると、
一番最初の小見出しの上に設定されます。
小見出しというのは、h2やh3などのことを指します。

Table of Contents Plus

『After first heading』は、一番最初の小見出しの
ちょうど真下にセッティングされます。

Table of Contents Plus

『Top』を選択した場合は、タイトル直下に目次が入ります。

Table of Contents Plus

『Bottom』を選択した場合は、記事の一番したに配置されます。

Table of Contents Plus

私の場合は、1番最初の見出しの上に配置するのがしっくりと
きたので、その部分に配置しております。
他の方のサイトも見てみると、
1番最初の見出し上に設置している方が多いようですね。

Show whenの設定

次にshow whenという部分を設定していきます。
こちらは、数字が書いてると思いますが、
小見出しの数を表しています。
記事内に小見出しが3つある場合は、
3以下を選択すると、目次が現れ、
4以上を選択すると、目次は非表示になります。

ですので、全体の記事内容に合わせて、
決めていくと良いでしょう。
ちなみに私は、この部分は3に設定しています。

Table of Contents Plus

Auto insert for the following content typesの設定

Table of Contents Plus

この部分は、どこに目次を張り付けるかという部分で、
基本的には、『post』にのみチェックを入れておくと良いでしょう。
『page』のチェックは外しておいてかまいません。

Heading textの設定

Table of Contents Plus

次にテキストの設定となります。
そのままの状態ですと、目次のタイトルが『Contents』
となっていますので、これを日本語に直しましょう。
私の場合ですと、この部分を『目次』としました。

そして、『Hide text』の部分は、記事中のこの部分を
クリックすると目次を非表示にできる部分となります。
私の場合は、『閉じる』にしましたが、『非表示』など
わかるものでしたら、何でも構いません。

なお、Show textは、非常時にした際に、再度開けるときの
言葉になりますので、この部分も変更しておきましょう。
たとえば、『開ける』や『表示』などが良いかと思います。

Show hierarchyの設定

こちらは、見出しの階層を表示するか
しないかの設定となります。
特にこだわりがなければ、表示するにしておいて
良いかと思います。

Number list itemsの設定

目次に番号をつけるかつけないかの設定になります。
私のサイトでは、番号ありで競ってしています。

Table of Contents Plus

Enable smooth scroll effectの設定

この部分にチェックをはずすと、勝手にスクロールして移動します。
チェックを入れると、そのままその場所までジャンプします。
好みに合わせて使うと良いでしょう。

Appearanceの設定
Widthの設定

Widthの設定は、横幅の設定となります。
特にこだわりがなければ、Auto(default)の状態で問題ありません。

Wrappingの設定

Wrappingの設定は、目次の枠を左に位置させるか、
右に位置させるか、という設定ができますが、
ここを変更すると表示が崩れることがありますので、
基本的には、『None(default)』のままで結構です。

Font sizeの設定

文字サイズの設定になります。
そのサイトの構造などにもよりますが、
基本的には触らなくても良いです。

Presentation設定

Table of Contents Plus
こちらは、目次内の背景の設定になります。
サイトの色合いに合わせて変更すると良いでしょう。

設定が一通り完了したら、
『Update Options』をクリックして保存しましょう。

Table of Contents Plus

これで、完了です。
記事を確認して、うまく配置されているか
見てみましょう。

お疲れ様でした。

お問い合わせはこちら

お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文

 確認ページはございません。内容をご確認の上チェックを入れてください。

コメントを残す




1 × 八 =

CAPTCHA