ワードプレステーマDIVERに目次を入れるやり方

こんにちは!月間最高16万PVの、さはら(@sahara_momo)です。

せっかくブログ書いても、目次がなかったら見栄えがわるいよね。

実は目次がないことが原因で、ブログから離脱することが多いねんて。。

残念。。。

てことはやで、せっかく書いた記事を読んでもらうためには、『目次』は必須ってことやねん。

この記事では、

・ワードプレスに目次を入れる方法
・目次が表示されない
・目次が出るページと出ないページがある

ついて初心者ブロガーさんでも、わかりやすいように画像をつかって詳しく解説していきます。

これ以外にも、僕が陥ったレアケースの解決法も載せてるので、参考にしてみてください!

スポンサーリンク

ワードプレステーマDIVERの目次の入れ方

まずはワードプレスに目次を入れることからはじめてみましょか!

テーマの中にはデフォルト(最初から)から目次が表示されるやつも中にはあるねん。

でもこのサイトのテーマ『 DIVER 』には、デフォルトでは目次が入ってないねん。

その場合どうするかっちゅうと、『 Table of Contents Plus 』(以下、TOC+)っていうプラグインをインストールして『有効化』するだけで目次を表示させることができるねん。

ざっくり言うとこんな感じな!

めっちゃ簡単やろ?(笑)

でもちょっと注意点もあるし、画像を使って詳しく紹介していくで!

Table of Contents Plus をインストールする

まずはワードプレスにログインして、左のメニューの中から、

『プラグイン』→『新規追加』をクリックしてね。

ワードプレステーマDIVERに目次を入れるやり方

そしたら下の画面になるし、

  1. キーワードになってるか確認
  2. Table of Contents Plus と入力
  3. 今すぐインストールをクリック

ワードプレステーマDIVERに目次を入れるやり方

似たようなプラグインが他にも出てくるし、間違えんようにね!

Table of Contents Plus を有効化する

インストールが済んだら

最後に『有効化』をクリックしたら完了やで!

ワードプレステーマDIVERに目次を入れるやり方

まとめてプラグインをインストールしたときは、ワードプレスの左にあるメニューの中から『プラグイン』→『インストール済みプラグイン』の順にすすんで、対象のプラグインを有効化してね!

Table of Contents Plus を有効化する

これで完了やで!

簡単やったやろ?(笑)

Table of Contents Plusをインストールしても目次が表示されない時の対処法!

『 Table of Contents Plus 』をインストールして、これでやっとワシのブログにも目次が表示されるわ!!

って意気揚々とプレビュー見たらどこにも『 目次 』がないねん。。。

これってめっちゃ悲しいよね。。(´;ω;`)

何かのバグかと思って、他の記事を見たらそっちはちゃんと『目次』は出てるっていう、おかしな現象が起きててん。。

調べてもなかなか見つからんくて、直すのにめっちゃ時間かかったんよね。。

みんなにはサクッと直してもらいたいし、その解決法を紹介しとくわな!

h2 タグ(見出し)の確認

h2 タグ(見出し)の確認

これはメッチャ初歩的な事なんやけど、はじめての人はたまにあるねん。

テレビでいうとコンセント入ってないレベルかな(笑)

『 Table of Contents Plus 』はh2、h3・・とhタグ(見出し)を使ってないと、自分が見出しのつもりで書いた文章を、プラグインが認識してくれへんねん。

そやし見出しの箇所には必ず『hタグ』を使うことね!

※h1タグは『 タイトル 』に使うタグやし、本文では『 h2タグ以下 』を使ってね。

『Table of Contents Plus』有効化の確認

TOC+はインストールしただけやったら、記事の中に目次は出えへんねん。。

TOC+(プラグイン)はインストール後に『 有効化 』をしてやらんとアカンねん。

もし『 有効化 』になってなかったら変更しときましょう!

『Table of Contents Plus』有効化の確認

TOC+ 設定の確認

TOC+ をインストールして有効化もちゃんとしてるのに、目次が表示されへん時は『 TOC+の設定 』を確認してみよな。

設定の確認方法はワードプレスの左のメニュー一覧から『 設定 』→『 TOC+ 』をクリックやで!

TOC+ 設定の確認

ここから下の小見出し3つは全部この設定の中の話やで。

見出しの位置の確認

『 設定 → TOC+ 』を開いたら、基本設定の『 位置 』を確認しよう。

デフォルトでは『最初の見出しの前』ってなってるけど、これが正解やねん。

ここが何かの間違いで『下』とかになってたら、本文の下に目次がコッソリ表示されてるし、プレビューで上の方だけしか見てなかったら、見落としてしまうことになるねん。

見出しの位置の確認

表示条件の確認

ワシの記事に目次が出えへんかった1回目の原因はこれやってん。。

答えがわかるまでかなり時間かかったけど、正解見つけたらめっちゃ簡単なことやったわ(笑)

下のスクショやと、見出しが『 3つ以上 』ないと目次が表示されへんてことやねん。

その時のワシの記事の目次の数は『2つ』。。。

なんと初歩的な。。

まぁ、知らんということはそういうことやね(笑)

もうちょっと書けよ。。。ってなったわ(笑)

そやし表示条件は『 2つ 』以上見出しがあるとき。に変更やで!

表示条件の確認

コンテンツタイプの自動挿入の確認

この設定は自動でどの記事に目次を表示させるか?って事やねん。

post = 投稿記事
page = 固定ページ

デフォルトでは『 page 』にチェックが入ってへんし、『 post 』にチェックを入れときましょう!

コンテンツタイプの自動挿入の確認

各項目を確認して、設定を変更したら必ず画面を下にスクロールして『 設定を更新 』をクリックするんやで!

そうじゃないと、せっかく原因見つけて変更してもそれが記事に反映されへんで。

目次ウィジェットの確認

TOC+は文中以外にも、サイドバーに目次を表示させることができるねん。

サイドバーにも目次があったら、読者さんはいつでも好きな見出しにワープできるし、おすすめの機能なんやで!

でも、ここにも目次が表示されへん落とし穴があるし、確認していくで!

TOC+ ウィジェットの設定をするページに移動。

目次ウィジェットの確認

左のメニューの『 外観 』→『 ウィジェット 』をクリックして、ウィジェットの設定画面に移動するで!

TOC+ウィジェットの設定を確認する。

目次ウィジェットの確認

ここで確認するのは、上のスクショの赤丸で囲ってる『 目次をサイドバーのみに表示 』。

この部分にチェックが入ってたら、文中には目次が表示されへんねん。。

そやし必ず赤丸で囲った部分のチェックは外すようにしといてや!

※ちなみにテーマによっては『 目次をサイドバーのみに表示 』の部分が英語表記になってるのもあるけど、同じ意味のこと書いてるし、チェックが入ってたらのけとこな(笑)

上級者向けの確認

上級者向けの確認

ここまでで直らへんかったら、上級者向けの設定を確認してみよ!

これより下の四角で囲った見出しは全部、上級者向けの設定から変更するで。

・見出しレベルの確認
・固定ページのフロントページ化の確認
・除外する見出しの確認
・パス限定の確認

『 設定 』→『 TOC+ 』一番下にスクロール『 上級者向け (表示)』をクリックやで!

見出しレベルの確認

見出しレベルの確認

『 見出しレベル 』とは、見出しの階層の事で『 h〇 タグ』まで見出しを表示させるってことやねん。

デフォルトでは、『 h1~h6 』まで全部にチェックが入ってるけど、ここにチェックが入ってなかったら目次が表示されへんし気を付けてや!

固定ページのフロントページ化の確認

固定ページのフロントページ化の確認

ワードプレスの『 メニュー 』→『 固定ページ 』→『 固定ページ一覧 』を確認やで。

固定ページをフロントページ化してると、上の画像のようにタイトルの後ろに『 フロントページ 』と表示されてるねん。

こうなってたら、TOC+設定の『 上級者向け 』→『 ホームページを含める 』にチェックをいれたらOKやで!

固定ページのフロントページ化の確認

除外する見出しの確認

除外する見出しの確認

上級者向け設定の『 除外する見出し 』に何らかの文字が入ってたら、その文字に関する目次が表示されへんくなるねん。

そやし、ここに文字とか数字とか何か表示されてたら、削除したらOKやで。

パス限定の確認

パス限定の確認

上級者向け設定で『 パス限定 』の箇所は『 空欄 』にしときましょう!

この部分に何か文字が入力されてたら、該当する記事にしか目次が表示されへんし気を付けてな。

それでも目次が表示されないときの対処法

いままでの方法を試しても目次が表示されない時があるねん。

ワシも1回目は見出しの数で表示されへんかっただけやし、無事解決できたけど、2回目の時は上の方法では直らんかったんよね。。。

その時に試した方法を紹介していくし、良かったら参考にしてみてや。

TOC+をサイドバーに入れてみる

目次が表示されへんくなった2回目の解決法がこれやってん。

ワシは文中にしか目次を表示させるようにしてなかってん。

それやのにある日、目次が出んくなってしもたわけよ。。。

そしたら読者さんにつまらんストレスかけてしまうやん?

それがイヤやったしサイドバーに目次を表示させたら、『とりあえずは大丈夫かな?』って発想でサイドバーに目次を表示させてん。

そしたらなんと!

文中にも目次が表示されたやん(笑)

まぁ、これはレアケース過ぎるかも知れんけど、こんな事もあるんやな(笑)って感じやね!

『 TOC+ 』でサイドバーに目次を入れてない人は、とりあえず一回入れてみて!

ワードプレスを最新バージョンにする(要バックアップ)

プラグインを後からインストールしたら当然、最新バージョンのプラグインがワードプレスの中に入るやろ。

でもワードプレス自体を最新バージョンにしてなかったら、うまく作動せん時があるねん。

これを解決するためには『 ワードプレスを最新バージョン 』にしたらいいねん。

※バージョンアップする時は、必ずバックアップをしといてや!
内容ぶっ飛んだらシャレにならんからな。。

TOC+以外のプラグインを停止する

TOC+以外のプラグインを停止する

プラグイン同士の相性が悪くて干渉してる場合があるし、一旦TOC+以外のプラグインを全て『 停止 』してみて!

他のプラグインが干渉してるのが原因やったら、これで目次が表示されるはずやで!

目次が表示されたら、ちょっと面倒くさいけど、『1つ1つ』プラグインを有効化させていくねん。

そしたらどのプラグインが原因か分かるし、それ以外のプラグインを有効化させて終わりやで。

TOC+を削除して再度インストールする

インストールした時に『 TOC+ 』自体に、何らかの形で不具合が生じることも考えられなくもないねん。

その場合、『 TOC+ 』を一旦削除して、再度『 インストール → 有効化 』したら直る場合があるし試してみて!

最終手段[toc]を入力する

最終手段[toc]を入力する

最終手段やで(笑)

自動で目次を表示させることができんかったら、『 手動で表示 』させたらいいねん!!

手動で目次を表示させる方法は、

文中の目次の欲しい場所に、半角で『 [toc] 』って入力するだけねん!
※ここでは全角で書いてます。半角で書いたらこの場所で目次が表示されるので(笑)

これでとりあえずは目次を表示させることはできるで!

【ワードプレスDIVER】目次の入れ方と表示されない時の対処法をご紹介します!まとめ

これだけ試したらまず解決できるはずやで!

なんでもそうやけど、知ってたら簡単なことでも、知らんかったら迷うよね。。

ほな簡単におさらいするで。

目次を表示させる方法
  • Table of Contents Plusをインストール
  • Table of Contents Plusの有効化

目次を表示させるには、上の2つをしたらええだけやし簡単やね!

次はTOC+とワードプレスの設定の確認ね!

各種設定の確認
・h2タグ(見出し)の確認
・有効化の確認
・TOCの設定の確認
・目次ウィジェットの確認
・上級者向けの確認

一つ一つ丁寧に探していったらここまででほとんどは解決するで!

それでもダメな時
・TOC+をサイドバーに入れる
・ワードプレスを最新バージョンにする(要バックアップ)
・TOC+以外のプラグインを停止する
・削除して再度インストールする
・最終手段[toc]を入力する
これであなたのブログにも目次が表示されるようになったね。
見やすい記事は読者さんも内容が入ってきやすいし、しっかり読んでもらえるで!
記事ができたら次にすることはASPに登録することやで!
これをせんことにはブログの収益化はできひんからね!
ワシも登録してるおすすめASPを紹介するし、一緒にがんばろな!
アフィリエイト満足度9年連続 No.1 のASP!!
広告の種類も一番多いし、アフィリエイトするなら絶対登録しとかなアカンASPやで!
てか、アフィリエターさんで A8.net 登録してへん人おらんやろ!
知らんけど(笑)
業界初!全てのアフィリエイト会員さんが対象!!
通常報酬にプラス12%上乗せでお金がもらえる!!
※一部対象外アリ
Amazonアソシエイトに落ちたあなたも『もしもアフィリエイト』からならもしかして・・
Amazon審査落ちた人はもしもで再挑戦やで!
もちろんワシも、もしもから合格したで🤤
スポンサーリンク
初心者アフィリエイターにこそ使ってほしい。それがDiver。

Diver

htlmやCSSなどのプログラミングを全く知らなくても綺麗なサイト仕上げることが可能!

アップデートにより常に最新のSEO対策の恩恵が受けられる!

クリックだけで吹き出しやランキングを作成可能な手軽さ!

初心者でもベテランアフィリエイターのようなサイトが簡単に作れてしまうのがDiver。

Twitterでフォローしよう

おすすめの記事