【WordPress】目次の指定した階層より下を消す方法

WordPressで見出しを使った時に作成される「目次」から、指定した階層より下の目次情報を消す方法を解説します。

はじめに

WordPressで使用出来るテーマの１つである「Cocoon」などでは、記事中の見出しから自動で目次を作成する機能が用意されています。
この機能はすごく便利なのですが、見出しの階層が深くなるにつれて、目次も長くなってしまいます。
今回は、この目次の指定した階層より下の目次情報を消す方法をご説明します。

また、設定方法ですが、以下の２パターンを説明したいと思います。

• 特定の記事に設定する → CSSを修正する
• 全ての記事に設定する → Cocoon設定を変更する

特定の記事に設定する

特定の記事にある目次に設定を適用する方法です。

特定の記事にある目次の表示階層を変更するには「カスタムCSS」を使用します。

例えば、H２まで表示する（H３より下は表示しない）場合は、
カスタムCSSに以下のコードを入力します。

.toc li li {
    display: none;
}

保存して、プレビュー画面で確認すると、画像のようにH２までが表示されていることが分かります。

次に、H３まで表示する（H４より下は表示しない）例を見てみます。
同じく、カスタムCSSに以下のコードを入力します。

.toc li li li {
    display: none;
}

こちらも保存して、プレビューで確認してみると、
画像のようにH３までが表示されていることが分かります。

もうお気づきかもしれませんが、カスタムCSSに記述しているソースコード中の「li」の数が表示する階層とイコールになっています。

例えば、H４まで表示する場合は「li」を４つ書けばいいということです。

カスタムCSSを使用することで、簡単に目次の表示階層を変更することが可能です。

全ての記事に設定する

全ての記事にある目次に設定を適用する方法です。

全ての記事の目次設定を変更するには「Cocoon 設定」を変更します。
＊Cocoon以外のテーマで使用出来ないかもしれません。

まず、WordPressのメニューより「Cocoon 設定」をクリックします。

「目次」タブをクリックします。

「目次表示の深さ」の設定を変更します。(デフォルトは、H６まで表示する設定になっています)
ここでは、試しに「H３」まで表示する設定に変更してみます。
設定後は「変更をまとめて保存」をクリックして、設定を反映します。

では、記事のプレビュー画面で確認してみます。
画像のように、H３までの目次が表示されているかと思います。

記事は以上です。
このように簡単に目次の表示階層を変えることが出来るので、是非使ってみて下さい。

関連記事