【プラグイン紹介】WordPressで目次を実装する！Table of Contents Plusを使ってみよう。

投稿日 2022年6月28日
更新日 2023年1月21日
著者家富正幸
カテゴリー WordPress

ブログにおいて目次は非常に重要な要素で、記事を見に来たユーザーが見たい場所を把握するのに役だったり、目的に合致した記事なのかを判断するために欠かせないものです。

ただこれを自力で作っていくのは非常に骨が折れますし、記事の構成が変わった場合などにいちいち作り直すなど考えるとあまり現実的ではありません。

そこでプラグインの出番なのですが、本日はカスタマイズも含めて非常に有用な目次生成用プラグイン「Table of Contents Plus」をご紹介します！

プラグインのインストール

Table of Contents、用は目次のことですね。こちらをまず管理画面から検索してインストールしてみましょう。

または以下のプラグインページからダウンロードしてインストールしてみてください。

目次の設定

このプラグインは単純にオンにするだけで、自動的に目次が挿入されます。

目次は基本的にユーザーの投稿した記事において、自動的に見出しの数と見出しのレベルを検出してリンクを付与し、目次を生成してくれます。

初期設定では「固定ページ」のみ、また見出しの数が4つ以上ないと表示されないような設定になってしまっているので、ここはお好みの設定に変更して利用しましょう。

各種オプション

では詳細なカスタマイズ方法について主なものを確認していきましょう。

以下のコンテンツタイプに自動挿入

自動で表示させたいコンテンツタイプにチェックを入れましょう。投稿に表示させたいなら「post」にチェックを入れるのを忘れずに。

見出しテキスト

目次には自動的に「目次」というタイトルが入りますが、その文字そのものを任意に変更することができます。

また目次の表示・非表示を切り替える機能も利用することができます。

階層表示

これは見出しレベルに応じて、目次を階層表示してくれる機能になっています。

適切な見出しレベルを設定している状態で、大見出しと小見出しそれぞれに細かく目次リンクを張りたい場合にはオンにしておくとよいでしょう。通常はオンのままで大丈夫です。

番号振り

各目次に番号を自動的に振って、わかりやすいリンクとして生成します。

番号が付くことでわかりやすくなる場合もありますが、逆にわかりづらくなる場合もあるかと思いますので、ここはお好みでチェックを入れましょう。

詳細な設定を行う

下部の「上級者向け」のリンクをクリックすることで、さらに細かいカスタマイズが可能になります。

デザインや動きに関わる主な項目を簡単に説明します。

CSSファイルを除外する

プラグインは初期設定でデフォルトのスタイルを表現するためのCSSファイルを読み込んでいますが、自分でスタイルを割り当てる等する場合にはCSSファイルが邪魔になることがあります。

その場合はこちらのチェックをを外すことで、デフォルトのCSSファイルを読み込まないようにできますので、自身で任意のスタイルを定義して割り当てることが可能です。

見出しレベル

本文から自動的に検出する見出しレベルを設定できます。ここで設定した見出しレベルが目次として生成されますので、必要な目次の詳細度によってチェックを切り替えて対応します。

見た目をカスタマイズしてみる

基本的な見た目は以下のようなものですが、サイトのデザインに併せてCSSでカスタマイズが可能です。

オプションによって若干差異がありますが、大枠は以下のHTMLが出力されますのでCSS側で装飾してみましょう。

<div id="toc_container" class="no_bullets">
    <p class="toc_title">Contents <span class="toc_toggle">[<a href="#">hide</a>]</span></p>
    <ul class="toc_list">
        <li>
            <a href="#1"><span class="toc_number toc_depth_1">1</span> 見出し1</a>
            <ul>
                <li><a href="#1-2"><span class="toc_number toc_depth_2">1.1</span> サブの見出し1</a></li>
                <li>
                    <a href="#2"><span class="toc_number toc_depth_2">1.2</span> サブの見出し2</a>
                    <ul>
                        <li><a href="#i"><span class="toc_number toc_depth_3">1.2.1</span> サブのサブの見出し</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#2-2"><span class="toc_number toc_depth_1">2</span> 見出し2</a></li>
    </ul>
</div>