Table of Contents Plusのアンカーリンクが動作しない現象の解決

不具合の経緯

WordPressのプラグイン「Table of Contents Plus」で遭遇した、アンカーリンクの不具合に関する覚書です。

「Table of Contents Plus」で生成された目次のアンカーリンク（ページ内リンク）をクリックすると、記事の該当場所へジャンプすることができます。
先日、ふとした際に自分の記事内の目次をクリックしたところ、アンカーポイントである見出しにジャンプしないという現象に遭遇しました。

慌てて他のページを検証したところ、どうやら全てのページでアンカーリンクが動作しないようになっていました。
特に設定を変更したということはないのになぜだろうと、色々と検証したところ、本ブログで使用しているテーマ「Cocoon」の目次機能が原因であるということがわかりました。
この経験についての備忘録として、本記事を書きます。

直接的な原因

プラグイン「Table of Contents Plus」では、ジャンプ先の見出しに、次のような形式でアンカーポイントが設定されます。
（初期設定の場合）

<span id="i">前書き</span>

自動生成された目次の中のリンクは、このポイントを目標としてジャンプするようになっているわけです。

ところが、「Cocoon」の目次機能をオンにしていると、ジャンプ先の各見出しに、次のような形式でアンカーポイントが自動生成されます。

<span id="toc1">前書き</span>

これだと、「Table of Contents Plus」で生成されたリンク元とジャンプ先が一致していないので、目次をクリックしても該当場所に飛ばないわけです。
（当然、Cocoonで生成された目次の中をクリックすれば問題なく飛びます）

解決方法

「Cocoon」設定から「目次」タブを選択し、「目次を表示する」のボックスからチェックを外せば解決しました。
つまり、プラグイン「Table of Contents Plus」だけが機能している状態にすれば解決します。

もしくは、Cocoonの目次機能だけを生かして「Table of Contents Plus」を無効化するという方法もアリだと思います。
気に入った方を利用すると良いでしょう。
僕の場合は、後述する理由により「Table of Contents Plus」を使い続けることにしました。

発見が遅れた原因

今回の原因は、Cocoonの目次機能と「Table of Contents Plus」が重複してしまったことでした。
通常でしたら、この二つが重複していれば、本文中に異なるデザインの目次が２つ表示されることになるのですぐに気づきそうなものです。
なぜ気づかなかったのでしょうか。

Cocoonの目次機能が挿入される条件の一つに「本文中にh2見出しがあること」という条件があります。
僕は普段、記事中の見出しは「h3」「h4」「h5」しか使用しておらず、「h2」が本文中にある記事は僅かしかありませんでした。
そのため、Cocoonの目次機能がオンになっていても、ほとんどの記事には「Table of Contents Plus」の目次しか表示されていない状態で、見た目上は異常がない状態だったのです。

なぜ「h3」から使っているのかと言われると、長い間の習慣としか言えません。
理由を思い起こしてみると、本文の構成を後から直す際に、見出しの階層に一つ余裕があることで修正しやすくなるからだったと思います。

そういった特殊な理由もあり、今回発見が遅れてしまいました。
通常でしたら、「あれ？目次が２つあるぞ」とおかしなことに気付き、すぐに発覚する問題だったのだろうと思います。
気づくまでの間、ページを訪問してくれた人にはご不便をおかけしていたと思います。
この場を借りて、深くお詫び申し上げます。

余談：Cocoonの目次機能でなく「Table of Contents Plus」を使う理由

今回、Cocoonの目次機能をちゃんと知ることができました。
その上でどちらの目次が良いか改めて考えると、Cocoonの目次の方がデザインや機能は好みです。
そのため、今回のことをきっかけに「Table of Contents Plus」から乗り換えようかなと思いました。

しかし乗り換えようとすると、一つ問題がありました。
このまとめページのように、本文中の見出しそのものにページリンクを張っている場合、Cocoonの目次機能に乗り換えると、リンクが無効化されてしまうのです。

本ブログ内で、このようなリンクの張り方をしているのは、一部のまとめページだけです。
それらのページについて、個別に修正すれば良いのでしょうが、少し面倒だなと思ってしまいました。

基本的にプラグインは、使わなくて済むのならそれに越したことはありません。
こういった使い方をしていない人であれば、「Table of Contents Plus」からCocoonの目次機能に乗り換えた方がスマートだと思います。