【初心者向け】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のバージョンを指定したいという時は、それを読み込んでいいんじゃないかなと思います。

ワンコ

おすすめ

WordPress　仕事の現場でサッと使える！ デザイン教科書
総合評価 ：

対象としては初心者を脱した方～中級者が対象になると思います。
Web制作現場などで働いている方が、困ったときにサッと確認する手引書のような使い方もできそうです。
先に紹介した書籍より一歩踏み込んだ内容になっています。

●WordPressで良く使用されるカスタム投稿について一章掛けて分かりやすく解説してくれる
●プラグイン作成から公開後の運用まで実務的な内容になっている
●ブロックエディタについて詳しい使い方が分かる
●WordPress作成中に分からないところを手引書のようにサッと調べられる
●巻末おまけのテンプレート階層やオブジェクトパラメーター一覧など調べたいときにすぐ見れる

●開発環境の作成方法などは載っていないので、初心者には難しいかも。

AMAZON

楽天