今回はtable of contents plusというプラグインを使って目次を作ってみました。
どうですか？目次をつけただけで内容が一瞬で分かるようになりましたね！
この目次はtable of contents plusとcssを少し加えてカスタマイズしたものになります。
プラグインだけでも十分綺麗な目次が作れるのでお好みでどうぞ。
table of contents plusの使い方
まずはワードプレスの管理画面から「table of contents plus」をインストールします。
インストールしたら有効化します。
終わったらワードプレスの左側の画面「設定」にマウスを当てると、「TOC+」があるかと思います。
開くと設定画面が出てきます。ここで番号をつけたり色を変えたり基本的な設定ができます。
基本セッティング
まずは下の画像と同じように設定してみてください。
続いて「上級者向け」を開きます。
どこの見出しまでを表示するか設定しましょう。
これで基本的な設定はできました！
この設定では自動で目次が作られるようになっていますが、「表示条件」を編集すれば自動で作らないこともできます。
あとは自分の好きなように試してみてください。
h〜見出しまで表示するかなど、実際試しながら設定していきましょう。
まとめ
どうでしたか？
簡単に作れましたね！！
今回はプラグインを使った目次の作り方をやりましたが、次回は手動で作る方法も試したいと思います。
参考css
あとはじめの、僕が使っている目次のcssも一応書いておきます。
テーマや使用環境によってはデザインが崩れたりうまく表示されないことがあるので、子テーマを使うことを推奨します。
#toc_container ul a {
border-bottom:1px dashed;
}
#toc_container:not(.contracted){
border: black solid 1px;
}
#toc_container li {
padding-bottom: 0;
padding-top: 0;
}
#toc_container li a:before {</div>
font-family: FontAwesome;
content: '\f058';
color: black;
padding-right: 5px;
}
#toc_container li li a:before {
font-family: FontAwesome;
content: '\f101';
color: black;
}
#toc_container li li li a:before {
font-family: FontAwesome;
content: '\f105';
color: black;
}