スポンサーリンク

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

2018年7月8日WordPress,便利なプラグイン

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

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

テーマによっては目次を生成できる機能がついているものがあります。テーマについている目次生成機能の使い方はお使いのテーマによって異なります。

WordPressテーマ『Luxeritas(るくせりたす)』には目次を生成できる機能が実装されています。Luxeritasの目次の設定方法は以下の記事をご覧下さい。

スポンサーリンク

導入する前に

今回ご紹介するプラグイン『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タグを使っているものがあります。その見出しも拾ってしまうので表示させたくない場合は除外する見出し名の設定をしてください。

きらり

きらり

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

使い方

自動挿入

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

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

表示位置を変えたいとき

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

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

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

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

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

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

最後に

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

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

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM