【解決】WordPressでjQueryが動かない時の対処法

投稿日：2021年10月9日

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 カプセル化」でググってみてください〜。
それでは！