WordPress目次プラグインTable of Contents Plusの使い方

今回は、WordPressのプラグイン Table of Contents Plusを利用してWordPressの記事中に目次を作成する方法を紹介します。
 
■目次の例

WordPressでブログを書いているんですが、文字数が長いので目次をつけたいんです。おすすめのプラグインってありますか？？

WordPressで目次を生成するプラグインで有名なのは、Table of Contents Plus(テーブル・オブ・コンテンツ・プラス)です。

目次生成プラグイン「Table of Contents Plus」

【目次は必要？】目次は特に長文記事では非常に重要

目次ってそもそも必要なんでしょうか？実際に使われるんですかね？？

はい。ブログには目次があった方が絶対に良いです。

下記はヒートマップというツールを使って当ブログの目次を可視化したものです。クリックしたあとが赤くなっていますが、訪問者が、目次をもとにたくさんクリックをしていることがわかります。

これを見ると目次って利用者にすごく使われているんですね。

このように、目次は利用者の利便性をあげることができます。特に文字数の長い記事で目次は非常に効果的です。

目次を表示する仕組みを覚えておこう

今回紹介するプラグイン「Table of Contents Plus」は、ページ内の「見出し(H1〜H6)」を元に見出しを生成するプラグインです。

■目次生成の仕組み　ページ内の見出しを元に目次を自動生成する

ページ内に見出しを全く使っていないと目次は表示されませんので注意しましょう。

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の設定は、設定＞TOC+から設定できます。

Table of Contents Plusの設定画面が表示されます。

まずは、ここでは下記のように設定しましょう。

上記の設定内容は下記の通りです。

目次を自動挿入して表示する方法

さっそく、投稿記事を作成してみましょう。前述で設定した通り見出しを3つ以上作って、ページを作ってみてください。

見出しを元に、ページ内に目次が表示されるようになりました。

以上で、目次の表示させる基本の方法は完了です。

目次をショートコードで手動で挿入する方法

目次は自動生成以外に、手動で任意の場所に表示させることもできます。目次を作る方法は、下記の２通り。

下記のショートコードで挿入することで任意のページに手動で目次を挿入することもできます。

任意の場所でブロックの追加＞ショートコードブロックを挿入します。

 

ショートコードの入力欄に[toc]と入力すればOKです。

 

上記のようにショートコードを使って手動で目次を挿入する場合、二つ目の見出しの直前など任意の箇所で目次を表示させることが可能です。
 

先ほどの設定では、page(固定ページ)を目次の自動生成対象からはずしましたが、ショートコードを利用することで、任意の固定ページにも目次を挿入することができます。

Table of Contents Plusの色々な設定

ここからは、Table of Contens Plusの色々な設定をみていきましょう。

連番をなくす

目次の連番は消すことができます。連番の消し方を説明していきいます。

設定＞TOC+をクリックします。

「基本設定」タブの中の「番号振り」のチェックをはずします。

先ほどの投稿ページです。目次から連番がはずれました。

階層表示を消す

目次の階層表示は消すことができます。階層表示の消し方を説明していきいます。

設定＞TOC+をクリックします。

設定項目の中の「階層表示」のチェックをはずします。

先ほどの投稿ページです。目次から階層表示がはずれました。

目次クリック時にスクロールして移動する

今回は最初の手順で設定済みの項目ですが、「スムーズ・スクロール効果を有効化」にチェックを入れると、目次クリック時にスクロールして移動するようになります。

■目次をクリックするとスクロールで該当の場所に移動する

スクロールした方が利用者がどこに移動したかわかりやすいので、ここはチェックを入れておくことをおすすめします。

TOC+の高度な設定をする

Table of Contents Plusでは、さらに色々な設定をすることができます。

設定＞TOC+を選択してください。

設定画面の「基本設定」タブの下部にある上級者向け設定の「表示」をクリックします。

上級者向け設定では、下記のような項目が設定できます。

ここでは、上記のうち比較的よく使われる項目を代表して説明していきます。

見出しレベルを設定する

初期状態ではH1〜H6まで全ての見出しにチェックがついており、見にくい状態です。この状態から、大きい見出しだけ表示させることができます。

設定＞TOC＋の高度な設定に移動して、見出しレベルの設定のうちh4、h5、h6のチェックを外して保存します。

見出し4(h4)以降が非表示になり見やすくなりました。

除外する見出し

テーマやプラグインによっては、テーマやプラグインが作る見出しが意図せず目次に入っていることがあります。意図せず入った見出しは高度な設定の「除外する見出し」で設定して目次から外すことができます。

設定＞TOC＋の高度な設定に移動して、除外する見出しに、不要な見出し（今回は Related Posts）を入れて保存します。

意図せず表示されていた見出しを除外したことで、不要な見出しが消えました。

スムーズ・スクロール上部余白

スムーズ・スクロール上部余白は、上部に固定されているメニューバーがある時に役立つ設定項目です。

下記は、目次をクリックして移動した時に、メニューバーが被って「サーバーを契約しよう」の見出しが見えない例です。

■メニューバーが被って該当の見出しが見えない様子

設定＞TOC＋の高度な設定に移動して、スムーズ・スクロール上部余白で、ここでは130px余白を空ける設定をして保存します。

目次から移動した時に固定上部メニューバーと見出しが被らなくなりました。

これらの設定は、お使いのテーマやプラグイン・運用によって、必要に応じて設定してみてください。

まとめ

まとめです。今回は、WordPressの目次生成プラグイン「Table of Contents Plus」を利用してWordPressのページ中に目次を作成する方法をご紹介しました。

これからは、私のブログも目次を入れて工夫していきたいと思います。

目次は訪問者に記事の構成を伝えてくれる大事なツールです。目次をしようしていない人は、この際ぜひ目次を導入しておきましょう。

今回は以上になります。最後までご覧いただきありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。