記事内に目次を自動生成するプラグインTable of Contents Plusの設定方法

長文の記事の場合、「目次」があれば記事内のどこに何が書かれているのか一目で把握しやすくなり、ユーザビリティも格段に上がりますよね。
記事が読みやすくなれば、ユーザーの平均滞在時間も延び、検索エンジンからの評価も高まります。

ということで、今回はプラグイン「Table of Contents Plus」を使って、WordPressの投稿記事に目次を設置する方法を解説します。

Table of Contents Plusは、記事の見出し(h2,h3,h4タグなど)から目次を自動生成してくれるプラグインで、生成する目次のデザインも非常に優れています。

サイトの雰囲気を壊すことなく、SEO効果も高めてくれる優秀プラグインですので、ぜひインストールしてみてください。
 
 
Table of Contents Plusを使えば、以下のような目次を設置することができます↓

スポンサーリンク

Table of Contents Plusのインストール

まず、Table of Contents Plusをインストールしましょう。

WordPressの管理画面から『プラグイン新規追加』という順にクリックして進み、
プラグイン検索ページで「Table of Contents Plus」と検索します。

するとTable of Contents Plusのプラグインがヒットしますので、
これを『今すぐインストール』し、有効化すればOKです。

プラグインのインストール方法を詳しく知りたい方は、こちらの記事も参考にしてみてください。

参考記事:プラグインのインストール方法
 
 

Table of Contents Plusの設定

プラグインをインストールすると、管理画面左メニューの『設定』の中に『目次+』という項目が加わっているので、これをクリックします。

『目次+』をクリック
 
 
Table of Contents Plusの設定画面が開きました。

Table of Contents Plusの設定画面

設定項目はたくさんありますが、一つ一つ解説していきますので、一緒に作業を進めていきましょう。
 
 

基本設定

まず、Table of Contents Plusの基本設定から行っていきます。

Table of Contents Plusの基本設定
 
 

  • 位置
     
    目次の表示場所を以下から選ぶことができます。

    ・最初の見出しの前
    ・最初の見出しの後
    ・トップ
    ・ボトム

  •  
     

  • 表示条件
     
    いくつ以上見出しがあるときに目次を表示させるか設定します。2~10までで選択可能です。

    今回は見出しが2つ以上あれば目次を表示させたかったので、「2」を選択しました。

  •  
     

  • 以下のコンテンツタイプを自動挿入
     
    目次を設置する記事の種類を選択します。

    ・post:通常投稿記事
    ・page:固定ページ
    ・wpcf7_contact_form:コンタクトフォーム
    ・post_lp:ランディングページ

  •  
     

  • 見出しテキスト
     
    目次のタイトルを設定します。
     
     
    ・目次の上にタイトルを表示
    チェックを入れると、目次のタイトルが表示されます。
    下の欄に、「目次」など表示させたい文字を入力しましょう。
     
     
    ・ユーザーによる目次の表示・非表示を切り替えを許可
    チェックを入れると、目次の開閉が可能になります。
     
     
    ・テキストを表示
    目次を開くボタンの表示文字を設定します。
     
     
    ・テキストを非表示
    目次を閉じるボタンの表示文字を設定します。
     
     
    ・最初は目次を非表示
    チェックを外すと、目次が開いた状態で表示されます。
  •  
     

  • 階層表示
     
    チェックを入れると、目次の階層が表示されます。
    目次が見やすくなりますので、チェックを入れておくことをオススメします。
  •  
     

  • 番号振り
     
    チェックを入れると、目次に番号が付けられます。
    こちらも目次が見やすくなりますので、チェックを入れておくことをオススメします。
  •  
     

  • スムーズ・スクロール効果を有効化
     
    チェックを入れると、目次をクリックしたときに滑らかにスクロールして移動します。
    チェックを外すと、目次まで一気に跳びます。

 
 

外観

次に、デザイン設定を行います。

外観
 
 

  • 横幅
     
    目次の横幅を選択します。
  •  
     

  • 回り込み
     
    目次の左右の設置位置を設定します。
  •  
     

  • 文字サイズ
     
    目次のフォントサイズを設定します。
  •  
     

  • プレゼンテーション
     
    目次のデザインを選択します。
    [カスタム]にチェックを入れれば、自分好みに目次をカスタマイズすることも可能です。

 
 

上級者向け

[上級者向け]の隣にある『表示』をクリックし、詳細設定画面を開きましょう。

『表示』をクリック

ここでは、さらに細かい設定をすることができますが、基本的にデフォルトのままでOKです。
 
 
全ての設定が完了したら、ページ下部の『更新』ボタンをクリックし、設定を反映させましょう。

『更新』ボタンをクリック
 
 

スポンサーリンク

目次を任意の場所に表示させる

ショートコードを使って、記事内の任意の場所に目次を表示することもできます。
以下のコードを、目次を表示させたい場所に入力しましょう。

 
 
また、以下のコードを記事中に入力すれば、目次を非表示にすることも可能です。

※no_tocの入力位置は、記事中のどこでもOKです。
 
 

まとめ

今回は、プラグイン「Table of Contents Plus」を使って、WordPressの投稿記事に目次を設置する方法を解説しました。

Table of Contents Plusを使えば、簡単に綺麗な目次を設置することができますし、カスタマイズの幅も非常に広いです。

サイトのデザイン性を損なうことなく、ユーザビリティ、SEOともに高めてくれる優れものですので、まだ目次を設置していない方は、ぜひインストールして活用してみてください。
 
 

スポンサーリンク