h2など見出しタグへのページ内リンクが動かない【WordPressテーマLuxeritas】
ページ内リンクはid属性でアンカーリンクポイントの目印、いわゆるアンカーをつけ、aタグのhref属性に #id 形式で先ほどの目印と同じidを入れることで成立します。
が、WordPressテーマ Luxeritasは見出しタグに id属性でアンカーを作ってもページ内リンクとして動作しないことを発見。
知らない間にid属性がHTML5でページ内リンク非推奨になったかと思って焦りましたが、原因は他にありました。
原因はテーマによるid属性上書き
どうやらLuxeritas、自動的に見出しのidを目次用のidで上書きしてしまう模様。なのでh2やh3など見出しタグにid属性を入れておいても上書きで消されてしまうんです。
それで見出しタグにアンカー用のid属性を書いても実際に生成される記事には存在しないことが原因でした。
対処方補うとしては、目次用に自動生成されたid属性をアンカーリンクに指定してあげればオッケーです。
もしくは、適当に空の要素を作るか前後にある要素にページ内リンク用のidつけることで代用可能です。
もしかしたらほかのテーマでも似たような現象が起こっているかもしれませんね。
name属性でアンカーつけたらどうなの？
idがダメならnameで！と思い試してみましたが、管理人の環境ではうまく動きませんでした。
name属性自体がHTML5では非推奨属性で、ページ内リンク用のアンカーにはid属性が推奨されています。それでブラウザの方が対応してないっぽいですね。（試したのはFirefoxとスマホ版chrome）
更にいえば、せっかくLuxeritasテーマで対応してくれているAMPでは見出しタグにnameを入れるとエラーが出ます。そこまで試してないので不明ですががname属性自体がもうダメなのかも。そもそもアンカーリンクとして動きもしないものを試す気にもならない。
テーマのアップデートで改善してるかも？
まず本記事の最初の方に目次が表示されているかご確認ください。AMPで読み込まれていると目次がないので、id属性は上書きされず、ページ内リンクも動くかと。
もし目次が表示されていたら私が仕込んだid属性は上書きされているはずです。
目次がある状態で、このリンクをクリック or タップしてみてください。
このあとのまとめ見出しタグ（h2）にアンカーリンク用のIDつけてありますけど、動きませんよね？
もし動いたらLuxeritasテーマの新しいバージョンで対応していただいたということです。テーマ作者のるなさんに感謝しつつ、Luxeritasテーマを最新バージョンに更新しましょう。
Luxeritas 見出しアンカーリンクが動かない原因 まとめ
- WordPressテーマ Luxeritasではh2やh3など見出しタグのidが上書きされるため、見出しへのページ内リンクが正常に動かない。
- 対処方法としては
一応作者さんに改善要望出そうかな……でもこの程度のこと、タダで使わせてもらってるのに申し訳ないな、という気持ちが。しかもつい数日前に新しいバージョン出してくれたばかりだし。
「 ちっ、金も払ってねーくせに生意気だなオイ 」とか思われても怖い。ビビりなんです私。いや一応払う気はあるんですけど、最近Paypal口座へのお金が溜まらない。
しかし見出しタグにアンカー使っている別ブログをLuxeritasテーマに切り替える予定なので、一応要望を出すだけ出しておこうと思います。