GarretCafe

- Gadget Camera Camp Leather -

こんなご時世こそ、自分の考えを書いてみよう

Easy Table of Contentsのスムーススクロールがうまく動作しなかった件

   

Wordpress 265132 1280

ブログのデザインを変更した際に、可読性を向上させるため、目次を表示させる様にしました。その際にEasy Table of Contentsというプラグインを使用して、目次を実装したのですが、目次自体は表示されるものの、動作に若干の不良がありましたので、修正をしました。

問題点

今回のトラブル事象です。

今回起きた現象

Easy Table of Contentsのスムーススクロールがうまく動作しなかった。

具体的には、目次の中のリンクを踏んだ時に、該当の見出しまでジャンプをするのですが、スムーススクロールの設定にチェックを入れても、スムースに動作せず、瞬時にジャンプするという現象。

スクリーンショット 2021 04 23 13 14 09

また、飛ぶ見出しの位置を、上端から一定のクリアランスを設定できる様になっているのですが、それが反映されず、上端に若干見出しが被った状態で表示されるというものです。

基本的には、そこらへんの制御ををするスクリプトがまとめて動作していない様な印象でした。

スムーススクロールが動作しないのは、まぁ許容しても良いけど、上がかぶるのは、ダサいので勘弁してほしい。

解決方法

解決方法です。

原因調査

Chromeの解析ツールを使ってみてみると、下記の様なエラーが出ていました。

「ReferenceError: Can't find variable: jQuery easy table contents」

解釈するに、スムーススクロールのjQueryがうまく呼べていないのが、原因のようです。
Easy Table of ContentsのjQueryと、WordPressのテーマ(今回はStinger)が、バッティングしてエラーを起こしているみたい。

対策

Stingerで呼んでいる、jQueryの場所がおかしい?ので、自分でjQueryを読み込む場所を指定したら直った。jQueryのプログラムが走る前に、読み込んでおかないとうまく動作しないみたい。
Stingerでは、なんかまとめて後ろで呼んでいるっぽい?ので、そこを解消すれば良いはず。

header.phpの中に、下記のコードを、「<?php wp_head(); ?>」より前に記載。CDNではなく、自分でアップロードして、そこへのリンクでも可です。
僕は、Googleのver3のCDNを呼ぶことにしました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><script>

Stingerとか、他のテーマでjQueryを呼んでいる場合は、バージョンによっては、functions.phpにjQueryの記載があるので、そこ部分をコメントアウトする必要があるっぽい。
僕の場合は、みたけど記載なかったので、今回は対応不要。

で、無事動作する様になりました。PHPとかjQueryは苦手意識がすごいので、解決までに時間がかかるかと思いましたが、なんか思ったよりスッキリ終わったので、よかったです。

参考文献

解決に直結した記事

Stingerに関する記事

理解の参考にした記事