【解決】wordpressでjQueryがうまく動かないのはテーマ側で自動的にdeferを入れてたのが原因だった

wordpressにログインしてない環境でうまくjavascriptが実行されない。

そんな時はテーマやプラグインのjavascriptの遅延処理が関係してるかも。

最近は、プラグイン使わなくてもテーマ自体が優秀でページ速度を上げるために、javascriptの読み込みの`<script>`タグにご丁寧にdeferを入れてくれてる。

そして、それはログインしてると、その遅延処理がされず、気づかないという。。

chromeのシークレットモードでHTMLのソースを見てやっと理解できた。

今回は原因わかるのに時間が少しかかって辛かったわ。。

実際のソースコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script type="text/javascript">
document.addEventListener( "DOMContentLoaded", function(){ (function($){ ... })(jQuery);
});

jQueryを使ったコードで、jQueryの読み込み部分にdeferがついちゃってたのが、うまくいかない原因だった。

deferの解除が見つけられなかったので、jQueryが読み込まれた後実行されるようにDOMContentLoadedでjQueryを処理するようにした。

大概、これで行けるはず。

あと、キャッシュプラグインにも最近は遅延処理やファイル結合設定があったりしてややこしい。

サイト速度の改善のため、うまいことしないといけないんだけどね。。

wordpressはjQuery使ってんじゃねーの問題

wordpressは前までjQuery使ってたのに、最近のテーマなんかはご丁寧にjQueryを使わないvanillaJS対応をしてくれちゃったりしてる。

とりまwordpressはログインしてない状態の確認は必須

自分が作ってないサイトのメンテナンス更新なんかで気をつけよう。

うまくいかない時はHTMLのソースコードをチェックしよう。
今回みたいに出力されるHTMLが変わってる可能性があって、挙動がおかしかったりするので。

ちなみに、個人的にvanillaJSもかけるけど、コードの量が多くなるのが面倒なので、jQueryはまだお世話になってます。