ページ内スクロールアンカーリンクにデータ属性を使う

作成日:

WordPressで目次を作るなら、Table of Contents Plusが定番のようです。

favicon
Table of Contents Plus https://ja.wordpress.org/plugins/table-of-contents-plus/

目次を自動で生成する、強力でユーザーフレンドリーなプラグインです。 全てのページとカテゴリーリストを表示するサイトマップも出力することができます。

しかし、ここ3年間更新がされておらず、少し不安でもあります。
シンプルなプラグインで完成しているなら更新不要なのかもしれませんが。

そこで、簡易的な目次機能をあらかじめテーマに組み込もうと思います。

しかし、ここで非常にシンプルな問題にぶつかります。

アンカーリンクって、

idが重複しちゃダメ

どういうことかと言うと、

だと、リンク先で指定したidまでリンクするのですが、

のように、idに2つの値を入力していると無効になります。意外と初めて知りました。

その他、アンカーリンクを設定する方法として、name属性を追加する、というのもありますが、これは見出しにはルール上追加することが出来ません。

ちなみに、先程のTable of Contents Plusでは、見出しに対して中の文字列を新たにspanで囲ってidを追加しているようです。

HTML
<!--<h2>見出し</h2>-->
<h2><span id="i-1">見出し</span></h2>

しかし、これだと見出しのデザインに元々spanを使用しているとおかしくなりそうです(未検証)。

つ・ま・り

自動で本文中から見出しを取得して、目次を作成するためには、見出しにidが入っていてはならない。

ということになります。

しかしながら、長く運用しているうちに、見出しにidを指定したい、しなければならないことも起こり得ます。
目次というのはあくまで補足的に付加するものであって、idを割り当てる優先順位は低いです。
そうなると、idnameを使わないでアンカーリンクを実装しなければなりません。

では、
どうしようか?

じっくり考えてみると、結局アンカーリンクはjQueryを使って移動時にアニメーションを付けてスムーズにスクロールするように設定する予定です。

であるならば、ターゲットは別にidで無くても、jQueryで取得出来る属性であれば何でも良いことになります。

ですので、ここでは 独自のデータ属性値 を使ってみようと。

ターゲット要素(ここではh2)にdata-id="#target"と記述して、jQueryの方でhref#targetを指定したaリンクをクリックしたらその位置までアニメーションスクロールするように設定しています。

これでもし見出しにidが指定されていても、邪魔することなく目次を追加出来るようになりました。

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。