WordPressを運用していると目次を入れておしゃれなページにしたい、と思うこともあるでしょう。WordPressに目次を入れることでユーザーにとってわかりやすい記事になり、SEOにも効果があります。
WordPressに目次を入れるにはプラグインで入れる、目次機能のあるWordPressのテーマを使う、テキストエディタで自作するという方法があります。
ここではWordPressで目次を作成する方法について詳しくご紹介しているので、見ながら設定していきましょう。
WordPress (ワードプレス)で目次を作成するメリット
ユーザーにとってページの内容がわかりやすい
目次を作成すると、ユーザーが記事の内容を一目でわかるようになります。一般的に目次は記事の最初に作成されることが多いので、ページに訪れたユーザーが最初に目に入るものです。
そのため記事を読む前にこの記事にユーザーが知りたい情報があるのかを知られます。
つまり目次を作ることでユーザーは求めている情報を得やすくなり、ユーザビリティの高い記事になります。
ユーザーが目的の情報を手に入れやすい
目次の見出しのリンクをつけると、クリックすると該当している箇所まで簡単に飛べます。
目次がない記事の場合はすべてに目を通さないといけませんが、目次があればユーザーが知りたい情報だけピックアップして読むことが可能です。
そのためユーザーが求めている情報を早く得られるというメリットがあります。またユーザーがページに滞在した時間が長いほどSEOとして良い評価を得られるといわれていますが、Googleはページで検索を終えたときのラストクリックも観測しています。
つまりユーザーの求める情報を早く提供できることもSEO対策になるのです。
検索結果からのクリック率が上がる
WordPressで目次を作成すると、Google検索をした際にタイトルの下に見出しが表示されます。そのためユーザーがページを開く前に、記事にどんなことが書かれているのか把握できるのです。
目次が検索結果に表示されることで、ユーザーが知りたいものがあると判断しクリック率が上がります。
WordPress (ワードプレス)の目次の作成方法を選ぶ
プラグインを使うメリット・デメリット
WordPressに目次を入れる方法の一つ目は「プラグインを使う」方法です。プラグインは一番簡単に目次を入れられる方法なのでおすすめです。
自分のWordPressにプラグインを導入するだけで、自動で目次を作れるというメリットがあります。プラグインには種類がたくさんあり、それぞれに特徴があります。
プラグインをたくさん使うと重たくなってしまうというデメリットがあるので注意が必要です。
自作するメリット・デメリット
WordPressに目次を作る方法の二つ目は「HTML言語で自作する」方法です。プラグインをWordPressに導入しなくても、HTML言語を使って目次を自作することも可能です。
WordPressがバージョンアップしても対応できるというメリットがあります。またプログラミング言語に詳しい人であれば目次の細かい設定もできます。
デメリットはHTMLの知識が必要になることです。HTMLとはサイトを構築する際に使われるプログラミング言語の一つで、知識がない人は勉強しなくてはいけません。
目次を作成できるWordPress (ワードプレス)のプラグイン
Table of Contents Plus
Table of Contents Plusは簡単に目次を作れる人気のプラグインです。自動で目次を作成してくれて、目次を表示する位置や表示内容まで細かい設定ができます。過去の記事にも目次を入れられ、目次を入れたくない記事は手動で設定が可能です。
Table of Contents Plusはトラブルが起きたときにネット上で解決できるプラグインを使いたい人や、サイトマップも作りたい人におすすめです。
インストール方法
Table of Contents Plusをインストールする方法について解説します。
まずWordPressのプラグインの項目から新規追加をします。
「Table of Contents Plus」で検索をして、「今すぐインストール」をクリックしましょう。
Table of Contents Plusのインストールが完了したら「有効化」をクリックします。
WordPressの設定の欄に「TOC＋」があれば、無事にインストールが完了しています。
設定項目
Table of Contents Plusをインストールできたら、設定をしていきましょう。
細かく設定できるので、1つ1つ確認していくことがおすすめです。
| 設定項目 | 内容 |
| 位置 | ページのどこに目次を表示させるのかを設定できます |
| 表示条件 | 目次を表示する条件を設定できます |
| 以下のコンテンツタイプを自動挿入 | 記事ページや固定ページなど目次を設定したい箇所を選択できます |
| 見出しテキスト | 目次のタイトルを指定できます |
| 階層表示 | h3やh4などの小見出しをインデント表示するか指定できます |
| 番号振り | 各見出しに番号をつけられます |
| スムーズ・スクロール効果を有効化 | 目次をクリックしたときに指定の見出しまで一気に飛ぶのかスクロールしながら移動するのかを指定できます |
| 外観 | 目次のデザインの設定ができます |
見出しを使って記事を書く
見出しを使ってページを作ってみましょう。見出しをつけて記事作成をすると、見出しを元にしてページの最初に目次が自動で表示されるようになります。
初期設定のままの場合は、目次には自動で番号が振られています。
間違った見出しのつけ方をしていると目次として表示されないので、h2・h3…など正しく見出しを設定するようにしましょう。
ショートコードを挿入して任意の場所に目次を作成する
Table of Contents Plusでは目次を自動的に作る以外にも、手動で表示させることも可能です。手動で目次を表示させたい場合は、ショートコードの[toc]を挿入することで任意の場所に目次を作れます。
例えば一つ目の見出しの後に目次を置きたい場合は、一つ目の見出しの後にショートコードの[toc]を入力すると、目次を一つ目の見出しの後に表示できます。
Easy Table of Contents
Easy Table of Contentsは、更新頻度高いことが特徴のプラグインです。定期的に更新しているため、WordPressがバージョンアップしても対応できます。
将来的に使えなくなる心配が少なく、安心して使えるでしょう。目次の表示や非表示の設定が簡単で、細かい設定も可能です。
ただしサイトマップを作れないことがデメリットです。
インストール方法
Easy Table of Contentsをインストールする方法について解説します。
WordPressのプラグインの新規追加をクリックします。そして「Easy Table of Contents」と検索して「今すぐインストール」をクリックしましょう。
インストールができたら、「有効化」をクリックすると使えるようになります。
設定項目
Easy Table of Contentsをインストールできたら、設定をしていきましょう。
| 設定項目 | 内容 |
| サポートを有効化 | 目次を有効にする投稿タイプを選択できます |
| 自動挿入 | 目次を自動で表示させる投稿タイプを選択できます |
| 位置 | 目次を表示する位置を設定できます |
| 表示条件 | 目次を表示する見出しの件数を設定できます |
| 見出しラベルを表示 | 目次のタイトルの設定ができます |
| 折りたたみ表示 | 目次を折りたたむことができる設定ができます |
| 初期状態 | 初期状態で目次を折りたたんで非表示にできます |
| ツリー表示 | インデント表示させる階層構造の設定ができます |
| カウンター | 目次の頭につく数字の表記方法に関する設定ができます |
| スクロールを滑らかにする | 目次をクリックしたときに滑らかに該当箇所まで移動する設定ができます |
| 外観 | 目次の幅や文字サイズなどの見た目を設定できます |
プラグインを使わずにWordPress(ワードプレス)で目次を作成する方法
プラグインを使わずに作成する際の注意点
プラブインを使わずに目次を作成する場合は、見出しのタグに目次のタグを埋め込む必要があります。
そして見出しに埋め込んだ目次のタグをまとめてページの最初に設置することで、目次を表示できます。
目次機能に対応したテーマを使う
Cocoon
Cocoonは簡単に目次が作成できるテーマです。無料で使えるテーマですが、デザイン性の高い目次を作れます。
プラグインを導入せずに目次を表示させたい人におすすめのテーマです。
JIN
JINは有料の目次を表示できるテーマで、Table of Contents Plusと相性の良いです。
ソースコードを書いて自作する
ページリンクのついていない目次で十分な場合は、リストのタグを使うことで簡単に目次を作成できます。
- 1目次の初めに<ul>を記述する
- 2それぞれの見出しの前に<li>を記述して</li>で囲む
- 3見出しの最後に</ul>を記述する
目次の見出しをクリックしたら該当の場所へ飛ぶようにページリンクをつけたい場合は、目次にリンクを追加することでリンクありの目次を作れます。まずそれぞれの見出しを下記のようにaタグで囲みます。
<li><a href=”#anker”>見出し1</a></li>
「見出し1」の部分にリンクを設置してURLを記入する欄には「#」を入力しましょう。#ankerの部分は個別のIDのようなものなので、任意の言葉で構いません。
そしてリンク先の見出しにタグを埋め込みます。リンク先の見出しのh2,h3などのタグを記入している部分を下記のように記述します。
<h2 id=”anker○”>
◯の部分には数字を入れます。
目次のリンクしている見出しの部分に、下記のように同じ数字を#の後に追加しましょう。
<li><a href=”#anker1″>見出し1</a></li>
設定したIDを目次と対応させることで、目次をクリックすると見出しに飛ぶようになります。
WordPress(ワードプレス)で目次を作成するときのポイント
目次を見れば記事の内容がわかるようにする
目次はユーザーが記事の内容を一目でわかるようにするためにあります。
そのため目次を読むだけで記事の内容をイメージできるようなものにしましょう。
短くまとめる
目次の文字数が長くなりすぎないようにしましょう。目次が長く読みにくくなると、ユーザーがページから離れてしまう原因になります。
それぞれの記事に適した表示にする
記事によって目次の表示方法を変えるのもポイントです。目次に使われる色や文字サイズなどのデザインを記事のテーマに合わせて工夫してみると良いでしょう。
WordPress (ワードプレス)の目次まとめ
WordPressに目次を表示する方法はいくつかあり、それぞれメリットとデメリットがあります。プラグインで目次を表示する方法は、自動で目次を作成してくれるので簡単という点がメリットです。
しかしプラグインを使いすぎると重たくなってしまうというデメリットもあります。ソースコードを書いて目次を自作する方法は、プラグインに比べると手間がかかりますが重たくなることはありません。
様々な目次の表示方法を試してみて、自分に合った目次の設置のやり方を探してみてはいかがでしょうか。
