WordPressブログに目次が欲しい!その悩みはプラグイン『Table of Contents Plus』を入れれば解決する

Sakiさん
ひとりでやるのと、段違いもいいとこですね!!😊わくわく😊 銀河さま、わたし目次を手作りしたんですけど笑、わたしのTCDのテーマbloomでも、記事内の目次って自動で作れるかご存知です??

と、質問を受けた。ぶっちゃけ「さぁーてゴロゴロしよっかなー」という気分だったけど

銀河
お答えしましょう! 帰宅して横になりながらスマホから見てたけど、起き上がってパソコン開きますね笑

  と、ノリで答えてしまったので、書斎に移動し、今こうしてせっせと記事を書いている。ちなみに僕は夜の仕事、サキさんはフランス在住なので、現在AM4:14。 フリーランスは24時間営業なのだ(気分次第)。

目次生成プラグイン『Table of Contents Plus』をインストールしよう

時間も時間なのでサクッといきますよ。ブログの目次機能は『Table of Contents Plus』というプラグインで実装できます。 プラグインのインストール方法はわかるよね? ▲ダッシュボード左のメニューから【プラグイン】→【新規追加】 ▲右上の検索窓に【Table of Contents Plus】をコピペ。いくつかプラグインが表示されるので、上のキャプチャ画像を参考にしてみてね。 僕はすでにインストール済みなのでちょっと違うけど、みんなは【今すぐインストール】と表示されてるはず。そのボタンをクリックしてさらに有効化。 インストールするだけじゃダメだよ。ちゃんと有効化してくださいね。

Table of Contents Plusの設定方法

プラグインを有効化したら次は設定をしていきますよ。簡単だからついてきてくださいね。 ▲有効化するとダッシュボードのサイドメニューの【設定】の項目に【TOC+】というものが追加されているはずだからそれをクリック。 ▲こんな感じの設定画面が開きます。上から順に説明していきますね。

基本設定・サイトマップ・ヘルプのタブ

いじるのは【基本設定】の項目だけ。つまりこのページのままだけでOKです。

位置

目次をどこに表示させるかの設定です。選択肢は

  1. 最初の見出しの前(デフォルト)
  2. 最初の見出しの後

の4パターン。これはデフォルトのままが1番おすすめ。

表示条件

見出しがいくつ以上で目次を表示させるかの設定だよ。見出しが2つとかの短い記事で目次があっても邪魔なだけだからね。 僕は【4つ以上】にしています。

初心者に注意点
数の設定にもある通り、「見出し」のテキスト文が目次となります。つまり見出しタグ(h2やh3など)がうまく使えていないと、目次が表示されない場合があります。

以下のコンテンツタイプを自動挿入

日本語がおかしいですが、つまりは「どのページタイプで目次を表示させますか?」っていう設定です。まぁ、難しい話はやめて簡潔に言いますね。 なにやら色々チェック項目がありますが、

  1. 記事ページだけに目次を表示(【post】にだけチェックを入れる)
  2. 記事ページと固定ページ両方に目次を表示(【post】と【page】の両方にチェックを入れる)

のどちらかお好みでどうぞ。僕は上のキャプチャの通り、記事ページ(post)にのみチェックを入れています。 なので、例えばめちゃめちゃ長文のプロフィールページは固定ページなので目次が表示されていません。記事ページの「【先に記事書け】それでもテーマが気になるWordPress完全初心者は無料で最強のこれ入れとけ」には表示されていますね。 なぜ僕が固定ページに目次を表示させないかというと、固定ページで作るであろうサービス紹介ページや問い合わせページ、人材募集ページなんかには目次が必要ないから。ただ、これは個人のページの使い方にもよるから、自分に合った方を選択すればOK。 その他にずらずらと並んでるやつは全部無視していい。

見出しテキスト

「目次」の名前をどうするかという設定ですね。

  • 目次
  • コンテンツ
  • CONTENTS
  • サクッと読みたい方はこちらから

あたりがよく見る感じかな。僕は最初カッコつけて「CONTENTS」にしてたけど今は「目次」にした。 これもお好みで。 あとは、目次そのものを開いたり閉じたりできるんだけど、その説明をなんて表示するかの設定ですね。 ▲僕はシンプルに日本語で【開く】と【閉じる】。OPENとかHIDEとか使ってる人も多いかな。 この項目の最後は【最初は目次を非表示】の有無。デフォルトで目次を表示させるか、閉じておくかですね。僕は【非表示

階層表示

目次を見出しタグ通りに階層で表示するか、全部同列で表示するかの設定。

  1. 大見出し
    1. 中見出し
    2. 中見出し
  2. 大見出し
  3. 大見出し
    1. 中見出し
    2. 中見出し

とするか

  1. 大見出し
  2. 中見出し
  3. 中見出し
  4. 大見出し
  5. 大見出し
  6. 中見出し
  7. 中見出し

とするかの設定ですね。【チェックを入れる】で。

番号振り

見出しに番号を振るかどうかの設定。

  1. 大見出し
    1. 中見出し
    2. 中見出し
  2. 大見出し
  3. 大見出し
    1. 中見出し
    2. 中見出し

こうするか

  • 大見出し
    • 中見出し
    • 中見出し
  • 大見出し
  • 大見出し
    • 中見出し
    • 中見出し

こうするか。僕は【チェックを入れる】で。

スムーズ・スクロール効果を有効化

パッと移動か、ヌルッと移動か。まぁ、見た方が早いかな。 ▲パッと移動バージョン。 ▲ヌルッと移動バージョン。僕はナウイからこっち

外観(横幅・回り込み・文字サイズ・プレゼンテーション)

飽きてきたよね? これで最後だからまとめていきますよ。 横幅:目次の横幅です。自動(デフォルト)でOK 回り込み:なし(デフォルト)でOK 文字サイズ:95% プレゼンテーション:お好み 以上! 無事に見出しは設定できたかな?

使うテーマによってはTOCプラグインのデザインが最適化されているものもある

前回の記事「【先に記事書け】それでもテーマが気になるWordPress完全初心者は無料で最強のこれ入れとけ」でも言ったけど、「記事ページに目次欲しい」はブログ初心者なら優先的に欲しくなる機能の1つだ。「デザインカスタムする前に先に記事書け」と言われても間違いなく気になる部分。 だから僕はLION BLOGをオススメした。このテーマには純正で目次表示機能がついているからだ。 他にも無料テーマ『Sentry』や『Cocoon』では、今回紹介したプラグイン『Table of Contents Plus』のデザインがテーマに最適化されている。このようなテーマをおすすめすることで、初心者にありがちな「調べすぎて泥沼にはまって時間を浪費する」という事態から救いたいと思ってます。 はい、ということで話は戻って「TCDテーマのBloomで目次を自動で表示できるか」ですが、このプラグインを使えば可能です。TCD製テーマ『Bloom』は高機能、ハイクオリティで大人気のテーマです。 おしゃれなライフスタイルのサキさん、これで頑張ってカスタムしてもっとおしゃれなブログにしてくださいね。もちろんBloomだけでなく、有料でも無料でも国産でも海外産でもどのテーマでも目次は実装できます。 『Table of Contents Plus』自体はかなり定番のプラグインですので、この機会に是非知っておいてください。

WordPressテーマ「Bloom(TCD053)」

銀河へのお問い合わせや質問はこちらからどうぞ

]]>

この記事を書いた人

野口 銀河

PC11代表取締役|WordPressブログ歴15年|「Webと飲食で地方創生」がビジネスコンセプト|元DJ・元バーテンダー・元高級レストランオーナー支配人|酒・音楽・ガジェット・旅行・古民家暮らし・スーツ好き|猫も好き|