【WordPress】自動で目次を生成してくれるプラグイン Table of Contents Plus
記事を書いていると『目次』を設置したいと思うことありませんか!?
でも記事ごとに毎回自分でソースを書いて目次を作るのは非常に手間です。
今回はそんな手間を省ける『目次を自動で生成してくれるプラグイン』をご紹介します。
テーマによっては目次を生成できる機能がついているものがあります。テーマについている目次生成機能の使い方はお使いのテーマによって異なります。
WordPressテーマ『Luxeritas(るくせりたす)』には目次を生成できる機能が実装されています。Luxeritasの目次の設定方法は以下の記事をご覧下さい。
導入する前に
今回ご紹介するプラグイン『Table of Contents Plus』は記事内の見出し(Hタグ)を認識して自動で目次を生成するものです。
見出しにHタグを使っていないと目次は生成されません。
『Table of Contents Plus』プラグインを使って目次を表示させたい場合は見出しをHタグにする必要があります。
目次を自動生成してくれるプラグイン Table of Contents
インストール
管理画面から[プラグイン][新規追加]『Table of Contents Plus』を検索してください。
[今すぐインストール]して有効化してください。
基本的な設定
設定は管理画面から[設定][TOC+]と進んでください。
例えば「3」にした場合、H2、H3などのHタグが3つ以上あれば目次が自動生成されます。
目次を表示させるページにチェックを入れて設定(自動生成の場合)
『post』が投稿記事、『page』が固定ページです。手動で目次を挿入する場合はチェックを外してください。
基本設定(外観)
目次のデザインの設定
カスタムを選択すると背景色、ボーダーの色、リンク色の設定ができます。
上級者向け
上級者向けの設定ですが、設定しておいた方がいい項目がありますので設定してください。
設定画面の下の方に『上級者向け』とあります。その横の[表示]をクリックしてください。
クリックすると上級者向けの設定項目が出てきます。
以下の2箇所の設定をしてください。
見出しレベルの設定
目次に表示する見出しレベル(Hタグ)にチェック。表示しない見出しレベルはチェックを外します。
例えば、H2とH3にチェックを入れ、上で設定した『表示条件』を3にした場合、H2とH3の見出しが3つ以上あれば目次が生成されます。
WordPressのテーマの多くが記事タイトルにH1を使用しています。なので見出しに使うのは『H2~6』にしておくといいと思います。
除外する見出しの設定
お使いのプラグインなどによって見出しにHタグを使っているものがあります。その見出しも拾ってしまうので表示させたくない場合は除外する見出し名の設定をしてください。
使い方
自動挿入
上記の設定をすれば『以下のコンテンツタイプを自動挿入』でチェックを入れたページの『見出しレベル』『表示条件(見出しの数)』を認識し自動で目次が挿入されます。
(『表示条件』で設定した数より見出しの数が少なければ表示されません。)
設定が完了すればもう目次が挿入されていますので確認してみてください。
表示位置を変えたいとき
もし、目次の表示位置を変えたい場合は、表示させたい位置にショートコードを入れれば表示位置を変更させることができます。
※ショートコードは下記の『手動で挿入する』をみてください。
目次を表示させたくないとき
中には「目次を表示させたくない」ページもあると思います。
目次を表示させたくない場合は、ページのどこでもいいので以下のコードを挿入してください。
[no_toc]
手動で挿入する
「表示位置を変えたい」「自動挿入ではなく自分で必要な記事にだけ入れたい」という場合は以下のコードを表示させたい場所に挿入してください。
[toc]
2018年8月28日 追記
ショートコードで表示させたい見出しレベルを設定する
ショートコードに『heading_levels』を追加すると、表示させたい見出しレベルの指定ができます。
[toc heading_levels="見出しレベル"]
例えば、私の場合は目次に表示させる見出しはH2とH3にしています。
でも時々「このページだけはH4の見出しも表示させたい!」ということもあります。
そんなときにショートコードに『heading_levels』を追加して、H2、H3、H4の見出しを目次に表示させる設定をします。
指定方法は[toc heading_levels=2,3,4″]と、表示させたい見出しレベルの習字を『,(半角)』で区切って指定します。
ショートコードを簡単に設置するには?
プラグイン『Add Quicktag』を使っている場合、ショートコードを登録しておくとワンタッチでショートコードの挿入ができます。
目次のカスタマイズ
CSSを使用して目次のデザインのカスタマイズもできます。
カスタマイズ方法については、解説しているところがたくさんありますのでそちらを参考にしてください。
私が目次のカスタマイズで参考にさせてもらった記事
最後に
記事が長文になるとユーザーが知りたい情報にたどり着けず、読むのを諦めて記事から離脱してしまうこともあります。
目次を設置するとどんな内容が書かれているかわかりやすくなりますし、ユーザーが知りたい情報にすぐにたどり着くことができます。
多くの人に読んでもらうためにも目次の設置をしておいた方がいいと思います。
ディスカッション
コメント一覧
まだ、コメントがありません