WordPressで目次を自動で作るプラグインTable of Contents Plus

はじめに

こんにちは、今野です。

 

ユーザビリティは、読者にとって役に立つブログを創ることはもちろん

GoogleやYahoo!などの検索サイトで(ここからは、Googleと表記します)上位表示されるためにも、とても重要です。

 

ユーザビリティを上げる1つの方法として、記事に目次を表示することがあります。

 

何かの雑誌や、特に実用書などがそうだと思いますが、手に取ったその本がどんなことが書かれているのか、まず目次を見て確かめますよね?

そこから、その本を読むかどうかジャッジしているはずです。

 

それと同じことです。

 

記事に目次があると、記事内でどこに何が書かれているのか、訪問者は一目で分かるようになります。

 

何が書かれているのか一目で分かるということは?

欲しい情報がそこにあるかどうか、訪問者はすぐに判別できるということです。

 

そしてそれが、ユーザビリティの向上や上位表示につながるのです。

 

目次を自動で表示してくれるプラグイン!

目次がユーザビリティや上位表示のために重要なのが分かったけど…

 

目次を手動で表示させようとすると

記事の更新のたびに目次も更新したり、アンカーリンクを貼ったりと、かなりの手間が必要です。

 

抜けがあったり、間違えたりすると、ユーザビリティや上位表示にかえって逆効果になるかもしれません。

 

htmlに詳しい人や、今挙げたような手間をいとわない人は良いですが、多くの人はそうではないと思います。

私も、手動で目次を表示なんて、想像するだけで冷や汗が止まりません。

それ以前に、何をどうすればいいのか見当もつきません。汗

 

そこでおススメしたいのが、Table of Contents Plusというプラグインです。

 

Table of Contents Plusを導入すると、記事で「あること」をするだけで

面倒だと思われていた目次が簡単に、しかも自動で表示されるのです。

 

今日は、目次を自動で表示してくれるプラグイン、Table of Contents Plusをご紹介します。

 

1.Table of Contents Plusでの目次表示例

ちなみに、このブログでもTable of Contents Plusで目次を表示させています。

こんな感じです↓

wordpress-mokuji

 

詳しくは後ほど説明しますが、設定で自由にカスタマイズすることができます。

 

それでは、今からTable of Contents Plusで実際に目次を表示させましょう。

 

2.Table of Contents Plusをインストールして有効化する

まずは、Table of ContentsをあなたのWordPressにインストールします。

インストール&有効化の手順を、順を追って説明します。

 

2-1.Table of Contents Plusインストール

2-1-1.プラグインの新規追加

wp-dashboard

あなたのWordPressのダッシュボードで、「プラグイン」にカーソルを持っていくと

「新規追加」が続けて表示されます。(画像、赤〇部分)

 

それをクリックしてください。

 

2-1-2.「プラグインを追加」画面で

plugin-search

2-1-1から画像のように画面が切り替わったら

①検索窓に「Table of Contents Plus」と入力

②赤□のようなアイコンが表示されるのを確認します。

③確認したら、「今すぐインストール」をクリックします。

 

2-1-3.プラグインを「有効化」

plugin-install

2-1-2.で「今すぐインストール」をクリックすると

「有効化(画像の赤〇部分)」に切り替わるので、それをクリックします。

 

「プラグインを有効化しました」と表示されたらOKです。

これで、プラグインがインストールされました。

 

3.Table of Contents Plusの設定

続いて、インストールしたプラグインの設定に入ります。

 

これを行なうことで、目次をあなたのお好みに設定することができるので

最後までしっかりと行ないましょう。

 

3-1.Table of Contents Plus設定の前に…

Table of Contents Plusの設定に入る前に。

最初にお話しした、目次が簡単に表示されるために記事で行う「あること」についてです。

 

その「あること」とは、見出しタグです。

 

見出しタグはh1~h6までありますが、主に使うのはh2~h4です。

(h1は記事タイトルなので使わない)

 

これらの見出しタグを記事の要所要所に入れることで、はじめて目次が表示されるのです。

 

…と言うより、Table of Contents Plusの設定を行なっても

記事に見出しタグが挿入されていなければ目次が表示されません。

 

もしあなたが、見出しタグを今まで一切入れていなかったら、まずは記事に見出しタグを入れましょう。

1記事だけで1000pvを獲得するブログ記事の書き方

 

3-2.Table of Contents Plus基本設定

ここから、Table of Contents Plusの設定に入ります。

まずは、目次を表示するための基本的な設定を行ないます。

 

3-2-1.ダッシュボードで

mokuji

ダッシュボードで、画像のように

①「設定」にアイコンを持っていくと

②「目次+」が続けて表示されるので、それをクリックします。

 

3-3.Table of Contents Plusで必ず行ないたい2つの設定

tables-of-contents-plus-top tables-of-contents-plus-top2 tables-of-contents-plus-top3

3-2-1.の操作を行うと、画像のように管理画面が表示されます。

Table of Contents Plusの設定は、すべてここで行ないます。

 

すべての項目を1つ1つ紹介していると膨大になってしまうので、ここでは

その中でも必ず設定しておきたい項目に絞ってご紹介します。

 

※ここで紹介されていない項目については、基本的にデフォルトのままで変更なし

と、捉えてください。

 

3-3-1.表示条件を変える

Table of Contents Plusで必ず行ないたい設定。

1つめは、「表示条件」です。

 

ここでは、いくつ以上見出しがある時に目次を表示するかを設定できます。

 

2~10までの間で選択できて、最初は「4」で設定されています。

hyouji-jouken

 

文字数が少ない記事だと、見出し4つ以上はなかなか入りません。

4つ以下だと目次が表示されなくなってしまいます。

 

それを防ぐために、2つ以上見出しが入ってたら目次が表示されるように

「2」に設定しましょう。

 

3-3-2.目次を表示する記事の種類を決める

Table of Contents Plusで必ず行ないたい2つめの設定は

目次を表示する記事の種類です。

 

基本設定の3番目、「以下のコンテンツタイプを自動挿入」で行ないます。

post-check

ここでの項目は、それぞれ以下の通りです。

post:通常の記事

page:固定ページ

wpcf7_contact_form:コンタクトフォーム

 

最初は、「page」のみにチェックが入っていますが、通常の記事でも目次を表示させたいので

「post」にもチェックを入れましょう。

 

3-3-3.設定が終わったら…

tables-of-contents-plus-top4

設定が終わったら、画像の赤〇部分、「更新」をクリックします。

 

「設定を保存しました。」と表示されたらOKです。

自分のサイトで、設定が反映されているか確認しましょう。

 

3-4.Table of Contents Plus上級者向け設定

hyouji-click

基本設定の下の方にスクロールしていくと、「上級者向け」という項目があります。

それをクリックすると、設定項目が追加で表示されます。

 

目次をさらに細かく設定したい場合は、ここで設定することができます。

tables-of-contents-plus-advance2

この中で設定する必要があるとしたら、「見出しレベル」くらいで(画像の赤□で囲った部分)

あとは特にこだわりがなければ、すべてデフォルトのままで問題ありません。

 

「見出しレベル」では、h1~h6までの、どの見出しタグを目次で表示させるかを決めることができます。

最初はすべてにチェックが入っていて、チェックを外した見出しタグが表示されなくなります。

 

3-5.サイトマップも作れる

tables-of-contents-plus-sitemap

Table of Contents Plusでは、目次だけでなくサイトマップを作ることができます。

サイトマップを表示したい記事に、ショートコードを貼り付ると使うことができます。

 

この機能を使わない場合は、特に設定する必要はありません。

 

さいごに

今回は、WordPressで目次を自動で表示してくれるプラグイン、Table of Contents Plusと

そのインストール&設定方法について、ご紹介しました。

 

いかがでしたでしょうか?

 

まだ使っていなかった人は、ぜひこの記事を参考にして活用してください。

 

 

今日も、最後まで読んでいただいて、ありがとうございました。

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

「人生で何がしたいのか?」分からないまま彷徨っていましたが、メンターとの出会いで人生が180度変わりました。 アフィリエイト、ネットビジネスはもちろん、インターネットの知識はほとんどゼロ!!でしたが メンターから1から徹底的に教わり、始めて1年足らずでネットビジネスで成功することができました。 今は、それまでの経験をもとに、ブログ執筆のかたわら、コンサル活動をしています。