Wordpressの目次プラグインと言えば「Easy Table of Contents（略称ETOC）」か「Table of Contents Plus（略称TOC+）」の二択です。
どちらも記事中にある見出し（Hタグ）から記事上部に自動的に目次を出力するプラグインですが、どちらを使えば良いのか迷うことがあると思います。
そこでETOCとTOC+の違いについてまとめました。
現在はEasy Table of Contents（ETOC）が主流になってきています。
この記事の目次
Easy Table of ContentsとTable of Contents Plusの違い
一昔前なら目次プラグインは「Table of Contents Plus（TOC+）」一択だったのですが、最近は「Easy Table of Contents（ETOC）」というプラグインが有名です。
どちらも超人気のプラグイン！
目次は英語で「Table of Contents」ということもあってか両者のプラグイン名はよく似ており、ETOCとTOC+の違いや、どちらを使えば良いのか迷うことがあります。
そこでこの２つの目次プラグインを比較しました。
どちらのプラグインも人気ですが、新旧をつけるなら「Easy Table of Contents」の方が後発で新しいので、より高性能です。
プラグインの更新頻度もEasy Table of Contentsの方が高くなってきています。
後発のETOCが主流になりつつありますが、TOC+もまだまだ現役ですのでこの２つのプラグインの違いをまとめていきます。
プラグインの機能の比較
ETOCとTOC+の機能を比較した結果は以下の通りです。
同じ機能も多いため、特記すべき項目は赤字にしました。
| ～ETOCとTOC+の比較～ | ||
| 項目 | Easy Table of Contents | Table of Contents Plus |
| 有効化するページ設定 | 11種類から選ぶ | 設定なし |
| 自動挿入するページ | 11種類から選ぶ | ETOCと同じ |
| 目次の位置 | 4種類から選ぶ | ETOCと同じ |
| 表示条件 | Hタグ数1～10以上 | Hタグ数2～10以上 |
| 目次の非表示化 | 可能 | 可能 |
| 目次の見出し | 自由に設定可 | 自由に設定可 |
| 目次の折りたたみ | 可能 | 可能 |
| 折り畳み文字の変更 | 不可（アイコンボタン） | 自由に変更可 |
| 初期状態で非表示 | 可能 | 可能 |
| 階層（ツリー）表示 | 可能 | 可能 |
| 目次に番号を振る | 可能 | 可能 |
| スムーススクロール | 可能 | 可能 |
| 外観カスタマイズ | 詳細に変更できる | ある程度変更できる |
| アンカー設定やCSS設定 | 詳細に設定可 | 可能 |
| スムーススクロールの余白 | PC・モバイルで設定可 | 一括設定 |
| サイトマップ機能 | なし | あり |
| 現在の表示位置 | ハイライトできる | 設定できない |
| デフォルトの外観 | 左寄せ | 中央寄せ |
上記の比較表のとおり、機能面にそこまで大きな差はありません。
ただ両者のプラグインでは機能や見た目が少し異なります。大きく異なる点は以下。
- 目次の折りたたみはTOC+は任意の文字。ETOCはトグルボタン。
- サイトマップ機能はTOC+にしかない。
- 現在位置をハイライト表示する機能はETOCにしかない。
- カスタマイズや設定項目はETOCの方が柔軟で多彩。
サイトマップ機能は使い物にならないのでなくても良いです…
ということで見た目、開閉ボタン、ハイライト表示について書きます。
見た目と目次開閉ボタンの違い
下の画像は記事内の目次をTOC+とETOCで表示した時のものです。
TOC+（上）とETOC（下）の目次表示例
上側の目次がTable of Contents Plusで、下がEasy Table of Contentsです。
TOC+の方は開閉ボタンがテキストで、任意の文字に変更することができます。
一方、ETOCの方は開閉ボタンがアイコンのため、"閉じる"などのテキストボタンに変更することは出来ません。
どちらもプラグインのCSSによって見た目がデフォルトでも綺麗なものになっていますが、個人的には中央寄せのTOC+の方が綺麗なようにも思います。
もっともCSSを当て直せばデザインはどうにでもなりますが…
ETOCには現在位置のハイライト機能がある
続いてEasy Table of Contentsにしか存在しないハイライト機能についてです。
ハイライト機能はウィジェットで効果を発揮
どちらのプラグインにも目次を表示する専用のウィジェットが用意されており、これをサイドバーなどに使用することで目次を任意の箇所に表示することができます。
この機能が後発のETOCでは強化されており、現在位置（読んでいる位置）を計算して目次をハイライト表示することができます。
これはTOC+にはない機能でJavaScriptを使わないと実装できません。
メモ
Easy Table of Contentsではこのウィジェットを複数（スマホ、PC用など）使用すると目次が無限生成されるバグ？が発生することを確認しました。
TOC+とETOCのどちらを使えば良いのか？
これまで述べた通り「Easy Table of Contents」の方が後発で新しく、高性能です。
これから目次プラグインを導入しようとしている方は「Easy Table of Contents」の方を選んでおけば問題ないです。
ただ、テーマによっては今まで主流であった「Table of Contents Plus」の使用を前提としたものも数多くあります。この場合はTOC+の方が良いかもしれません。
TOC+のデザインがオシャレなものに変更されるテーマや、TOC+の機能を拡張できるようなテーマがこれにあたります。
このようなテーマを使っている場合はTOC+をそのまま使い続けても特に大きな問題はないため、無理をしてETOCに乗り換えてもメリットは少ないです。
当サイトはTOC+を使っていたのですが、どうしても目次のハイライト機能が使いたかったのでETOCに乗り換えました。CSSに精通している方なら、ETOCの目次デザインをTOC+風に改良することで、より使い勝手が良くなるはずです。
推奨は新しいETOCですが、乗り換え時のコストを考えて好きな方を使えばOKです。
TOC+からETOCに乗り換える時の注意点
最後に「Easy Table of Contents」の方が高性能で、更新頻度も高くなってきたため、TOC+から乗り換えようとしている方への注意点です。
目次の生成は記事中のHタグから自動で行っているため、問題は起こりません。
しかし、アンカーリンクのURLの生成方法がTOC+とETOCでは異なるため、ページ内リンクを埋め込んで使っている時は注意しましょう。
TOC+ではa href内に必要最低限のIDが入ります。（#iや見出し前半の一部）
対してETOCではHタグ内の文字全てがアンカーリンクのIDとなります。
例えば「これはH1見出しです。」という見出しへのURLは以下のように異なります。
（例）
TOC+：<a href="#H1">
ETOC：<a href="#%E3%81%93%E3%82%8C%E3%81～省略～">
TOC+からETOCに変更した際、既存のアンカーリンク（ページ内リンク）がリンク切れになることがあるので注意しましょう。対処するには既存のアンカーリンクをETOCが生成するURLに差し替えればOKです。
また、使用されるCSSのID名やクラス名も異なります。
自分でTOC+の見た目をカスタマイズしていた時のデザインは、ETOCには反映されないという点にも注意です。幸いTOC+とETOCではID名、CSS名の付け方が似ていますのでCSSを当て直しても良いですね。
Easy Table of Contentsの気になる仕様
最後に「Easy Table of Contents」を使っていて気になったバグ、というか仕様があったのでこちらの記事でもご紹介しておきます。
ETOCはコードの仕様上、トップページに目次が表示されてしまうことがあります。
この問題については長くなるので、詳しくは関連記事（↓）からご確認下さい。
-
- Easy Table of Contentsのバグ？サイドバーの目次がトップページ（ホーム）にも表示されてしまう問題。
続きを見る
トップページを固定ページ化しているなら問題なさそうですが、一応ETOCを導入した後はトップページを１,２,３ページ目…と複数確認しておいた方が良いです。
まとめ
以上、２大目次プラグイン「Easy Table of Contents」と「Table of Contents Plus」の違いについてでした。
個人的には新しく高性能なEasy Table of Contentsがお勧めですが、目次の表示や移動については差がないので、現時点では好きな方を使っていても問題はありません。
SEO的にもどちらが有利という事はないでしょう。
設定項目などがほぼ同じだったので同じ開発者なのかと思ったら、違うようです。
ということはTOC+の後継プラグインがETOCという事でもないのかな？
