こんにちは、りゅうのすけ(@k_r001)です。
この記事では、目次を自動生成してくれるプラグイン「Table of Contents Plus」の使い方をまとめました。
こういった方に向けて書いています。
WordPressで目次を作成するプラグイン
目次を自動で作成してくれるプラグインは、「Table of Contents Plus」です。
ソースコードでも目次を作成することは可能ですが、慣れていない方や、変更を加えることが多い人などはすごく手間がかかります。
訪問者向けのHTMLサイトマップも、簡単に自動生成することができます。
Table of Contents Plusをインストール
まずは、「Table of Contents Plus」をインストールしましょう。
キーワードに、「Table of Contents Plus」と入力すれば出てきます。
インストールしたら必ず有効化しておきましょう。
パソコン内にプラグインをダウンロードしたい場合は、⬇︎下記記事にまとめてあります。
Table of Contents Plusの目次設定
「Table of Contents Plus」の目次設定は、3箇所設定しておきましょう。
- 表示条件
- 以下のコンテンツタイプを自動挿入
- 目次のデザイン
目次の設定をしておくことで、全ての記事に設定が適応されます。
表示条件
表示条件は、目次を生成する条件です。
見出しをがいくつあれば、目次の生成をするか指定します。
例えば、3に設定していると、見出しが3つ作成された時点で自動で目次が生成されます。
以下のコンテンツタイプを自動挿入
コンテンツタイプは、「記事」や「固定ページ」のことです。
訪問者に見えるのは、以下の2つです。
- post ➡︎ 記事
- page ➡︎ 固定ページ
全て表示させてくない場合は、一部だけ表示することもできます。
特定のページにだけ目次の表示非表示の設定
一部の記事だけ目次表示、非表示にしたい方は、下記コードを記事内に追加すると変更できます。
固定ページなど、一部目次を表示させたくない場合に使うことをおすすめします。
目次のデザイン
目次のデザインは、以下の3つのON or OFFを設定できます。
- 見出しテキスト ⬅︎ 見出しのタイトル表示
- 階層表示 ⬅︎ H2、H3の見出しの表示方法を分ける。
- 番号振り ⬅︎ 目次の中の見出しに番号を振る。
このサイトの目次は、全てにチェックを入れています。
サイトマップの設定
サイトマップは作成しておくことで、訪問者がサイト内で迷わないようになります。
訪問者のために作成しておきましょう。
- [sitemap]をコピー
- 固定ページを新規作成
- [sitemap]を貼り付ける。
サイトマップの作成は、これだけです。
固定ページのラベル、カテゴリーのラベルは、タイトルです。
任意の文字を入れましょう。
この方法だとカテゴリーが分けられているだけなので、別の方法でサイトマップを作成することをおすすめします。
サイドバーに追尾型の目次設定
追尾型の目次をサイドバーに設定することで、ページをスクロールしても常に目次が表示された状態になります。
外観➡︎ウィジェット➡︎TOC+➡︎サイドバー追尾➡︎ウィジェット追加
これで追尾型の目次が作成できます。
次に目次の設定をしましょう。
- タイトル➡︎任意
- 目次サイドバーのみに表示にチェックを入れると記事中に目次が表示されなくなります。
- postにチェック(固定ページにも表示させたい場合はpageにもチェックを入れる)
変更できたらあとは保存するだけです。
追尾目次デザインの変更
追尾の目次は、そのままだとH2、H3のデザインに違いがないままです。
H2、H3を区別するにはカスタマイズで追加CSSを入れてください。
/*サイドバー追尾目次*/
.toc_widget_list li{
font-size: 14px;
font-weight: bold;
padding: 4px 0;
}
.toc_widget_list li ul a::before{
content: "・";
}
.toc_widget ul li ul {
border: none;
padding: 0px 0px 0px 10px;
}
.toc_widget ul {
max-height: 460px;
overflow-y: auto;
}
.toc_widget_list li ul{
margin-left: 1.0em;
text-indent: -1.0em;
}
.toc_widget_list li ul li a {
font-size: 13px;
font-weight: normal;
}上記コードを追加CSSにコピー&ペーストで貼り付けて公開すればOKです。
外観 ➡︎ カスタマイズ ➡︎ 追加CSS
まとめ
「Table of Contents Plus」は、目次やサイトマップを簡単に作成できるプラグインです。
サイトの使い勝手がよくなるので、ぜひ活用してみてください！
「Cocoon(コクーン)」などテーマによっては、元から目次があるものもあります。
デザインが気に入らなければ、取り入れてみてもいいと思います。
最後まで見ていただき、ありがとうございました。
