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

2021/04/23

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

問題点

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

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

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

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

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

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

解決方法です。

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は苦手意識がすごいので、解決までに時間がかかるかと思いましたが、なんか思ったよりスッキリ終わったので、よかったです。

SNSのフォローもぜひよろしくお願いします！

ー著者：ひょさかー
ここまで読んでいただきありがとうございます。
是非、下記のSNSをフォローの上、最新記事の更新通知を見逃さないようにしていただけたら幸いです。
Twitter(@Nu0hH)←おすすめ
Instagram(@garretcafe)
YouTube(@GarretCafe)