スポンサーリンク

スポンサーリンク

便利なプラグイン WordPress

【WordPress】自動で目次を生成してくれるプラグイン Table of Contents Plus

2018年7月8日

シェア
  • 2018年12月2日
    追記、一部書き直しをしました。
  • 2018年8月28日
    『ショートコードで表示させたい見出しレベルを追加する』を追記しました。

 
記事を書いていると『目次』を設置したいと思うことありませんか!?
でも記事ごとに毎回自分でソースを書いて目次を作るのは非常に手間です。

今回はそんな手間を省ける『目次を自動で生成してくれるプラグイン』をご紹介します。

 

 

導入する前に

今回ご紹介するプラグイン『Table of Contents Plus』は記事内の見出し(Hタグ)を認識して自動で目次を生成するものです。

見出しにHタグを使っていないと目次は生成されません。
『Table of Contents Plus』プラグインを使って目次を表示させたい場合は見出しをHタグにする必要があります。

 

スポンサーリンク

 

 

目次を自動生成してくれるプラグイン Table of Contents

Table of Contents Plus
Table of Contents 公式ページ

 

インストール

管理画面から[プラグイン][新規追加]『Table of Contents Plus』を検索してください。

[今すぐインストール]して有効化してください。

 

基本的な設定

設定は管理画面から[設定][TOC+]と進んでください。
Table of Contents Plusの設定

位置
目次の表示位置(自動生成の場合)
表示条件
見出しの数が何個以上あれば目次を表示させるかの設定

例えば「3」にした場合、H2、H3などのHタグが3つ以上あれば目次が自動生成されます。

以下のコンテンツタイプを自動挿入
目次を表示させるページにチェックを入れて設定(自動生成の場合)

『post』が投稿記事、『page』が固定ページです。手動で目次を挿入する場合はチェックを外してください。

見出しテキスト
目次の上部に表示される見出し部分の設定
階層の表示
階層の表示の設定
番号振り
目次に番号を表示させるかの設定

 

基本設定(外観)

横幅
目次の横幅の設定
回り込み
回り込みの設定
文字サイズ
目次の文字サイズの設定
プレゼンテーション
目次のデザインの設定
カスタムを選択すると背景色、ボーダーの色、リンク色の設定ができます。

 

上級者向け

上級者向けの設定ですが、設定しておいた方がいい項目がありますので設定してください。

設定画面の下の方に『上級者向け』とあります。その横の[表示]をクリックしてください。

クリックすると上級者向けの設定項目が出てきます。
以下の2箇所の設定をしてください。

見出しレベル
見出しレベルの設定
目次に表示する見出しレベル(Hタグ)にチェック。表示しない見出しレベルはチェックを外します。

例えば、H2とH3にチェックを入れ、上で設定した『表示条件』を3にした場合、H2とH3の見出しが3つ以上あれば目次が生成されます。

WordPressのテーマの多くが記事タイトルにH1を使用しています。なので見出しに使うのは『H2~6』にしておくといいと思います。

除外する見出し
除外する見出しの設定

お使いのプラグインなどによって見出しにHタグを使っているものがあります。その見出しも拾ってしまうので表示させたくない場合は除外する見出し名の設定をしてください。

きらり
設定をしたら忘れずに[変更の保存]をしてくださいね。

 

 
 

使い方

自動挿入

上記の設定をすれば『以下のコンテンツタイプを自動挿入』でチェックを入れたページの『見出しレベル』『表示条件(見出しの数)』を認識し自動で目次が挿入されます。
(『表示条件』で設定した数より見出しの数が少なければ表示されません。)

設定が完了すればもう目次が挿入されていますので確認してみてください。

 

表示位置を変えたいとき

もし、目次の表示位置を変えたい場合は、表示させたい位置にショートコードを入れれば表示位置を変更させることができます。
※しょーコードは下記の『手動で挿入する』をみてください。

 

目次を表示させたくないとき

中には「目次を表示させたくない」ページもあると思います。

目次を表示させたくない場合は、ページのどこでもいいので以下のコードを挿入してください。

 

手動で挿入する

「表示位置を変えたい」「自動挿入ではなく自分で必要な記事にだけ入れたい」という場合は以下のコードを表示させたい場所に挿入してください。

 
2018年8月28日 追記

ショートコードで表示させたい見出しレベルを設定する

ショートコードに『heading_levels』を追加すると、表示させたい見出しレベルの指定ができます。

例えば、私の場合は目次に表示させる見出しはH2とH3にしています。
でも時々「このページだけはH4の見出しも表示させたい!」ということもあります。
そんなときにショートコードに『heading_levels』を追加して、H2、H3、H4の見出しを目次に表示させる設定をします。
指定方法は[toc heading_levels=2,3,4"]と、表示させたい見出しレベルの習字を『,(半角)』で区切って指定します。

 

ショートコードを簡単に設置するには?

プラグイン『Add Quicktag』を使っている場合、ショートコードを登録しておくとワンタッチでショートコードの挿入ができます。

 
 

目次のカスタマイズ

CSSを使用して目次のデザインのカスタマイズもできます。
カスタマイズ方法については、解説しているところがたくさんありますのでそちらを参考にしてください。

私が目次のカスタマイズで参考にさせてもらった記事

 
 

最後に

記事が長文になるとユーザーが知りたい情報にたどり着けず、読むのを諦めて記事から離脱してしまうこともあります。
目次を設置するとどんな内容が書かれているかわかりやすくなりますし、ユーザーが知りたい情報にすぐにたどり着くことができます。

多くの人に読んでもらうためにも目次の設置をしておいた方がいいと思います。

 

スポンサーリンク

 

フォロー

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら

 

おすすめ

おすすめ

       
シェア

-便利なプラグイン, WordPress
-,

Scroll Up

Copyright© きらり☆彡 , 2018 All Rights Reserved Powered by STINGER.