WordPress講座(個別相談)

WordPressに限りませんが、長い記事を書いていると「目次があれば便利」と思うこともあります。といっても、記事の内容から手作業で目次の項目をピックアップしてくのは面倒です。

そんなときは、Table of Contents Plusプラグインが役立ちます。記事の見出し(h1、h2、h3…)を基準に自動で見出しを作成、表示してくれます。記事を書くたびに手作業で目次を作って苦労している方は「あの苦労は何だったんだ!」と叫びたくなるほど便利なプラグインです。以下、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プラグインは、記事に含まれる見出し(見出し1、見出し2、見出し3… → h1、h2、h3…)から自動で目次を作成してページの先頭などに表示する仕組みです。

ページ内の見出しが自動で目次になる

ページ内の見出しが自動で目次になる

どのレベルの見出しまでを目次に表示するかなど、設定画面で細かく設定することができます。以下、主な設定を紹介します。

Table of Contents Plusプラグインの設定

「設定」‐「TOC+」メニューを開いて目次の設定を行います。

目次の表示位置

見出しを表示する位置を設定します。初期設定(最初の見出しの前)のままで大丈夫だと思います。

目次の表示位置

目次の表示位置

目次の表示条件

目次を表示する条件を設定します。初期設定では4つ以上の見出しがある場合のみ、目次が表示されます。もう少し短い記事でも目次を表示したければ「2つ以上」などに設定してもよいでしょう。

目次の表示条件

目次の表示条件

目次を表示する投稿タイプ

「以下のコンテンツタイプを自動挿入」では、目次を表示する投稿タイプを選択できます。「post」が投稿、「page」が固定ページです。初期設定では固定ページのみに目次を表示する設定になっていますが、個人的には投稿に目次を表示して固定ページには目次が不要な気がします。その場合、次のように「post」にチェックして「page」のチェックをはずします。

目次を表示する投稿タイプを選択

目次を表示する投稿タイプを選択

また、カスタム投稿タイプ(例:BizVektorのinfoなど)についても必要に応じてチェックしてください。

目次の表示設定

「見出しテキスト」では目次のタイトルや目次の表示/非表示を切り替え可能にするか設定できます。

目次の表示設定

目次の表示設定

初期設定では「ユーザーによる目次の表示・非表示を切り替えを許可」がチェックされており、目次をクリックして表示/非表示を切り替えられるようになっています。その機能が不要であれば、チェックを外しましょう。

初期設定では目次の表示/非表示が切り替え可能になっている

初期設定では目次の表示/非表示が切り替え可能になっている

階層表示・番号振り

「階層表示」「番号振り」では、目次の階層がわかるように表示したり、番号を振るかどうか設定できます。

階層表示・番号振り

階層表示・番号振り

階層表示・番号振りのイメージは次のようになります。

階層表示・番号振りのイメージ

階層表示・番号振りのイメージ

横幅

目次の横幅も設定できます。自動で構わないと思いますが、表示してみて違和感があれば変更してみましょう。

目次の横幅

目次の横幅

目次のスタイル

「プレゼンテーション」では目次のデザインを選択することができます。

目次のスタイル

目次のスタイル

上級者向け設定

必須ではありませんが、「上級者向け」の「表示」をクリックしてさらに設定することができます。

上級者向け設定

上級者向け設定

見出しレベル

「見出しレベル」では、どのレベルの見出しまでを目次に表示するか設定できます。初期設定ではh1からh6まで(見出し1~見出し6まで)が表示されるので、必要に応じて適当なレベルまでに制限した方がよいかもしれません。以下の例ではh3(見出し3)までを表示するように設定しています。

目次の表示レベルの設定

目次の表示レベルの設定

除外する見出し

目次から除外する見出しを設定できます。たとえば、「まとめ」や「関連記事」など、この記事の目次に表示したくない項目があれば除外できます。複数の見出しを指定する場合は「|」で区切ります。

目次から除外する見出しを設定

目次から除外する見出しを設定

「設定を更新」ボタンをクリックすると設定完了です。

目次の表示確認

実際の記事で目次を確認してみましょう。たとえば、次のような記事があります。見出し2と見出し3を使って文章をまとめた一般的な構成の記事です。

いくつかの見出しが付いた記事

いくつかの見出しが付いた記事

この記事の見出しから目次が作成され、記事の先頭などに自動で表示されます。「まとめ」が目次から除外されていることにも注目してください。

自動で目次が表示される

自動で目次が表示される

目次のカスタマイズ

目次のセンタリング

目次を中央寄せにしたい場合は、次のようなCSSを子テーマのstyle.cssなどに入力します。

#toc_container {
    margin: 0 auto;
}

目次が中央に表示されます。

目次がセンタリングされる

目次がセンタリングされる

目次を表示したくないページ

特定のページに目次を表示したくないときは、そのページの本文に[no_toc] というショートコードを入力します。

目次を表示したくないページ

目次を表示したくないページ

そのページには目次が表示されなくなります。

そのページには目次が表示されなくなる

そのページには目次が表示されなくなる

まとめ

以上、Table of Contents Plusプラグインを使って記事の目次を自動作成する方法を紹介しました。手作業で作ると面倒な目次を自動で作成できるのは非常に便利です。興味がある方はぜひお試しください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク