WordPress

【初心者向け】WordPressの目次を自動作成するプラグイン「Table of Contents Plus」のインストールと使い方

 

ブログ初心者
ブログ初心者
記事に目次を付けたいんだけどどうれば出来るんだろう・・・?

 

こんなお悩みを解決します。

 

本記事ではプラグインを使って簡単に目次を作る方法を紹介します
masa
masa

 

今回紹介するプラグインは「Table of Contents Plus」です。

 

WordPressプラグイン「Table of Contents Plus」による目次の見本

それでは最初に目次の完成イメージを見てみましょう。

 

下記は本記事の目次です。階層表示で数は自動的に採番されてます。一切コードをいじらず、これが自動で表示されるようになります。

 

WordPress記事に目次を載せるメリット

目次を載せるメリットは全部で3つあります。

ココがポイント

  1. 記事を全て読まなくても概要がわかる
  2. 読みたい見出しに飛ぶことが出来る
  3. SEOとしてGoogleのためにもなる

 

記事を全て読まなくても概要がわかる

目次は見出しのタイトルをまとめているため、見出しを読めばこの記事が何を伝えようとしているかがわかりやすくなります。

 

読みたい見出しに飛ぶことが出来る

目次の見出しで何について書いてるかがわかり、リンクとなっているためすぐに見たい箇所に飛ぶことが出来ます。スクロールしなくても飛ぶことが出来るため読み手にとって優しい記事になります。

 

SEOとしてGoogleのためにもなる

人間にとってわかりやすい記事はGoogleにとってもわかりやすい記事になります。したがって、検索結果が上位へシフトすることに繋がっていきます。

 

WordPressプラグイン「Table of Contents Plus」を使う理由

WordPress記事作成の生産性が向上する

プラグインを使用しない場合、自分でHTMLのタグを書く必要があります。プラグインだとコードを書く必要がないので記事の作成スピードが上がります。

 

私は当初、目次をコードで書いていましたがものすごく時間がかかるのと後で見出しを変更した場合に修正が大変なのでコードを書くのを辞めました
masa
masa

 

HTMLがわからなくても目次を作成できる

コードを書く必要がないのでHTMLがわからなくても目次を作成できてしまいます。これは初心者にとってかなりメリットです。

 

目次を書くことを意識しなくても自動で挿入されるので便利ですよ
masa
masa

 

WordPressプラグイン「Table of Contents Plus」のインストール手順

それではプラグイン「Table of Contents Plus」のインストール手順の説明です。

 

「Table of Contents Plus」プラグインの追加方法

まずはダッシュボードのプラグインより新規追加ボタンをクリック

 

右上のキーワード検索で「Table of Contents Plus」を入力し、検索します。

 

今すぐインストールをクリック

 

有効化をクリック

これでインストールは完了です

 

「Table of Contents Plus」プラグインの設定方法

ダッシュボードのプラグインより「Table of Contents Plus」の設定をクリック

設定のタブが3シートありますが、基本設定タブの内容だけ変更し、後はデフォルトのままでOKです

 

  • 基本設定
  • サイトマップ ※デフォルトのまま
  • ヘルプ ※デフォルトのまま

「Table of Contents Plus」基本設定タブの設定方法

■位置

目次を表示させる位置の設定

  • 最初の見出しの前(デフォルト)  ※タイトルの前
  • 最初の見出しの後         ※タイトルの後
  • 上                ※記事の1番上
  • 下                ※記事の1番下

 

■表示条件

目次の表示する条件

見出しの数が何個以上になれば自動的に目次を表示するかという数を設定

 

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

何の記事に目次を自動挿入させるかの設定

  • Post 記事
  • Page 固定ページ

この2つがあれば十分かと思います。

 

■見出しテキスト

  • 目次の上にタイトルを表示 ※タイトルが表示されます 例)目次
  • ユーザーによる目次の表示、非表示を切り替え許可 ※表示と非表示が切替可能になります。
  • テキストを表示  目次を表示させる時の文字 例)開く
  • テキストを非表示 目次を非表示させる時の文字 例)閉じる

 

■階層表示

自動的に目次を階層的に表示してくれます

 

■番号振り

自動的に目次に番号を振ってくれます

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

ジャンプではなくスクロールで移動してくれます

 

■横幅

目次の横幅の設定です。デフォルトの自動のままがオススメです

 

■回り込み

目次を左右どちらに配置するかの設定です。

 

■文字サイズ

目次の文字の大きさの設定です

 

■プレゼンテーション

目次のデザインの設定です

WordPressプラグイン「Table of Contents Plus」の使い方

記事に目次を表示させる

プラグインの設定を更新すると自動的に目次が挿入されます。

 

しかし、これだと目次を表示させたくない記事まで目次が表示されてしまうので次に明示的に目次を表示させない方法を紹介します。

 

記事に目次を表示させないコードの書き方

目次を表示させたくない記事の場合は以下のコードを書いておくと目次は表示されません。記事のどこでもOKです。とにかく記事のどこかに書いておけば非表示になります。

 

目次の表示位置を明示的に指定する方法

基本設定に従った位置が基本の目次の位置ですが、記事ごとに目次の位置を変えたい場合がある時は以下のソースを目次を表示させておきたい箇所に書いておくだけで目次が表示される位置が変わります。

 

WordPressプラグイン「Table of Contents Plus」のまとめ

WordPressの目次はプラグインを使って作成した方が良い

HTMLで自作してもいいですが、結構大変です。プラグインなら設定も一括で変更して全ての記事に反映されます。

 

自作していると記事の内容や見出しが変わった場合に目次も修正しなければいけないため、プラグインを利用した方が良いと思います。

 

次に読みたい

吹き出し画像イメージ
WordPressで吹き出し会話を簡単に作成する方法。Word Balloonプラグインがおすすめ

  ブログ初心者 吹き出し会話を簡単に作成できないかな・・・     こんなお悩みを解決します ブログにこのようなLINE風の会話イメージを書いている記事を見たことありま ...

続きを見る

  • この記事を書いた人
  • 最新記事

masa

このブログを運営しているmasaです。 社会人10年目のSEとして働いていますが、労働収入には限界を感じていて 脱サラし、自由に生きたいと思っています。 皆さんが興味の湧く記事を書き、疑問や課題に対しての解決案および対策を提供したいと思っています。

-WordPress

Copyright© masalife , 2025 All Rights Reserved Powered by AFFINGER5.