こんにちは、ウェス＠ブログ初心者です。
徐々に記事を公開していて、それぞれ記事の内容に見出しをつけています。
ページ内にどんなことが書かれているかわかりにくいかなと思うようになってきました。
色々ネットで調べるとWordpressのプラグインで目次を設定出来るということがわかりましたので、今回は目次を表示させるプラグインをご紹介したいと思います。
例によってGoogleで「Wordpress 目次 見やすい」と検索してて、こちらのサイトにたどり着きました。
そちらを参考にさせていただき、「Table of Contents Plus」というプラグインを使用することに決めました。
「Table of Contents Plus」インストールから設定するところまでご紹介したいと思います。
Table of Contents Plusをインストール・設定してみる
Table of Contents Plusをインストールする
最初にTable of Contents Plusをインストールするところからはじめたいと思います。
Wordpressの管理画面の「プラグイン＞新規追加」にアクセスしてください。
画面右上にキーワード検索のフォームがありますので、「Table of Contents Plus」と入力してください。
Table of Contents Plusが出てきますので、「今すぐインストール」をクリックを押して、インストール完了後に「有効化」をクリックしてください。
※Table of Contents Plusが検索の上位に出てこない場合は画面をスクロールして探してください。
目次の初期設定をする
管理画面の「設定＞TOC+」より設定を行います。
設定しておいた方がよいと思われる項目は
- 位置
目次をどの見出しの前後に入れるかを指定します。
ウェスのアレコレでは、「最初の見出しの後」にしています。 - コンテンツタイプを自動挿入
Wordpressのどのページで目次を自動挿入するかを選びます。
postは投稿、pageが固定ページとなり、ウェスのアレコレではどちらも自動挿入としています。 - 見出しテキスト
目次の表示をどのようにするかを決めます。
ウェスのアレコレでは、目次なので「目次」としています。
ユーザーによる目次の表示・非表示を許可しているので、それぞれ「表示・非表示」としています。 - 番号振り
目次内の見出しに番号を振るかどうかのチェックになります。
ウェスのアレコレではチェックなしとしています。
上記の設定が終わったら、上級者向けにある「表示」をクリックして上級者向け項目を開く
- 見出しレベル
この項目で目次にH1～H6のどの見出しまで表示させるかを指定できます。
ウェスのアレコレではH3まで表示させます。
以上の項目を設定したら「設定を更新」をクリックして設定完了です。
ウェスのアレコレでは自動挿入設定しているので、複雑な設定は以上でもいいのですがせっかくなので自動挿入設定していない場合のことも引き続き説明していきます。
目次の表示させ方
Table of Contents Plusでは、既に説明の通り表示方法が2つあります。
- 自動挿入設定の条件に満たしたら自動で表示させる方法
- 記事ごとに個別に目次を表示させる方法
それぞれ、メリットとデメリットがありますのでご説明致します。
自動で表示させる方法
メリット
- 目次を入れようと意識しなくても自動で表示されるので楽チン
- 条件をクリアしていれば設定後に過去記事にも目次が入る
デメリット
- 目次を希望しないページにも目次が入ってしまう
WordPressを使用している方が、見出しで区切ってコンテンツタイプの記事を書いている方が多いと思うので、自動設定でも問題ないのでｈなあいかと思います。
ただ、コンテンツタイプだけではなく、日記のような記事も混ぜて書いている場合は、デメリットが大きなデメリットになるかもしれません。
ウェスのアレコレは基本的にコンテンツタイプがメインとなる想定なので、自動挿入させています。
個別に目次を表示させる方法
メリット
- 目次が欲しい記事だけに表示させることが出来る
- 好きな場所に目次を入れることが出来る
- 記事ごとに表示させたい見出しレベルを設定出来る
デメリット
- 記事ごとにコードを入れる必要がある
- 過去記事にコードを追加するのが大変
デメリットにある、「過去記事」への対応が個別表示の最大のポイントではないかと思います。
あと、毎回目次用のコードを入れないならないので、忘れることもある。
ウェスのアレコレはまだ記事数が少ないので、個別対応でも問題ないとは思うのですが忘れがちになりそうなので、自動挿入を選択しました。
メリットにあった、記事ごとに見出しレベルを変えられるというのは
１．見出し２だけ目次に表示させたい時
［toc］
２．見出し３まで目次に表示させたい時
［toc heading_levels="2,3"］
上記の目次コードを記事内に入れれば表示されます。
※ウェスのアレコレでは自動挿入設定してるため、[]が半角だと目次が出てしまうため、全角にしています。
コピペする際は半角に書き換えてご使用ください。
以上で、Table of Contents Plusの基本的な使い方は終了です。
まとめ
やはり、記事に目次はあると見やすくなるのと、最初にどんなことが書いてあるのかわかるようになるので、読者にもメリットが大きいと思います。
難しい設定ではないので、ぜひご活用ください。
参考にさせていただいたサイトではフォントの変更方法や色の変更方法なども書いてありますので、興味がある方はご覧ください。
