プラグイン WordPress

【WordPress】目次を作るプラグイン Table of Contents Plusの使い方

【WordPress】目次を作るプラグイン Table of Contents Plusの使い方
WordPressで投稿ページの目次ってどうやって作ればいいの?
Table of Contents Plusってプラグインを使えば簡単に出来るよ!

WordPressは有料テーマを使用する場合は最初から目次がある事が多いと思いますが、オリジナルテーマの場合はありません。

そこで今回は簡単に目次を作れるプラグイン、Table of Contents Plusの使い方をご紹介していきます。

効率よくWordPress制作したい人はこちら

Table of Contents Plusをインストール

まずはプラグインをインストールして有効化します。

管理画面の『プラグイン新規追加 』から『Table of Contents Plus』と検索して見つかったら『今すぐインストール』をクリックしてそのまま『有効化』をクリックします。

そして設定にTOC+という項目があればインストール完了です。

 

Table of Contents Plusの設定

次に設定画面を見てみます。

まずは基本設定のこちら。

 

位置

これは目次を表示する位置を決める項目で、4つ選択肢があります。

  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後

下にすると記事の最後に見出しが来てしまうので、基本的にはデフォルトのままでいいと思います。

 

表示条件

これは見出しがいくつ以上ある時に目次を表示させるかという項目になります。

数は2〜10まで選択でき、もし見出しが3つしかないのに4つ以上の設定にしていたら目次は表示されません。

 

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

デフォルトでは page のみなので、固定ページしか目次は表示されません。

なので投稿ページに目次を表示させたい場合は、post にチェックを入れます。

また、投稿タイプスラッグがnewsというカスタム投稿があった場合は項目にnewsと表示されます。

他にも入っているプラグインによって表示される項目が増えていきます。

 

見出しテキスト

ここで変えられる項目は3つあります。

  • 目次上のタイトル(デフォルト:Contents)
  • テキストを表示するボタンのテキスト(デフォルト:show)
  • テキストを非表示にするボタンのテキスト(デフォルト:hide)

デフォルトの状態で目次を見るとこのようになります。

Table of Contents Plusの目次

この上にあるテキストを変更できます。

また、最初は目次を非表示にチェックを入れると、最初はこのように折り畳まれた状態になります。

Table of Contents Plusの目次を非表示

続けて基本設定の下の方を見ていきます。

Table of Contents Plusの設定画面

 

階層表示

デフォルトではチェックが入っており、このようになっています。

このチェックを外すとこうなります。

Table of Contents Plusの目次

デフォルトだと見出し2(h2タグ)や見出し3(h3タグ)は階層になりますが、チェックを外すとその階層がなくなります。

見出しは基本的に階層構造になるはずなので、このチェックは入ったままでいいと思います。

 

番号降り

これはここまで出てきた目次と見比べれば一目瞭然ですが、目次の番号を入れるかどうかの項目で、デフォルトではチェックが入っています。

ちなみにチェックを外すとこのようになります。

Table of Contents Plusの目次(番号なし)

 

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

デフォルトでは目次をクリックするとそのセクションにパッと飛びます。

これを滑らかにスクロールさせたい場合はチェックを入れます。

 

横幅

これはそのままですが、目次の横幅を設定する項目です。

自動にしておけば文字数に合わせていい感じの幅にしてくれるので、基本的にはデフォルトの自動のままでいいでしょう。

 

回り込み

一番最初の項目「位置」は縦方向の位置でしたが、こちらは横方向の位置、つまり左寄せ、中央、右寄せなどを設定する項目です。

 

文字サイズ

文字サイズの単位は "pt"  "%"  "em" の3つから選択出来ます。

デフォルトは95%です。

 

プレゼンテーション

これは目次のデザインを変える項目です。

カスタムにすると少し細かく設定できます。

Table of Contents Plusのプレゼンテーション設定

 

上級者向け設定

基本設定の下の方に上級者向けの設定があります。

Table of Contents Plusの上級者向け設定画面

 

この中で変更するかも知れない項目は見出しレベルだけかと思います。

あまりh5やh6を使うことはないと思いますが、もし使う記事があった場合はここまで目次に表示するとかなり階層が深くなります。

そういう時に「h4までしか表示させたくない」と思うかも知れないので、その時はここで設定を変えましょう。

 

設定が出来たら左下にある設定を更新をクリックするのを忘れないようにしましょう。

Table of Contents Plusの設定更新ボタン

 

目次が表示されない時は

目次が表示されない時には以下の確認をしてみましょう。

  • 見出しの数が表示条件より少なくないか
  • 表示させたいコンテンツタイプがチェックされていないか
  • 位置が下に設定されていないか

主な原因は最初の2つだと思うので、もし目次が表示されない場合は確認してみて下さい。

 

Table of Contents Plusを使えばWordPressのオリジナルテーマでも簡単に目次を表示させる事が出来ます。

実務で必要とされる事は以外に少ないですが、知っておくとサクッと実装出来るので覚えておきましょう。

 

WordPress案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-プラグイン, WordPress
-