「Cocoonを使っているのに、記事の目次が表示されない」
「目次を表示する設定にしたはずなのに、なぜか記事に出てこない」
このような悩みを抱えていませんか？
Cocoonには、記事内の見出しをもとに目次を自動で表示する機能が最初から用意されています。
しかし、Cocoon側の設定や記事内の見出し数など、一定の条件を満たしていないと目次が表示されません。
僕もWordPressを始めたばかりの頃は、目次を有効にしているのに表示されず、どこを確認すればよいのかわからないことがありました。
この記事では、Cocoonの目次が表示されない原因と直し方を、WordPress初心者にもわかりやすく順番に解説します。
この記事でわかること
- Cocoonで目次を表示する基本設定
- Cocoonの目次が表示されない主な原因
- 記事ごとの目次設定を確認する方法
- プラグインやキャッシュが原因の場合の対処法
- Cocoonの目次を見やすく設定するポイント
Cocoonの目次が表示されない主な原因
Cocoonで目次が表示されない場合、必ずしもテーマ自体に不具合が起きているとは限りません。
多くの場合は、次のような設定や記事の作り方が原因です。
- Cocoonの目次機能が無効になっている
- 目次を表示するページが選択されていない
- 記事内の見出し数が表示条件を満たしていない
- 投稿ごとの設定で目次が非表示になっている
- 見出しタグが正しく設定されていない
- 目次プラグインとCocoonが競合している
- キャッシュに古い表示が残っている
- Cocoonやプラグインが古いままになっている
原因がわからない場合でも、上から順番に確認していけば問題を見つけやすくなります。
Cocoonで目次を表示する基本設定
最初に、Cocoon全体の目次設定を確認しましょう。
WordPress管理画面から、次の順番で進みます。
- WordPress管理画面の「Cocoon設定」をクリックする
- 画面上部にある「目次」タブをクリックする
- 「目次を表示する」にチェックを入れる
- 目次を表示したいページを選択する
- 「変更をまとめて保存」をクリックする
設定を変更しただけでは保存されません。最後に「変更をまとめて保存」をクリックすることが大切です。
「目次を表示する」にチェックを入れる
「目次の表示」という項目にある、「目次を表示する」へチェックが入っているか確認してください。
このチェックが外れていると、記事内にH2やH3の見出しを設定していても目次は表示されません。
チェックを入れたあとは、画面下にある「変更をまとめて保存」をクリックしましょう。
目次を表示するページを確認する
Cocoonでは、どのページに目次を表示するかを選択できます。
設定画面では、主に次のようなページを選べます。
- 投稿ページ
- 固定ページ
- カテゴリーページ
- タグページ
通常のブログ記事に目次を表示したい場合は、少なくとも「投稿ページ」にチェックを入れてください。
固定ページにも目次を表示したい場合は、「固定ページ」にもチェックを入れます。
目次が一部のページにしか表示されない場合は、この表示ページの設定を確認してみましょう。
記事内の見出し数を確認する
Cocoonの目次は、記事内に設定されたH2からH6までの見出しをもとに自動で作成されます。
そのため、記事内に見出しがない場合や、見出し数が設定した表示条件より少ない場合は目次が表示されません。
目次の表示条件を確認する
「Cocoon設定」から「目次」タブを開くと、目次を表示するために必要な見出し数を設定できます。
たとえば、目次の表示条件を「4つ以上」に設定している場合、対象となる見出しが3つしかない記事には目次が表示されません。
目次が表示されないときは、次のどちらかで対応できます。
- 目次の表示条件を「2つ以上」などに変更する
- 記事の内容を整理して必要な見出しを追加する
ただし、目次を表示するためだけに不要な見出しを増やす必要はありません。
読者が内容を理解しやすい見出し構成を優先し、そのうえで表示条件を調整しましょう。
見出しタグが正しく設定されているか確認する
文章を太字にしたり、文字サイズを大きくしたりするだけでは、Cocoonはその文章を見出しとして認識しません。
記事内の見出しには、H2やH3などの見出しタグを正しく設定する必要があります。
Classic Editorで見出しを設定する方法
Classic Editorを使用している場合は、次の手順で見出しを設定できます。
- 見出しにしたい文章を選択する
- 編集画面上部の「段落」をクリックする
- 「見出し2」または「見出し3」を選択する
- 記事を更新して表示を確認する
HTMLでは、次のように表示されます。
<h2>大きな項目の見出し</h2>
<h3>H2の中にある小さな項目</h3>記事内の大きな項目にはH2を使用し、その内容を細かく分けるときにH3を使用するのが基本です。
H2の次にH4を使うなど、見出しの順番を飛ばさないようにしましょう。
投稿ごとの目次非表示設定を確認する
Cocoon全体の目次設定が有効でも、個別の記事で目次を非表示にしている可能性があります。
特定の記事だけ目次が表示されない場合は、その記事の編集画面を開いてCocoonのページ設定を確認してください。
「目次を表示しない」にチェックが入っている場合は、その記事だけ目次が非表示になります。
- 目次が表示されない記事の編集画面を開く
- Cocoonのページ設定を探す
- 「目次を表示しない」の項目を確認する
- チェックが入っていれば外す
- 記事を更新する
Cocoon全体では目次が表示されているのに、特定の記事だけ表示されない場合は、まずこの個別設定を確認しましょう。
目次プラグインとの競合を確認する
Cocoonには目次機能が標準搭載されているため、基本的には目次専用プラグインを追加する必要はありません。
次のような目次プラグインを使用している場合は、Cocoonの目次機能と競合する可能性があります。
- Table of Contents Plus
- Easy Table of Contents
- LuckyWP Table of Contents
目次プラグインを使用している場合は、Cocoonの目次機能とプラグインのどちらを使うか決めましょう。
Cocoonの目次機能を使う場合は、バックアップを取ったうえで、目次プラグインを一時的に無効化して表示を確認します。
注意
プラグインを無効化する前に、サイトのバックアップを取っておくと安心です。ほかの機能でも使用しているプラグインを、確認せずに削除しないようにしてください。
キャッシュを削除して表示を確認する
目次設定を変更しても、キャッシュに古い情報が残っていると、変更前の状態が表示されることがあります。
設定に問題が見つからない場合は、次のキャッシュを確認しましょう。
- Cocoonのキャッシュ
- キャッシュ系プラグインのキャッシュ
- レンタルサーバー側のキャッシュ
- ブラウザのキャッシュ
Cocoonのキャッシュを削除する
WordPress管理画面にある「Cocoon設定」から、キャッシュ削除に関する項目を開いてキャッシュを削除します。
WP Fastest Cacheなどのキャッシュプラグインを使用している場合は、プラグイン側のキャッシュも削除してください。
キャッシュを削除したあとは、ブラウザで記事を再読み込みします。
それでも表示が変わらない場合は、ブラウザのシークレットウィンドウや別の端末から記事を開いてみましょう。
Cocoon・WordPress・プラグインを更新する
Cocoonやプラグインのバージョンが古い場合、WordPressとの組み合わせによって正常に動作しないことがあります。
次の項目に更新がないか確認しましょう。
- WordPress本体
- Cocoon親テーマ
- Cocoon子テーマ
- 使用中のプラグイン
ただし、更新前には必ずサイトのバックアップを取ってください。
更新後に不具合が起きた場合でも、バックアップがあれば元の状態へ戻しやすくなります。
Cocoonの目次が表示されないときの確認手順
どこに原因があるのかわからないときは、次の順番で確認すると効率的です。
- 「目次を表示する」が有効になっているか確認する
- 目次の表示ページに「投稿ページ」が選ばれているか確認する
- 記事内の見出し数を確認する
- H2やH3が正しく設定されているか確認する
- 投稿ごとの「目次を表示しない」を確認する
- 目次プラグインとの競合を確認する
- Cocoonやプラグインのキャッシュを削除する
- Cocoonやプラグインを更新する
最初から複数の設定を一度に変更すると、どの操作で直ったのかわからなくなります。
一つ確認するたびに記事を再読み込みし、目次が表示されるか確かめながら進めましょう。
Cocoonの目次を見やすくするおすすめ設定
目次が表示されるようになったら、読者が使いやすい形に調整しておきましょう。
初心者の場合は、次の設定から始めるのがおすすめです。
- 目次タイトル：目次
- 目次表示切替機能：有効
- 表示条件：2つ以上または3つ以上
- 目次表示の深さ：H3見出しまで
- 目次ナンバー：好みに合わせて設定
H4以下の細かい見出しまで表示すると、記事によっては目次が長くなり、かえって読みにくくなることがあります。
最初はH3まで表示し、記事の長さや構成に合わせて調整するとよいでしょう。
Cocoonの目次が表示されない場合によくある質問
Q．Cocoonでは目次プラグインが必要ですか？
基本的には必要ありません。Cocoonには目次機能が標準搭載されているため、「Cocoon設定」から目次を有効にすれば表示できます。
Q．特定の記事だけ目次が表示されないのはなぜですか？
記事内の見出し数が足りていないか、投稿編集画面で「目次を表示しない」にチェックが入っている可能性があります。記事ごとの設定を確認してください。
Q．H2見出しがあるのに目次が表示されません。
Cocoon側で設定している表示条件よりも、記事内の見出し数が少ない可能性があります。「Cocoon設定」から「目次」を開き、表示条件を確認しましょう。
Q．目次をH3まで表示できますか？
「Cocoon設定」から「目次」を開き、「目次表示の深さ」をH3見出しまでに設定してください。
Q．設定を変更しても目次が表示されない場合はどうすればいいですか？
Cocoonやキャッシュプラグインのキャッシュを削除し、ブラウザのシークレットウィンドウから確認してください。目次プラグインを使用している場合は競合も確認しましょう。
さらにCocoonを使いやすくカスタマイズしたい方へ
Cocoonの目次が表示されるようになったら、サイト全体のデザインや使いやすさも少しずつ整えていきましょう。
最初から多くの部分を変更する必要はありません。ヘッダーや見出し、ボタンなど、読者がよく目にする場所から順番に進めることが大切です。
まとめ｜Cocoonの目次設定を一つずつ確認しよう
Cocoonで目次が表示されない場合は、テーマの目次設定、見出し数、記事ごとの非表示設定などを順番に確認しましょう。
特に多いのは、次のような原因です。
- 「目次を表示する」が無効になっている
- 見出し数が表示条件を満たしていない
- 見出しタグが正しく設定されていない
- 記事ごとの設定で目次が非表示になっている
- 目次プラグインと競合している
- キャッシュに古い情報が残っている
一度にすべての設定を変更するのではなく、一つずつ確認すれば原因を見つけやすくなります。
Cocoonには目次機能が標準搭載されているため、正しく設定すれば、目次プラグインを追加しなくても見やすい目次を表示できます。
Cocoonの設定をまとめて確認したい方へ
Cocoonの目次設定を確認できたら、初期設定・カスタマイズ・SEO対策など、サイト全体の設定もあわせて見直しておきましょう。
Cocoonを使ううえで確認しておきたい重要な設定は、以下のまるごとガイドでまとめて解説しています。
