サイト制作でよく使われるwordpress。
こちらでjQueryベースのツールが動かないというご相談がありました。
読み込み時に何かあるんだろうなと思いながら、zoomで画面共有をしながら見てみることに。

まずはプラグインで入れてみる

プラグインでも同じツールを導入できるようだったので、有効化してみたところ、実行部分で

Uncaught ReferenceError: jQuery is not defined.

のエラーが、、、
何かがおかしい

直接コードに書いてみる

なら関数リファレンスを用いて読み込むまで！
ということで、下記の関数に必要データを設定して、functions.phpに追記

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

※こちらの使い方が知りたい方はこちらのリファレンスでご確認ください。

さてどうなるかというと、

Uncaught ReferenceError: jQuery is not defined.

エラーが変わらないだと、、、
しかもin_footerをfalseにするとフッターに追記されず、、、

若干焦ったところで、webのコンソールを見てみると、追加したプラグインの後にjqueryが読み込まれているではありませんか。

読み込みを遅らせるプラグインの存在

自分で作っていないと、ついつい忘れがちですが、自分が使っていないプラグインによって想定外の動作をしていることがあるものです。
今回はページの表示を高速化するために、特定のファイルの読み込みを遅らせるプラグインが原因でした。
有名なところで言うとLazyLoaderです。
この設定で「jquery.min.js」が指定されていたため、jqueryの読み込みが遅くなっていました。
解決できてよかったー。

最後に

あれこれするのは問題解決のアプローチとして悪くないですが、冷静に状況を分析し、可能性を確認していくこともやはり大切ですね。

フロントサイドの実装やフリーランス化、転職など、お困りの方はお気軽にご相談ください😁