WordPress 目次の自動生成

WordPressの記事に「目次」を自動生成する実践例を紹介します。

WordPressで目次を生成する方法は、様々な方法が存在しますが、この記事で紹介する方法が一番簡単です。記事に書いてある手順で進めれば、初心者でも簡単に導入できます。

概要を説明すると、WPプラグインの「Table of Contents Plus」を利用してWordPressの記事に目次を生成します。

ちなみに、レンタルサーバーは「エックスサーバー」や「wpXレンタルサーバー」での利用を想定して記事を書いていますが、同じような共用レンタルサーバーであれば、他のレンタルサーバーを利用しても問題ありません。

はじめに

目次の役割

書籍

目次はWebサイトや書籍などの長い文章の中に記述されている文章の見出しを抽出して、分かりやすく整理して、文章の見出しを順番に一覧表示したものです。

目次は文章の要約や索引の役割があります。記事の目次を読めば、その記事に書いてあることの概略を知ることができます。

なぜ目次が必要なの?

Webサイトや書籍などの長い文章を読む際に、まず始めに長い文章に書かれている内容が自分にとって本当に必要な情報が含まれているかが知りたくなります。

最初に目次を読めば、その長い文章に何が書かれているかの概略を事前に知ることができます。

Webサイトや書籍などでは、目次を用意しておくことで、利用者の利便性を向上させることができます。

目次の表示例

目次を1階層のみ表示した例

H2の見出しのみを目次に表示した例(画像)です。

目次を1階層のみ表示した例

目次を2階層まで表示した例

H2、H3の見出しを目次に表示した例(画像)です。

目次を2階層まで表示した例

目次を自動生成するWPプラグイン

Table of Contents Plus

Table of Contents Plus

Table of Contents Plusは、記事の目次を自動生成できるWordPressプラグインです。投稿や固定ページの記事に記述したH1からH6までの見出し用のHTMLタグを基に目次を自動生成します。

記事の目次が自動生成されるので、手動で目次を作成して更新したり、アンカーリンクを張る手間が省けます。目次を利用すれば、ユーザーが記事の内容を一目で把握しやすくなる効果があります。

見出し用のHTMLタグを階層的に記述する必要があるので、WPプラグインの仕様に慣れるまでに少し戸惑うかもしれませんが、慣れれば非常に便利なので活用しましょう。

このプラグインが優れている点
  1. 記事の目次を簡単に自動生成できる。
  2. 投稿、固定ページ、カスタム投稿タイプに対応。
  3. 目次の表示位置や表示内容を細かく設定できる。
  4. 人間用のサイトマップを自動生成する機能もある。
  5. WPプラグインの管理画面が日本語化されている。
インストール方法

WP管理画面から検索してインストールして下さい。
もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Table of Contents Plus」で検索
  2. WordPress.org からダウンロード

WPプラグインの設定

WPプラグインの管理画面は下記の場所にあります。

管理画面の場所

WordPress管理画面 > 設定 > TOC+

基本設定

管理画面は日本語表記になっています。設定はデフォルト(初期値)でも運用できます。

目次の表示条件や文言は必要に応じて調整します。実際に表示される目次の内容を確認しながら設定を調整しましょう。

画面下部にある「上級者向け」の設定項目は、初期状態では非表示になっています。クリックすると設定項目が表示されます。

基本設定

上級者向け設定

この部分で変更が必要な部分は「見出しレベル」です。
目次に使用される「見出しレベル」を設定を行います。
目次に表示させたくない見出しレベルは、チェックを外して非表示にしましょう。

上級者向け設定

記事の見出しの記述例

「Table of Contents Plus」を利用するには、H1からH6までの見出し用のHTMLタグを階層的に記述する必要があります。

記事の中に見出し用のHTMLタグが無ければ、記事の目次は生成されません。

また、見出し用のHTMLタグを階層的に記述していないと、目次がゴチャゴチャに出力されるのでご注意ください。

目次を正しく表示させるために必要なこと

  1. 記事の中に見出し用のHTMLタグを記述する。(H1〜H6)
  2. 見出し用のHTMLタグは階層的に記述する必要がある。
  3. 目次に表示させたくない見出しは「上級者向け」設定でチェックを外して非表示にする。

HTML記述例

参考までに、この記事のHTMLを例として見出しの階層の記述方法を説明します。

一般的なWPテーマでは、下記のような見出しの階層(見出しレベル)になっています。H1からH6まで階層の順番で見出しを記述してください。

下記のサンプルコードのように見出しを記述すると、一番最初の見出しの上に目次が表示されます。

ちなみに、記事に表示する見出しの階層(見出しレベル)は、見出しを全て表示する必要はありません。見出しの階層は2階層くらいにまとめると丁度良い感じになります。

H1 記事タイトル
H2 大見出し
H3 小見出し1
H4 小見出し2
H5 小見出し3
<p>WordPressの記事に「目次」を自動生成する実践例を紹介します。</p>
<p>WordPressで目次を生成する方法は、様々な方法が存在しますが、この記事で紹介する方法が一番簡単です。記事に書いてある手順で進めれば、初心者でも簡単に導入できます。</p>
<p>概要を説明すると、WPプラグインの「Table of Contents Plus」を利用してWordPressの記事に目次を生成します。</p>
<p>ちなみに、レンタルサーバーは「エックスサーバー」や「wpXレンタルサーバー」での利用を想定して記事を書いていますが、同じような共用レンタルサーバーであれば、他のレンタルサーバーを利用しても問題ありません。</p>

<h2>はじめに</h2>
<h3>目次の役割</h3>
<p>目次はWebサイトや書籍などの長い文章の中に記述されている見出しを抽出して、分かりやすく整理して、記述された順番に一覧表示したものです。</p>
<p>目次は文章の要約や索引の役割があります。記事の目次を読めば、その記事の大まかな概略を知ることができます。</p>

<h3>なぜ目次が必要なの?</h3>
<p>Webサイトや書籍などに書かれた長い文章を読む際に、まず始めにこの文章に書かれた内容が自分にとって必要な情報が書かれているのかが知りたくなります。</p>
<p>文章を読む読者は、目次を読めば、その文章に何が書かれているかの概略が分かります。</p>
<p>Webサイトや書籍などでは、目次を用意しておくことで、利用者の利便性を向上させることができます。</p>

<h2>目次の表示例</h2>
<h3>目次を1階層のみ表示した例</h3>
<p>H2の見出しのみを目次に表示した例(画像)です。</p>
<p>IMG</p>

<h3>目次を2階層まで表示した例</h3>
<p>H2、H3の見出しを目次に表示した例(画像)です。</p>
<p>IMG</p>
以下省略
補足
  • 上記のサンプルコードは、説明を分かりやすくするためにPタグを利用していますが、文章の間に改行を適度に入れれば、Pタグの記述は省略しても問題ありません。
  • WPテーマの見出しの階層は、WPテーマごとに仕様が異なります。「サイトタイトル:H1」「記事タイトル:H2」になる場合もあります。

まとめ

WordPressの記事に「目次」を自動生成する実践例を紹介しました。

WordPressで目次を生成する方法は、様々な方法が存在しますが、この記事で紹介する方法が一番簡単です。記事に書いてある手順で進めれば、初心者でも簡単に導入できます。

記事の目次は、利用者に対して記事に何が書かれているかの概略を事前に伝える役割があります。

ブログやWebサイトを構築した際は、記事に目次を用意しておくことで、利用者の利便性を向上させることができます。

スポンサーリンク