WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【WordPress】目次を自動生成してくれる「Table of Contents Plus」は必ず導入しよう!

この記事は約3分15秒で読めます

WordPress Table of Contents Plus
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

ゆとりっちでも愛用しているWordPressプラグイン「Table of Contents Plus(TOC+)」。
記事の目次を表示してくれる便利なプラグインです。

記事の中の見出しタグを探して、そこから目次を作ってくれます。
もちろん、見出しタグは<h1><h2><h3><h4>と順序良く使いましょう。

見出しタグを正しく記述することで自然とSEO対策になります。

実際にはのように表示されます。

Table of Contents Plusプラグインのインストール方法

WordPressの管理画面から検索してインストールします。もしくは、WordPress.org からダウンロードして、そのままアップロードしてインストールします。

WordPress管理画面 プラグイン 新規追加 Table of Contents Plus」で検索

Table of Contents Plusの日本語化

©赫さん(@hayashikejinan)がTable of Contents Plusの日本語化ファイル(toc+-ja.mo)を配布されています。感謝!
下記の記事に日本語化ファイルの配布、導入手順など詳しく解説されていますのでご参考ください。

TOC+の設定

WordPressのダッシュボード管理画面を表示します。
左メニューの設定 TOC+

一般設定タブ

Position(表示位置)
目次をどこに表示するのかを次から選択できます。
  • Before first heading (default):最初の見出し要素の前
  • After first heading:最初の見出し要素の後
  • Top:記事の一番上
  • Bottom:記事の一番下
Show when(表示の振り分け)
目次を自動生成する見出しの数(以上)
Auto insert for the following content types(コンテンツの種類での自動挿入)
どの記事タイプに目次を生成するか(主に指定するのは次の2つ)
  • post:記事
  • page:固定ページ

カスタム投稿タイプはデフォルトではチェックが入っていないので目次を表示したい場合はチェックを入れる。

Heading text(目次の見出し文)
目次の名前、表示/非表示リンクの設定
Show hierarchy(階層を表示する)
見出しレベルに応じて階層化して表示するか
Number list items(リスト項目に番号を振る)
目次に番号を付与するかどうか
Enable smooth scroll effect(スムーズスクロール効果の有効化)
目次の項目クリック時に滑らかにスクロールさせるかどうか
Appearance:Width(横幅)
目次エリアの横幅
Appearance:Wrapping(ラッピング)
目次エリアの表示位置(左右詰め)
Appearance:Font size(フォントサイズ)
目次エリアの文字サイズ
Appearance:Presentation(背景色)
目次のデザインの指定

Appearance:Width(横幅) 目次の横幅を指定する

目次の横幅については「その他:ユーザー定義」を選択することで自由に設定できます。
横幅100%に指定してしまうとはみ出てしまったので横幅は「95%」を指定しています。

pxで固定値にしてしまうとスマートフォンで見たときなどにはみ出てしまう恐れがあります。

Appearance:Wrapping(ラッピング) 目次を中央に表示する

Wrapping(ラッピング)は「なし」「左寄せ」「右寄せ」の指定だけで中央表示する設定がありません。
style.cssに次のソースコードを追記すると目次が中央に表示されるようになります。

※Appearance の Wrapping(ラッピング)は「None (default)」にして下さい。

TOC+の実際の表示

最初の見出しの手前に表示する

WordPress Table of Contents Plus(TOC+)の実際の表示

Table of Contents Plus(TOC+)はデフォルトではこのように表示されます。
目次のデザインについては次の6パターンから選べます。

  • Grey (default)
  • Light blue
  • White
  • Black
  • Transparent
  • Custom

サイドバーに目次を表示する

WordPress Table of Contents Plus(TOC+)をサイドバーに表示する

Table of Contents Plus(TOC+)は記事の中ではなくサイドバーに表示することもできます。
導入方法も簡単です。

左メニューの外観 ウィジェット

WordPress Table of Contents Plus Widget

「TOC+」というウィジェットがあるので、サイドバーにドラッグアンドドロップで好きな位置に配置するだけです。

さいごに

Table of Contents(TOC+)を導入することでユーザビリティが向上して、SEO対策にも繋がります。
とりあえず導入しておいて損はないプラグインといえるでしょう。

以上、【WordPress】目次を自動生成してくれる「Table of Contents Plus」は必ず導入しよう!でした。

関連記事

  1. ワードプレス Browser Shots rel nofollow
  2. WordPress Crayon Syntax Highlighter
  3. 灰色のボケ
  4. 【WordPress】TwitterカードとFacebook OGPの設定方法
  5. WordPressコメント メールアドレス任意入力
  6. WordPress 下書き プレビュー 真っ白

コメントをお待ちしております

PR

カテゴリー