もくじを自動で作成。WordPressプラグイン「Table of Contents Plus」導入＆初期設定

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。当ブログvdeepはWordPressを使って運営しているのですが、簡単にもくじを設置できるプラグインがあったらいいなーと思って検索したら、ありました。その名も「Table of Contents Plus」。

Hタグに合わせて自動でもくじを作成してくれる、便利なプラグインです。

また、CSSで簡単にレイアウト設定と、任意の記事だけもくじを設定する方法も合わせて載せておきます。

ではさっそく導入していきましょう。

スポンサーリンク

Table of Contents Plusの導入

ダッシュボードから「プラグイン」→「新規追加」をクリック。

右上の検索バーに「Table of Contents Plus」と入力して検索、「いますぐインストール」を選択。

有効化しておきましょう。

Table of Contents Plusプラグインの導入が完了しました。

基本的な設定をおこなう

初期設定を行っていきます。

ダッシュボードから「設定」→「TOC+」をクリック。設定画面が表示されます。

もくじを表示する位置

Main Optionsタブが開いた状態で「Position」からもくじを表示する場所を選択。私は「Before first heading」にしました。

表示タイミングと記事の種類

「Show When」でHタグが◯個以上ある場合に表示する、という設定が行えます。「Auto insert for the following content types」で表示する記事の種類を設定。

今回はブログに設定するので「post」にチェックしました。

もくじのタイトルと表示・非表示

「Heading text」で表示するもくじにタイトルをつけることが出来ます。「Show text」と「Hide text」を設定するとユーザーがもくじを「隠すor開く」が選択できるようになります。

階層表示・番号表示・滑らかなスクロール

それぞれ以下の設定が行えます。

全てにチェックを入れました。

横幅・表示位置・文字の大きさ

もくじのデザインをある程度設定出来ます。

今回は特に設定しませんでした。

デザイン設定

「Presentation」からデザインを選択できます。お好きなデザインを選択。

私は「Grey」を選択しました。

表示するHタグの指定

「Advanced」の隣のshowを選択→詳細設定を開きます。

「Heading levels」から表示させたいHタグを選ぶことが出来ます。例えばH2・H3タグだけにチェックを入れれば二階層のもくじが作成されますね。

設定が終わったら「Update Options」を選択して保存。

次のようなもくじが自動で表示されました。

CSSでレイアウトを整える

デフォルトだと少し見にくいので、CSSで装飾します。次のコードをCSSファイルに記述します。

div#toc_container {
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 20px;
  border: 2px solid #E0E0E0;
}
div#toc_container p.toc_title {
  font-size: 1.1em;
}

軽く解説。

こんな感じになります。

お好きな様にレイアウトしてみてください。

もくじの表示・非表示を任意で指定する方法

この方法で好きな場所にもくじを挿入できるように。

任意の記事だけもくじを表示

任意の記事を選んで表示するには、先ほどの設定画面にある「Auto insert for the following content types」のチェックを全て外します。

こうすうると全てのページでもくじが非表示になりますが、下記コードを記事内に貼り付けることで、任意の記事にもくじを挿入することができます([]は小文字で入力してください)。

［toc］

任意の記事だけもくじを非表示

常にもくじを表示するが、任意の記事だけ非表示にしたい場合。「Auto insert for the following content types」の「post」にチェック。

もくじが自動的に表示されます。下記コードを非表示にしたい記事に貼り付けることで、任意の記事だけもくじを表示させないようにできます。

［no_toc］

Table of Contents Plusプラグインの設定は以上です。お疲れ様でした。

まとめ

このプラグインを使うことで、簡単にもくじを挿入することができました。

文量が多い記事にもくじは必須かと思われるので、まだ導入していない方はこの機会にどうぞ。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

今まで適当にHタグを設定していたので、これから過去記事見なおしてきます。時間かかりそうだなぁー。

Web開発のお仕事を募集しています