あずきです🐥
WordPressにおける代表的なプラグインの1つ…
Table of Contents Plus（TOC＋）
について、その導入手順と「おすすめな設定方法」をブログ初心者さん向けに1から解説していきます
まず！
この「Table of Contents Plus」は、WordPressで投稿した記事ごとの「目次」を自動生成するためのプラグインです
具体的には、ページごとの「見出し」をもとに…
↑ こういった目次ボックスが、記事ごとで自動挿入されます
補足
「Table of Contents Plus」は、WordPressの目次作成プラグインとしては1番メジャーと言っても過言ではないと思いますが…
アップデートが長らく滞っている
という唯一の懸念点があって、このブログでも近年は別のプラグイン（Easy Table of Contents）に乗り換えていました
ただ2021年に入り待望の「最新版」がリリースされたので、デザイン面でも気に入っている「Table of Contents Plus」に戻しています
ということで、今回は2つのステップで丁寧に解説していきます
- 「Table of Contents Plus」の導入手順【インストールと有効化】
- 「Table of Contents Plus」のおすすめな設定方法
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
Contents
【2021年】Table of Contents Plus（TOC＋）の設定方法を初心者向けに解説【WordPressプラグイン／記事ごとの目次を自動生成】
ステップ１：WordPressプラグイン「Table of Contents Plus」の導入手順【インストールと有効化】
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください
はじめに…
プラグイン「Table of Contents Plus」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Table of Contents Plus と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Table of Contents Plus」を探し、右上の「今すぐインストール」ボタンをクリックします
「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう
↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ステップ２：WordPressプラグイン「Table of Contents Plus」のおすすめな設定方法
つづいて2つ目のステップは…
プラグイン「Table of Contents Plus」の設定方法
について
設定内容に絶対的な正解はもちろんないですが、ここではこのブログでも実際に使用している設定例をもとにご紹介していきます
WordPress管理画面の左側にある一覧メニューから…
↑ 設定 ＞ TOC＋ をクリックしましょう
「Table of Contents Plus」の設定画面が開いたら、まず1番上に並んでいるタブについては…
↑ こちらの「基本設定」というタブだけ設定していけば、基本的にはOKです
各項目の概要
- 位置：目次を自動生成する「位置」を指定します
- 表示条件：指定した「見出し」の数に達していない記事の場合、目次は自動生成されなくなります
- 以下のコンテンツタイプを自動挿入：目次を自動生成する対象ページを指定します（「post」は投稿、「page」は固定ページ）
- 見出しテキスト：目次の上部に表示される「ボックスタイトル」などを指定します
- 階層表示：「H1・H2・H3…」という見出しの「階層」が、一目でわかる目次デザインになります
- 番号振り：目次内の各見出しに、「番号」が自動で振られます
- スムーズ・スクロール効果を有効化：目次内の各リンクがクリックされた際の「挙動パターン」を指定します
ちなみに！
「見出しテキスト」という項目内の「最初は目次を非表示」にチェックを入れると、読者がページを訪れたときのデフォルト状態が…
↑ このように畳まれたスタイルになります
つづいてその下の「外観」エリアです
各項目の概要
- 横幅：目次のボックスデザインの横幅を指定します
- 回り込み：目次内で幅一杯になったテキストの表示形式を指定します
- 文字サイズ：目次内のフォントサイズを指定します
- プレゼンテーション：目次ボックスのデザインを選択・指定します
上記の設定内容で、実際のページ上では…
↑ このようなデザインになります
ということで…
基本的な設定はこれで完了ですが、あと覚えておきたい項目が1点だけ！
設定画面の下部にある、「上級者向け」という場所を開いたなかの…
↑「見出しレベル」という項目です
この「見出しレベル」で、目次に表示される見出しの「階層」をどこまで表示させるか指定することができます
参考までに、このブログでは上の画像のように…
- H2見出し
- H3見出し
- H4見出し
の3つを選択しています
一通り設定できたら、画面の左下にある「設定を更新」ボタンを忘れずにクリックして、基本的な設定は完了です🐥
補足
【１】WordPressの各種設定が反映されない場合、ブラウザキャッシュ（＝ブラウザ側に一時保存される、以前の読み込み情報）が影響している可能性があります
ブラウザキャッシュの干渉を受けずに最新のページを表示させるには、「スーパーリロード」という方法がおすすめです
- Windows → 「Ctrl＋Shift＋R」 ※もしくは「Shift＋F5」
- Mac → 「Command＋Shift＋R」
【２】上記の方法でも反映されない場合、ページキャッシュ（＝サーバー側に保存される、以前の読み込み情報）が影響している可能性があります
ページキャッシュを自動生成するプラグイン（例 WP Fastest Cache / Autoptimize ）を導入している場合、そのなかの「キャッシュ削除」ボタンを試してみてください
-
【2021年】「Autoptimize」の設定方法と使い方を初心者向けに解説【WordPressプラグイン／コードの最適化でサイトスピードを高速化】
続きを見る
あわせてどうぞ
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全9章のTOPです
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現！
✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！
今ならプラグイン「すごいもくじLITE」を期間限定で配布中！
※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^