長文の記事は目次があった方が読みやすいものです。目次があれば、読者ははじめに何が書かれているのかを把握できるので、読みやすさが劇的にアップするわけです。記事が読みやすくなれば、間接的に平均滞在時間のアップやファン化、検索エンジンからの評価のアップにも繋がる要因となりますね。
本稿ではWordPressの投稿記事に目次を挿入することが出来るプラグインを紹介します。デザイン性にも優れているのでおすすめです。
具体的には以下↓のような目次が自動で作られます(スタイルは弊社で調整を加えています)。
目次
「Table of Contents Plus」とは
Table of Contents Plusは、記事の目次を自動生成するプラグインです。
投稿や固定ページの記事に記述したH1からH6までの見出しタグを基に目次を自動生成します。
「Table of Contents Plus」のインストール
管理画面から「Table of Contents Plus」を検索してインストールして下さい。
もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
インストール後、管理画面の【プラグイン】より【Table of Contents Plus】を有効化してください。
「Table of Contents Plus」の設定方法
Table of Contents Plusの管理画面は下記の場所にあります。
管理画面の場所
WordPress管理画面 > 設定 > TOC+
現在のバージョンは日本化されており、簡単に設定できるようになっています。
-
- 表示する場所
目次の表示位置を設定します。
-
- 表示条件
いくつ以上見出しがある時に目次を生成するかを設定します。
-
- 次の投稿タイプのときに表示
目次を設置する記事の種類を設定します。チェックしたものは自動で目次が生成されます。
・post:通常投稿記事
・page:固定ページ
・news:お知らせページ
・wpcf7_contact_form:コンタクトフォーム
-
- 見出しテキスト
目次のタイトルを設定します。
-
- 階層表示
目次の階層を表示させるか設定します。
-
- 番号振り
目次に番号を付けるか設定します。
-
- スムーススクロール
目次をクリックした時に、滑らかにスクロールさせるか、一気に飛ぶか設定します。
-
- デザイン
目次のデザインを設定します。基本的には全てデフォルトでかまいません。
変更があった場合は「更新」ボタンを押して終了してください。
以上で設定を終了します。
プラグインの使い方
基本的には自動で設定される目次なのですが、人によっては、特定の記事のみ目次を表示または非表示させたいということがあるかと思います。そこでその方法を最後に説明します。
特定の記事のみ目次を表示
特定の記事のみに目次を設定する場合は、記事の中に
と入力ください。そうすると記載した場所に目次が表示されるようになります。
※ただし、「次の投稿タイプのときに表示」が設定されていると全ての記事に目次が入りますので、チェックは外しておきましょう。
特定の記事のみ目次を非表示
通常は自動で目次が入り、特定の記事だけ目次をいれたくない場合には、記事中に
と入力してください。そうすると目次は非表示になります。
目次ウィジェットをサイドバーに表示
外観>ウィジェットにも「TOC+」というウィジェットが追加されるので、任意のウィジェットエリアにドラッグ&ドロップしてください。
目次を表示させたい投稿タイプにチェックを入れると表示されます。本文上には表示させずに、サイドバーのみに表示させるオプションもついています。
サイドバーに固定表示させたい場合は、下記プラグインもご活用ください。
メインカラムに本文、サイドカラム(サイドバー)にバナーやウィジェットを設置しているレイアウトの場合、記事本文が長いとサイドカラムが空白になってしまいます。 下の方までスクロールしてサイドバーに何も表示されていないとちょっともったいないですよね。そこで今回はサイドバーのコンテンツを追尾させて、デ...
目次が正しく表示されないときは?
「Table of Contents Plus」で目次が表示されない原因は複数あります。設定を間違えていたり、プラグインのバージョンによる不具合などです。こちらの記事で詳しく解説していますので、参考にご覧ください。
WordPressの投稿記事内に目次を自動生成するプラグイン「Table of Contents Plus」。見出しに連動して目次が作られるので、便利ですよね。 ただ、なんらかの原因で目次が表示されなくなることがあります。当サイトでも一時的に目次が表示されなくなったので、複数の原因とその対処方...
CSSで見た目をカスタマイズする
こちらの動画にCSSによるカスタマイズの方法についてご紹介しています。動画内で使用したCSSはYouTubeの概要欄に掲載しています。
目次があるとわかりやすい記事もあれば、ランキング記事のように目次が不要な記事もあります。記事ごとに使い分けのできるこのプラグインは非常に便利ですので是非ご活用ください。
ブログ記事に目次を設置するべき記事、そうでない記事、SEO的にはどういう影響があるのかについては、下記記事でご覧いただけます。よろしければどうぞ。