WordPressで目次を表示するプラグイン(Table of Contents Plus)

この記事は約2分で読めます。

  • LINEで送る

Table of Contents Plus

WordPressの記事に目次を自動生成するプラグインを紹介します。

記事内の目次表示は、ユーザビリティー向上に非常に役立ちますが、
反面、手動で毎回作成するのは面倒臭く、ミスを起こしがちです。

Table of Contents Plusは、目次を作成する見出しを細かく設定できたり、
デザインなども比較的細かく設定できるので使いやすいプラグインです。

この記事でも以下のように目次を表示しています。

目次表示の注意点

Table of Contents Plus導入の前に、目次を自動生成する上での注意点を説明します。
目次は、基本的に各記事や固定ページの見出しタグ(<h3>、<h4>など)をインデックスとして作成します。

記事に見出しが指定されていなかったり、構造化していない適当な見出しを設定している場合は、
バラバラで脈略のない目次になったり、それ以前に目次表示されなかったりします。

目次を自動生成する場合には、見出しを見なおさなければならない可能性もあるので注意してください。

Table of Contents Plusを導入して目次を自動表示

それでは、Table of Contents Plusを導入します。

インストール

Table of Contents Plus

「プラグイン > 新規追加」から「Table of Contents Plus」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › Table of Contents Plus « WordPress Plugins

Table of Contents Plus

Table of Contents Plus

「Table of Contents Plus」を今すぐインストールし、インストール完了後にプラグインを有効化します。
これで、「Table of Contents Plus」のインストールは完了です。

表示する目次の詳細設定

「設定 > TOC+」を開くと、「Table of Contents Plus」の設定画面が表示されます。

Table of Contents Plus

  • Position:目次を自動生成する位置を指定
  • Show when:見出し数がいくつ以上で目次を自動生成するかを指定
  • Auto insert for the following content types:目次を自動生成する記事(post:投稿、page:固定ページ)を指定
  • Heading text:目次の先頭に表示される名前や、表示/非表示リンクを指定
  • Show hierarchy:目次を見出しに合わせて階層化するかどうかを指定
  • Number list items:目次に番号を付与するかを指定
  • Enable smooth scroll effect:目次リンククリック時、滑らかにスクロールさせるかを指定
  • Width:目次ボックスの横幅を指定
  • Wrapping:目次ボックスの横位置を指定
  • Font size:目次内の文字サイズを指定
  • Presentation:使用するデザインを指定

次に、「Advanced (show)」をクリックすると、さらに詳細な設定ができます。

Table of Contents Plus

当ブログでは、画像部分の目次に使用する見出しのみ変更しています。
賢威では、基本的に記事内見出しは「<h3>」以降なので、「<h3>」以降にチェックしましょう。

Table of Contents Plus

このような目次が自動生成されますので、確認してください。

  • LINEで送る

コメントを残す

このページの先頭へ