WordPressの記事中に目次を表示させるプラグイン「Table of Contents Plus」の設定方法

こんにちは、えむです。

今回は、最初に導入しておくべきプラグインのうち、WordPressの記事中に目次を表示させるプラグイン「Table of Contents Plus」の設定方法を、図を交えて丁寧に解説していきます。

ちなみに、表示される「目次」はこんな感じで、記事の「見出し」に対応しています。
↓↓↓

1 プラグインとは何？
2 「Table of Contents Plus」とはどんなプラグイン？
3 「Table of Contents Plus」のインストール方法
4 「Table of Contents Plus」の設定方法
5 最後に

プラグインとは何？

プラグインとは、WordPressなどの機能を拡張するためのプログラムのことです。プラグインをインストールして機能を拡張させると、WordPress単体にはなかった機能を使えるようになります。RPGゲームに例えると、武器や防具などの装備を整えるようなものです。

ただし、あまりにたくさんのプラグインをインストールしすぎると、ブログの動きが重くなるなどの影響が出てしまいますので、インストールするプラグインは選ぶようにしましょう。

「Table of Contents Plus」とはどんなプラグイン？

「Table of Contents Plus」は、記事の見出しに対応して、「目次」を自動的に表示してくれるプラグインです。

目次があることで、読者さんは記事にどんな内容が書かれているのかがパッと見でわかりますし、読みたい部分に目次から直接ジャンプすることもできます。

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

まず、WordPressの管理画面にログインします。そうしたら、左のメニューの「プラグイン」をクリックします。

下図のような画面が出てくるので、「新規追加」をクリックします。

下図のような画面が出てくるので、右上の検索バーに「Table of Contents Plus」と入力します。

入力したら、エンターキーを押します。

下図のような検索結果の画面が出てくるので、「Table of Contents Plus」を探し、「今すぐインストール」をクリックします。

下図のように画面が切り替わるので、「有効化」をクリックします。

下図のように「プラグインを有効化しました。」という文言が出てきたら、プラグインの有効化は完了です。

下図のように、「Table of Contents Plus」が「インストール済みプラグイン」に追加されました。

「Table of Contents Plus」の設定方法

まず、WordPressの管理画面の左のメニューの「設定」にカーソルを合わせ、出てきたメニューの「TOC＋」をクリックします。（「TOC＋」は、「Table of Contents Plus」の各単語の頭文字とPlusを記号に置き換えた略称ですね。）

下図のような設定画面が出てくるので、１つずつ確認していきます。

①目次が表示される位置を決めます。デフォルトで「最初の見出しの前」となっていますが、特にこれで問題はないでしょう。

②「Table of Contents Plus」では、記事の見出しの数で目次を表示するかしないかを決めています。その見出しの数をここで設定します。デフォルトでは「４つ以上」となっています。その場合、記事に３つしか見出しがない場合には、目次は表示されないということになります。数に特に決まりはありませんが、「３」か「４」あたりにしておけば良いでしょう。

③目次を表示させるコンテンツを決めます。「post（＝一般投稿）」「page（＝固定ページ）」にチェックを入れておけば良いでしょう。

次に、目次で表示されるタイトルや、目次の状態（開いているか閉じているるか）を表す文言を決めます。ここでは、目次のタイトルは「目次」、目次の状態を表す文言は「表示」「非表示」と入力しました。「ユーザーによる目次の表示・非表示の切り替えを許可」にチェックを入れると、読者さんがクリックすることで、目次を表示したり非表示にしたりすることができるようになります。

また、一番下にある「最初は目次を非表示」にチェックを入れると、読者さんがクリックしない限り、目次は表示されません。（その設定はあまり親切とはいえませんので、チェックは入れなくて良いです。）

続いて下にスクロールしていくと、下図のような設定が出てきます。

ここで確認する部分は、「スムーズ・スクロール効果を有効化」です。これにチェックを入れると、目次で読みたい見出しをクリックしてそこにジャンプするとき、スルスルとスクロールして進みます。チェックを入れない場合では、一気にワープするように進みます。これは、両方を試してあなたの好みで決めて良いです。（おそらく、デフォルトでは、最初の２つにはチェックが入っていますが、３つ目にはチェックが入っていません。）

次に、目次の外観に関する設定です。最初の３つの項目は、すべてデフォルトのままでOKです。「プレゼンテーション」では、目次のデザインを設定します。これは、あなたの好みで選び、チェックを入れてください。

一番下までスクロールしていくと、左下に「上級者向け」という文言が出てきます。その横にある「表示」をクリックします。

「表示」をクリックすると、下図のような項目が出てきます。ここで確認する部分は「見出しレベル」です。おそらく、デフォルトでは「h1」～「h6」すべてにチェックが入っています。ただ、WordPressで使っているテーマによって、見出しと目次の対応の仕方は異なるので、実際に記事を書いてみて、目次に見出しがどう反映されるかを確認しながら調整してみてください。ここでは、「h3」～「h6」にチェックが入れてあります。