2019/05/1475 Shares

WordPressに目次を自動表示するプラグイン「Table of Contents Plus」の設定方法と使い方

しおり

ブログに目次を表示させる場合、各見出しに固有の id をつけてページ内リンク(ジャンプ)を設定して・・・ と面倒な作業が必要です。

でも、WordPress なら「Table of Contents Plus」というプラグインを使えば、最初にちょっと設定しておくだけで目次を自動表示させることができます。

目次をつけることで読者が記事の内容を把握しやすくなったり、SEO 効果が期待できるかもしれませんので、ぜひ導入してみてください。

具体的な設定方法と使い方を解説していきます。

Table of Contents Plusインストールと設定方法

それでは、さっそくプラグイン「Table of Contents Plus」をインストールしましょう。

プラグイン新規追加画面から「Table of Contents Plus」で検索、または WordPress 公式ディレクトリよりダウンロードしてインストールしてください。

Table of Contents Plus インストール

管理画面サイドバーの「設定」に「TOC+」という項目が追加されるので、ここから初期設定します。

Table of Contents Plus メニュー

基本設定

ここからは、基本設定部分の解説です。

どのように設定すればよいかわからないときは、キャプチャ画像と同じようにしてみてください。設定をこまめに変えても問題ないので、どこをいじるとどうなるのか確認しながら作業を行っても OK です。

Table of Contents Plus 基本設定

位置 自動表示するとき目次の表示位置をどこにするか
表示条件 見出しの数が何個以上なら目次を表示するか
以下のコンテンツタイプを自動挿入 見出しを表示するページの種類
見出しテキスト 目次のタイトル設定(初期値:Contents)
表示・非表示のコメント設定
「最初は目次を非表示」のチェックを外しておくと自動表示
階層表示 見出しレベルに応じて階層化させるか
番号振り 見出しレベルに応じて番号をつけるか
スムーズ・スクロール効果を有効化 見出しまでのジャンプに動きをつけるかどうか
横幅 目次全体の横幅指定
回り込み 目次の横に本文を回り込ませるか
文字サイズ 目次全体の文字の大きさ
プレゼンテーション 目次のデザイン

オリジナルデザインにする場合や目次全体を中央寄せにする場合は、CSS の指定が必要です。

最初に仮設定だけしておいて、あとから細かく調整するのがよいでしょう。

 Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出!

上級者向け設定

設定画面下部の「上級者向け」横にある「show」をクリックすると、詳細設定画面が表示されます。

その部分の設定を見ていきましょう。

Table of Contents Plus 上級者向け設定

小文字 目次のリンクを強制的に小文字にするか
※見出しが半角英字の場合
ハイフン 目次のリンクをハイフンにするか
※見出しが半角英字の場合
ホームページを含める ホームページで目次を表示させるか
※固定ページをトップページに表示している場合など
CSS ファイルを除外 プラグインの CSS を適用するか
※大幅にカスタマイズする場合はチェックを入れる
テーマの見出し記号を保持 基本設定で「番号振り」にチェックを入れていないとき、文頭のマークを表示するか
見出しレベル 見出し h1 ~ h6 のうち、どれを表示するか
除外する見出し 特定の文字列が含まれているとき、目次に表示させないようにする
スムーズ・スクロール上部余白 ヘッダーが固定されているとき、そのぶんの余白を指定できる
パス限定 特定のページでのみ表示させる
※ショートコードで対応可
アンカーのデフォルト接頭辞 英数字以外の見出しで接頭辞をどうするか

デフォルト設定の場合、目次からのリンクはこのような形になります。

「小文字」や「ハイフン」設定は英語が含まれているときのものなので、とくに気にしなくてよいでしょう。

「デフォルト接頭辞」は日本語見出しで適用されますが、こちらも初期設定のままでとくに問題ありません。

最初は「見出しレベル」のみ設定しておけばよいと思います。

設定画面以外のオプション

「Table of Contents Plus」は、ショートコードやウィジェットでの表示に対応しています。

任意の位置に目次を表示させる

設定画面では表示位置が 4 つしか指定できません。

任意の位置に目次を表示させる場合は、ショートコード [toc] を表示させたい場所に入れてください。

自動表示が無効になっている設定でも、ショートコードが入っている記事では目次が表示されます。

特定のページから目次を外す

管理画面からパスを指定して特定のページの目次を外すこともできますが、ショートコード [no_toc] を本文内に入れておけば、そのページでは目次が表示されなくなります。

ショートコードの位置は、本文内であればどこでも OK です。

サイドバーに表示させる

サイドバーにウィジェットエリアがあるテーマなら、専用ウィジェットを配置するとサイドバーに目次が表示されます。

Table of Contents Plus ウィジェット

「目次をサイドバーのみに表示」にチェックすると、本文内の目次が消えてサイドバーのみの表示となります。

プラグイン「Q2W3 Fixed Widget for WordPress」を併用すると、目次を追尾させることも可能です(画像の「Fixed Widget」にチェックを入れる)。

SEO効果を狙うには

見出し(≒目次)をきちんと使うことで、読者が記事を読みやすくなるほか、検索評価にも良い影響があります。

検索結果でのクリック率も多少向上するかもしれません。

見出しに意味のない言葉を使うとマイナス要因

<h2> に「それから」とか <h3> に「つまり」など、見出しタグをただの区切りとして使っていないでしょうか。

もしそのような状態で見出しを表示させても、読者は記事に何が書かれているのかわからないでしょう。

記事タイトル・リード文・目次 の 3 つで「この記事には何が書かれており、読む価値があるか」を判断してもらうのが理想的です。適当に考えるのではなく、見出しは各章のタイトルとして考えるとよいですね。

見出しにもキーワードを入れる-ブログ初心者が最低限覚えておくべきブログの書き方10ヶ条

検索結果に見出しが表示されることがある

「Table of Contents Plus」で目次を表示したとき、本文内の各見出しに固有の id をつけた <span> が挿入されます。

たとえば、WEBサイト全体を丸ごとキャプチャできるブラウザアドオン4選 という記事では、目次はこのように表示されています。

目次の表示例

見出しの HTML と目次からのリンクは以下のような形です。

必ずではありませんが、この「見出しへのリンク」が検索結果に直接表示される場合があります。

検索結果に各見出しへのリンクが表示されている例

検索結果に各見出しへのリンクが表示されている例

ユーザーが本当に必要としている情報にすぐアクセスできるよう配慮されているわけですね。

Search Console 「検索結果のパフォーマンス」で「#i-1」のような URL が表示されていたら、見出しへのリンクを指しています。

Search Consoleで見出しへのリンクがクリックされている例

ここから見出しを改善したほうがよいかヒントが見つかるかもしれません。

まとめ

以上、目次を簡単に自動表示できる WordPress プラグイン「Table of Contents Plus」のご紹介でした。

どのような内容でも絶対に目次が必要、というわけではありません。また、見出しがやたらと多い記事ではそのぶん目次も長くなってしまいますから、自分のブログに合わせて調整してください。

オリジナリティを出す場合は、CSS でデザインしましょう!

 Table of Contents Plusデザインカスタマイズ方法

それでは、また。