WordPress5.9にアップデートしたら見出しのidが重複してサーチコンソールでエラーが出るので対処したときのメモ[LION BLOG]の巻
![WordPress5.9にアップデートしたら見出しのidが重複してサーチコンソールでエラーが出るので対処したときのメモ[LION BLOG]の巻](https://vucavucalife.com/wp/wp-content/uploads/2022/02/wordpress_social-g34d05a21f_1280_eyecatch-890x500.png)
はじめに
WordPress5.9にアップデートしたらLION BLOG（本ブログで使用しているテーマ）での見出しにidが2個入ってしまって、GoogleサーチコンソールからAMPに関連したエラーが来るようになりました。
「HTML タグに同じ属性が複数含まれています。」
ですって。
もうちょっと詳しく見てみると、、、見出しのところにidが2個入っていることがわかりました。
うーんどういうこと？自分ではid入れ込んだ覚えはないのに。。。
という状態に対処してエラーを回避したときのメモです。
ええと、もしも、もしもですよ。参考になさる方がいらっしゃいましたら自己責任でお願いします。
それでは見てみましょう。
まずは原因を探ってみます
どうやら、
WordPressが5.9になってから、WordPress側で見出しのid（とそのHTMLアンカー）を作成してくれるようになっていて、さらにLION BLOGのほうでもidを付与しちゃうもんだから重複がおきてしまった
ということのようです。
まあWordPressのほうは5.9から見出しへのid付与がなされるようになったのだから一旦置いといて、
LION BLOGのほう、functions.phpを見てみると、、、
（functions.phpの確認方法は以前の投稿
AMP対応ページのアフィリエイトリンクのところが空白ができていやーんなので修正するの巻
をご参照ください。）
該当箇所は5143行目あたり
となっています。
ああ、LION BLOGのほうで見出しにidを自動で入れてくれていたのですね。記事の編集段階では入ってないから、全く意識していませんでした。
だから目次にある見出しをクリックしたら該当の見出しの部分に飛べてたんですね。
なるほど、そういえばそういう目次を作成する設定にしてましたわ。
そんなわけで、WordPress側で作られた見出しのidと、LION BLOG側で作られた見出しのidの両方が一つの見出しタグのところに付与されちゃってる、と。。。
んでもってこれ、WordPressのほうでidを付与しないようにする設定が無いし、記事の編集画面でidを削除することもできないし。。。
WordPressさんよ、なんで勝手に付加しちゃうかなあ。多くのユーザーには有用かもしれませんが、ワタシみたいに困る人もいるだろうに。。。ん？いないですか？そうですか。。。
とにかく、なんでじゃーo(｀ω´ )o てなってました。
ちなみに、Chromeのデベロッパーツールでエラーの出ているページの該当部分を確認してみると、idは1個しか確認できませんでした。デベロッパーツールでは2個目のidの記述は抜かして表示してくれるようです（本当にそうなのかは知りません）。でもサーチコンソールで引っかかる。ややこしいな。
↑ Chromeのデベロッパーツールではidが１個しか確認できないです。
対処した方法
うーん、WordPressのほうをいじるのはなんかあれなんで、LION BLOGのfunctions.phpの、見出しにidを書き込むところだけいじってやることにします。うん、そうします。
先ほどのLION BLOGのfunctions.phpでのidを付与している箇所の5145行目の記述なのですが、
これは、例えば記事中にある
<h2>はじめに</h2>
の
<h2
の部分を
<h2 id=outline__1
のように書き換えるようになっています。
なので、
<h2 id=”はじめに”>
と記事作成段階でWordPressが入れてしまった状態になっていると、
<h2 id=outline__1 id=”はじめに”>
に置き換わってしまう、と。
さっきのこの状態ですね。
なるほど。やっと理解ができました。
なので、ここの記述、下線部の
<h([1-6])
を、正規表現をもうちょっと追加した
<h([1-6])[^>]*
として、< >の中身全部（左側の<は含める、右側の>は含めない）を書き換えの対象にしてやることにします。
これにより、WordPressが入れ込んだid属性もろとも上書きしてやって、
<h2 id=outline__1>
となるような形にしてやりたいぞ、と。
というわけで、エックスサーバーにログインして、functions.phpの該当箇所を慎重に書き換えてやりました。
で、サーチコンソールでチェックしてみます。
エラーがなくなりました。デベロッパーツールで確認してもidが1個しか出てこないので分からないですが、きっとうまくいったのでしょう。
目次からの該当見出しへのジャンプも機能することが確認できました。
とりあえずめでたしめでたし。
おわりに
WordPress5.9にアップデートしたらLION BLOGで見出しのidが重複してGoogleサーチコンソールからAMPに関連したエラーをくらったときに行った対処法でした。
今のところエラーは出なくなって全然問題なく動いていますので、これでOKなのだと思います。
もし問題があったとしても顕在化するまで放置しとこう。。。うん、そうしよう。
なお、この方法だと見出しにclassなどを付与していたりすると、それも含めて<>内が全部書き換えられるので注意が必要です。
まだしばらくはLION BLOGを使っていけそうです。
環境
LION BLOG ver. 2.0.0
WordPress 5.9
サーバー；エックスサーバー
Chrome バージョン: 97.0.4692.99