WordPressでjQueryを使おうとした際に、エラーが出てしまい使えず、試行錯誤した末にたどり着いた対処法です。
原因
WordPressは基本的に、wp_footer();の中にjQueryのCDNが含まれているので、
wp_footer();を実行した時点でjQueryは使えるはずなのです。
しかし、「$ is not defined」というエラーが発生する場合は、以下の原因が考えられるそうです。
-
jQueryを読み込めていないうちにコードが先に実行されている
funcions.phpを開き、wp_enqueue_scriptでin_footerを指定しているかを確認する。
in_footerがtrueでないと、headタグの中にファイルが読み込まれてしまう。
参考:関数リファレンス/wp enqueue script | WordPress Codex -
WordPressがjQueryをブロック
WordPressは、プラグインがjQueryを使用することがあるため、衝突を防ぐ仕様になっている(noConflict()を内包している)。
それを回避するためにはカプセル化が必要。
対処法
-
まず、wp_deregister_scriptを使って、jQueryのスクリプトを解除し、
次に、wp_enqueue_scriptで、jQueryを読み込みます。
function add_files() { wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1'); //バージョンは随時変更 } add_action('wp_enqueue_scripts', 'add_files');
-
jQueryのコードを書く(書き方が通常と異なるので注意)
$(function(){//処理})ではなく、以下のように$をjQueryに変え、さらにfunction()の括弧内に$を入れます。
通常:$(function(){}
変更:jQuery(function($){}
jQuery(function($){ //処理 });
この書き方でうまくいかない場合は、他にも書き方があるみたいなので、
「jquery wordpress カプセル化」でググってみてください〜。
それでは!