【TOC+/Cocoon】目次が２つ表示されてしまうエラーを解決

目次を自動生成するプラグイン「TOC+(Table of Contents Plus)」とわいひらさんが制作の「Cocoon」を利用していた当サイトで、目次が2つ表示されるエラーが発生しました。エラーは現在、解決したため、注意喚起と備忘録の意味も込めて、記事にまとめます。

目次が2つ表示されるエラーの内容

とある投稿ページにて目次が2つ表示されてしまっていました。元々、1つ目の目次[hide]のみ表示されていましたが、設置した覚えのない2つ目の目次[閉じる]が追加されていました。

▼目次[hide]の下に…▼

▼2つ目の目次が…。▼

「何が起きた！？」とめちゃくちゃ焦りました。しかも、2つ目の目次はリストのCSSが反映されていて、酷い見た目です。こんな目次のサイトだと、中身に集中できませんよね…(笑)

一刻も早く原因と解決策を見つけなければと考えました。

エラー発生後に調査したこと

思えば、記事本文を読み、目次を確認したのは久しぶりだったため、様々な影響が考えられました。順に調査した内容を示します。

検証ツールで目次を調べる

まずは、目次がどのように作成されたかを調べようと該当記事で右クリックし、「要素の検証」を実施しました。

▼1つ目の目次の検証▼

pタグにクラス名「toc_title」が設定されていることから、TOC+で自動生成された目次だろうと考えました。というより、そもそも、1つ目の目次こそ、従来表示されていた目次であるため、「そりゃそうか」となりました。続いて、2つ目の目次も検証しました。

▼2つ目の目次の検証▼

検証をしてすぐに、「えっ！？同じクラス名になってる…」とますます混乱しました。この時、英語で目次はTOC(Table of contents)ということはすっかり忘れていました。「TOCということはTOC+で生成された目次なのか？？」と考え、続いてTOCの設定を調べます。

プラグイン「TOC+」の設定と無効化

まずは、TOC＋の設定画面を確認しました。しかし、自動挿入はpost(投稿ページ)のみになっている点以外、不審な点はありませんでした。この時点で、「固定ページの目次はどうなっているんだろう？？」と考え、固定ページを確認しました。

すると、固定ページには2つ目の目次のみが表示されている状態でした。「TOC+の影響ではないのか？？」とプラグインを無効化し、再度確認。案の定、TOC+を無効化しても、目次2つ目は表示されたままでした。

他に思い当たるのは…サイトステータスの更新でした。

テーマ・プラグインの更新

実は、当エラーが発生する前に、溜まりにたまった更新通知を解消するため、一気に更新をかけたのでした。というのも、数週間ログインしていなかったWordpressサイトを久々に更新しようとログインしたら、複数の更新通知が溜まっており、いつもならバックアップを取って1つひとつ丁寧に更新する所を、今回はめんどくさがってしまいました。(笑)

ここで思い出したのが、Cocoonテーマの更新でした。Cocoonはプラグインがほとんどいらない、超優秀なWordpressテーマです。しかし、「優秀すぎるがゆえに、目次の機能もあるのではないか？？」とCocoon設定を開いたところ、遂にたどり着くことができました。

目次が2つ表示されるエラーの解決法

つまるところ、エラーの原因はCocoon設定の「目次」→「目次の表示」にチェックが入っていたからです。

チェックを外すと、目次が消えました！！！ほっとひと息。

まとめ

エラーの内容は目次が2つ生成されてしまうことでした。エラーの原因はTOC+の自動生成とCocoon設定の目次自動生成機能が同時に機能していたから。解決策としてはCocoonの目次自動生成チェックボックスを外し、設定内容を保存しただけです。

Cocoonで出来ることはプラグインを止めてそちらに切り替える方がいいのかもしれませんね。また、むやみやたらに、更新通知を一気に更新するのはエラーへの対応が大変になるので、今後は時期を分けて更新をかけたいと思います。(いい教訓でした。)

では、ここまでお読み頂きありがとうございました！