この記事では、WordPressの記事の目次を挿入する方法を解説していきます。
目次を挿入する方法としては、主に次の2つの方法があります。
- 目次となるHTMLを自身で書く
- プラグインで挿入する
TIPS
他にもJQueryを使って、挿入する方法などあります。
HTMLを書いて目次を挿入する
HTMLを書いて目次を挿入するためには、HTMLとCSSの知識が必要となります。
メリット・デメリット
メリット
- 表示する項目を自由に選べる
- 縦に並ぶ目次以外にも、横並びの目次など様々なレイアウトを実現しやすい
デメリット
- ページ数が多くなると、目次の管理が大変になる
この方法がおすすめのサイト
- 少数ページのサイト
- デザインにこだわりたいサイト
チェック
記事数が多くなるブログでは、管理が大変になるのでプラグインを使用して挿入数方法をおすすめします。
HTMLを書いて目次を作る方法
ここでは、目次の項目をクリックすると該当の見出しまで移動する目次の作り方をご紹介します。
- 目次となるHTMLを書く
- 見出しに対応するidタグを追加する
目次となるHTMLを書く
<div class="toc"> <div>目次</div> <ol> <li><a href="#i-1">大見出し①</a></li> <li><a href="#i-2">大見出し②</a> <ol> <li><a href="#i-3">中身出し②-1</a></li> </ol> </li> </ol> </div>
見出しに対応するidタグを追加する
<h2 id="i-1">大見出し①</h2> <h2 id="i-2">大見出し②</h2> <h3 id="i-3">中身出し②-1</h3>
他にも次のような記載も可能です。
<h2><span id="i-1">大見出し①</span></h2> <h2><span id="i-2">大見出し②</span></h2> <h3><span id="i-3">中身出し②-1</span></h3>
注意
見出しのidに含める値には、hrefプロパティに記載した値から「#」を除きます。
プラグインで目次を挿入する
WordPressには、目次の挿入を可能とするプラグインがあります。
代表的なプラグインは、次の3つです。
いずれのプラグインも使いやすいものです。
当サイトで使用しているプラグイン
2020年4月時点、当サイトでは、「LuckyWP Table of Contents」を使用しています。投稿ごとのカスタマイズや使えるフィルターが便利です。LuckyWP Table of Contentsの解説記事はこちら
メリット・デメリット
メリット
- 自動挿入が可能なので、目次を作成する手間が省ける
- 記事内だけでなく、サイドバー（ウィジェット）にも目次を配置できる
デメリット
- デザインは基本的にシンプル
この方法がおすすめのサイト
- ページ数が多くなるブログ
プラグインで目次を挿入する方法
プラグインごとに使い方が異なります。