【WordPress】記事中にjQueryを使う時の「$ is not defined」回避策

2019年6月12日WordPress,WordPressカスタマイズ

jQueryを記事内に書いてみたら「$ is not defined」とのエラーが出ました

「$」だけという事はidやclass名が見つからないのではなく、そもそも「$」を認識していない

調べると、WordPressでjQueryを使う時はそのままだとエラーになるとの事

「$ is not defined」エラー回避策

エラー回避策は単純に「jQuery(function($) {})」の中に記述すれば「$」も認識していつも通りのJqery記述で動く様ですね

jQuery(function($) {
//Jqery処理
});

「jQuery(function($) {})」で括った方が元々良いでしょうし、簡単な解決で助かりました

それと「div」で括っておかないとWordPressの自動成型で崩れてしまいます

<div>
jQuery(function($) {
//Jqery処理
});
</div>

あとは空白行があるとこれまたWordPressの自動成型でpタグが生成されて、動かなくなってしまうので注意でした

WordPressの自動成型は3か月目でもなかなか慣れないですね

正規のjQueryを使うべきかどうか

WordPressは設定せずともJqery読み込んでるとは思ってましたがテーマの設定で「async defer」が付与できたので気にしていませんでした

これはWordPress用の独自的なjQueryなのですね、最近はjQuery使ってなかったので今まで気付かなかったです

なるほど、デフォルトで読み込んでいるWordPressのjQueryを読み込まない様にして正規のjQueryを読み込ませる事も可能、と

しかし、こうなっているのは正規のjQueryでは何か弊害があるからでしょうしWordPressのjQueryをそのまま利用した方が無難そうと判断

「async defer」の影響

記述するスクリプトによってはjQueryを非同期読み込みにしてるとエラーを回避できないかもしれません

Jqeryを多くの記事で使うのなら同期読み込みでも良いかもですが、たまにの記事の為だけに非同期じゃなくするのはちょっと嫌ですね

そう考えると、プラグインやテーマがエラー吐いてないのを（jQueryを使用していないのを）確認してデフォルトではjQueryを読み込まない設定に

jQueryが必要な記事やページだけ直前に同期で読み込んでも良いかも、というかそうしました

<div><script src="jQueryのURL"></script>
<script>
jQuery(function($) {
//Jqery処理
});
</script></div>

jQueryのURLはソースコードから検索すると早いです

2019年6月12日WordPress,WordPressカスタマイズ

Posted by Yousuke.U