WordPress

WordPressの目次を自動で生成してくれるプラグインの使い方

wordpress 目次 プラグイン

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、目次を自動生成してくれるプラグイン「Table of Contents Plus」の使い方をまとめました。

 

  • ブログの目次ってどうやって作ってるんだろう?
  • 目次を自動で作成する方法ってないのかなぁ

 

こういった方に向けて書いています。

WordPressで目次を作成するプラグイン

wordpress 目次 プラグイン

目次を自動で作成してくれるプラグインは、「Table of Contents Plus」です。

ソースコードでも目次を作成することは可能ですが、慣れていない方や、変更を加えることが多い人などはすごく手間がかかります。

 

リライトするときなども手間が増えるので、時短のためにプラグインを使いましょう。

 

訪問者向けのHTMLサイトマップも、簡単に自動生成することができます。

Table of Contents Plusをインストール

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

 

インストール場所は、「プラグイン」➡︎「新規追加」を押しましょう。

 

キーワードに、「Table of Contents Plus」と入力すれば出てきます。

wordpress 目次 プラグイン

インストールしたら必ず有効化しておきましょう。

wordpress 目次 プラグイン

パソコン内にプラグインをダウンロードしたい場合は、⬇︎下記記事にまとめてあります。

 

\Table of Contents Plusをインストール/

 

Table of Contents Plusの目次設定

wordpress 目次 プラグイン

Table of Contents Plus」の目次設定は、3箇所設定しておきましょう。

 

\Table of Contents Plusの設定すべき項目/
  1. 表示条件
  2. 以下のコンテンツタイプを自動挿入
  3. 目次のデザイン

 

目次の設定をしておくことで、全ての記事に設定が適応されます。

表示条件

表示条件は、目次を生成する条件です。

wordpress 目次 プラグイン

見出しをがいくつあれば、目次の生成をするか指定します。

例えば、3に設定していると、見出しが3つ作成された時点で自動で目次が生成されます。

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

コンテンツタイプは、「記事」や「固定ページ」のことです。

wordpress 目次 プラグイン

訪問者に見えるのは、以下の2つです。

 

  • post ➡︎ 記事
  • page ➡︎ 固定ページ

 

全て表示させてくない場合は、一部だけ表示することもできます。

特定のページにだけ目次の表示非表示の設定

wordpress 目次 プラグイン

一部の記事だけ目次表示、非表示にしたい方は、下記コードを記事内に追加すると変更できます。

 

  • [toc] ⬅︎ 目次を表示させる
  • [no_toc] ⬅︎ 目次を非表示にする

 

固定ページなど、一部目次を表示させたくない場合に使うことをおすすめします。

目次のデザイン

wordpress 目次 プラグイン

目次のデザインは、以下の3つのON or OFFを設定できます。

 

\目次デザイン設定箇所/
  • 見出しテキスト ⬅︎ 見出しのタイトル表示
  • 階層表示 ⬅︎ H2、H3の見出しの表示方法を分ける。
  • 番号振り ⬅︎ 目次の中の見出しに番号を振る。

 

このサイトの目次は、全てにチェックを入れています。

サイトマップの設定

wordpress 目次 プラグイン

サイトマップは作成しておくことで、訪問者がサイト内で迷わないようになります。

訪問者のために作成しておきましょう。

 

サイトマップ作成手順
  1. [sitemap]をコピー
  2. 固定ページを新規作成
  3. [sitemap]を貼り付ける。

 

サイトマップの作成は、これだけです。

固定ページのラベル、カテゴリーのラベルは、タイトルです。

任意の文字を入れましょう。

この方法だとカテゴリーが分けられているだけなので、別の方法でサイトマップを作成することをおすすめします。

サイドバーに追尾型の目次設定

wordpress 目次 プラグイン

追尾型の目次をサイドバーに設定することで、ページをスクロールしても常に目次が表示された状態になります。

 

こうすることでページの訪問者が、いつでも記事の好きな箇所に移動できるので使いやすさの向上につながります。

 

\サイドバーに目次の追加場所/

 外観➡︎ウィジェット➡︎TOC+➡︎サイドバー追尾➡︎ウィジェット追加

 

wordpress 目次 プラグイン

これで追尾型の目次が作成できます。

次に目次の設定をしましょう。

 

おすすめ設定
  1. タイトル➡︎任意
  2. 目次サイドバーのみに表示にチェックを入れると記事中に目次が表示されなくなります。
  3. postにチェック(固定ページにも表示させたい場合はpageにもチェックを入れる)

 

変更できたらあとは保存するだけです。

追尾目次デザインの変更

追尾の目次は、そのままだとH2、H3のデザインに違いがないままです。

H2、H3を区別するにはカスタマイズで追加CSSを入れてください。

/*サイドバー追尾目次*/
.toc_widget_list li{
font-size: 14px;
font-weight: bold;
padding: 4px 0;
}
.toc_widget_list li ul a::before{
content: "・";
}
.toc_widget ul li ul {
border: none;
padding: 0px 0px 0px 10px;
}
.toc_widget ul {
max-height: 460px;
overflow-y: auto;
}
.toc_widget_list li ul{
margin-left: 1.0em;
text-indent: -1.0em;
}
.toc_widget_list li ul li a {
font-size: 13px;
font-weight: normal;
}

上記コードを追加CSSにコピー&ペーストで貼り付けて公開すればOKです。

 

\追加CSSの場所/

   外観   ➡︎   カスタマイズ   ➡︎   追加CSS

 

まとめ

Table of Contents Plus」は、目次やサイトマップを簡単に作成できるプラグインです。

サイトの使い勝手がよくなるので、ぜひ活用してみてください!

Cocoon(コクーン)」などテーマによっては、元から目次があるものもあります。

デザインが気に入らなければ、取り入れてみてもいいと思います。

最後まで見ていただき、ありがとうございました。
 

ABOUT ME
りゅうのすけ
高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
PS.

記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
 

\1円からのドネーション/

仕事依頼

 

\WordPress開設依頼/

公式LINE

 

\公式LINEもやってます/
公式LINE無料プレゼント

 

  • ワンクリックで登録可能
  • 個人情報はこちらからわからないようになっているのでご安心を

 

こんな人におすすめ
  • ブログを進めていく上でわからないことがある
  • 設定など誰か相談できる人が欲しい
  • 記事ネタに困った時に情報収集したい
  • ブロガー仲間が欲しい

 
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
 

登録者特典

 

公式LINE@無料プレゼント
  1. 限定公開記事の共通パスワード配布
    • ブログ内の限定公開記事のパスワードを配布してます。
  2. サイト作成依頼クーポンコード
    • サイト作成依頼時に使えるクーポンコードを配布します。
  3. ブログスターターキット
    • ブログに必要な便利ツール、イラストなど随時更新
  4. 完全個別無料相談
    • ブログについて、1日1人限定で無料相談を受けてます。
      (営業を仕掛けるのはやめてください。)

 

\友達追加しますと、下記のメニューが表示されます。/
公式LINEリッチメニュー

 
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!