【WordPress】目次から目的の見出しに正しく飛ばない場合の対処方法

2024年12月10日

SWELLやCocoonなどのWordPressテーマで自動的に作成される目次について、見出しをクリックしても思った場所へ飛ばない場合の対象方法をご紹介します。

目次の作成方法はテーマやプラグインによって異なるので、一概には言えないと思います。

私の場合は、SWELLテーマで、見出しブロックに意図しないアンカーが勝手にできていたのが原因でした。

この記事では、記事に含まれる文字を検索して一括置換できるプラグイン「Search Regex」を使った方法をご紹介します。

目的の見出し（H2、H3）に正しく飛ばない

私の場合、SWELLで、目的の見出し（H2、H3）に正しく飛ばないというトラブルが起きました。

目的の見出しをクリックすると、関係ない場所で止まるという現象です。

SWELLのフォーラムでも同様のトラブルが投稿されていました。

フォーラムでは、SWELLのスムーズスクロールをオフにしたら直ったという投稿がありましたが、私の場合は違っていたようでした。

調べてみると、トラブルが起きたページでは、見出しの一部に勝手にアンカーが設定されていました。

見出しブロックの「高度な設定」は、自分でアンカーを設定しない限り、空になっているはずですが、以下のようにindex_id1　といったアンカーが設定されていました。

トラブルが起きたページでは、複数箇所にindex_id1 がある場合がありました。

idの数字は、1だけではなく、様々でした。

アンカーがなぜ、勝手に設定されたのか、原因は分かりませんでした。

チャットGPTに質問してみると、以下のような回答がありましたが、手動ではアンカーを設定しておらず、目次生成プラグインも導入していないので、「Gutenbergエディターのバグ」「テーマによる自動アンカー生成」の可能性があると思いました。

手動で誤った値を入力した場合
投稿やページ編集時に「HTMLアンカー」フィールドに誤って「1」や「#」など不適切な値を入力してしまった可能性があります。
Gutenbergエディターのバグまたは
一部のプラグインやカスタムスクリプトが、id属性の生成に影響を与えている可能性があります。特に
プラグインの干渉
目次生成プラグインがインストールされている場合、そのプラグインが見出しに対して独自のアンカーIDを付与している可能性があります。目次生成プラグインがインストールされている場合、そのプラグインが見出しに対して独自のアンカーIDを付与している可能性があります。
テーマやプラグインによる自動アンカー生成
テーマや特定のプラグインが、見出しに自動的にアンカー（id）を付与している場合があります。このアンカー生成が意図せず働くと、重複や無効な値が設定されることがあります。

また、見出しを含めた複数ブロックのパターンをコピーして、使うことがあるので、その際にアンカー設定されることもあるかもしれないと思いました。

いずれにしても原因は特定できませんでした。