【初心者向け】WordPressでjQueryが動かない原因と対策

ニャンコ

今まで動いてたJavaScriptがWordPressに移行したとたん動かなくなってしまった〜

WordPressでは、WordPress用のjQueryが読み込まれてるから、通常の記述では動かないよ

ワンコ

WordPressでjQueryが動かなくなる原因

WordPressでｊQueryが動かなくなる原因は、WordPressではｊQueryが「noConflict(コンフリクト)」モードで読み込まれているからです。

コンフリクトとは衝突という意味です。
複数のライブラリやプラグインで同じ名前やクラスを使用してしまっている状態などを表します。

jQueryで「$」マークは、関数を表しますが、jQuery以外のライブラリ、プラグインで「$」マークを使用していた場合に衝突（コンフクリト）を起こしてしまいます。

WordPressではそれを避けるために、noConflict(コンフリクト)」モードで読み込んでいます。

WordPressでjQueryが動かない場合の対処法

WordPress標準のjQueryを使用する場合

WordPress標準のjQueryを使用する場合の対処法を解説します。

WordPress標準のjQueryを読み込むには、下記のように「wp_enqueue_script」を「functions.php」に記載します。
以前は、「wp_head()」をヘッダーで読み込めばjQueryも自動で読み込んでくれてたような気がしましたが、気のせいでした（笑）

function add_files(){
  /* WordPressデフォルトのjQueryを読み込む */
  wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts','add_files');

さて、本題のWordPressでjQueryが動かない場合の対処法ですが、前章で記載したようにWordPressのjQueryは衝突をさけるために「$」を使用できません。

その代わりに「jQuery」を使用します。

修正前

$(function(){
	$('.button').on('click', function () {
		alert("jQuryテスト");
	});
});

修正後

jQuery(function(){
	jQuery('.button').on('click', function () {
		alert("jQuryテスト");
	});
});

これでWordPressでもjQueryが動くはずだよ
でもこの方法だと修正が多くなるし、見づらくもなるから次に紹介する方法が有効です

ワンコ

jQuery(function($){

	/* この中なら「$」を使用できる */
	$('.button').on('click', function () {
		alert("jQuryテスト");
	});

});

「jQuery(function($){ });」と書くことで、この中（スコープ）だけなら「$」を使用することができます。
これなら修正する手間も少ないのでこちらの方法がおすすめです。

自分で用意したjQueryを使用する場合

CDNや自分で用意したjQueryを使用すれば、「$」マークを気にせず使うことができます。

用意したjQueryは「functions.php」で読み込みます。
また、標準のjQueryもテーマやプラグインによっては自動で読み込まれてしまうので、標準のjQuery読込を解除しましょう。

「wp_deregister_script」は登録されたスクリプトを解除する関数です。
その後に用意したjQueryを読み込みます。

function add_files(){

  /* WordPress標準のjQuery読込解除 */
  wp_deregister_script('jquery');

  /* 自分で用意したjQueryの読込 */
  wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.6.0.min.js');
}
add_action('wp_enqueue_scripts','add_files');

WordPress標準のjQueryと用意したjQueryどっちがいい？

基本的にはWordPress標準のjQueryを使用した方が望ましいと思われます。
テーマやプラグインによっては、WordPress標準のjQueryを使用している前提で作成されているものもあります。

そのため、正常に動作しなくなる可能性があるようなないような。。。

ニャンコ

今のところ、自分で用意したjQueryで困ったことはないです（個人の感想）

プラグインは最低限にするというのはWordPressの基本ですしね

基本的には標準のjQueryを使用して、jQueryのバージョンを指定したいという時は、それを読み込んでいいんじゃないかなと思います。

ワンコ