WordPressでjQueryが動かない時の解決法

2021年2月18日2024年4月11日

jQueryがWordPressで動かない時の解決法をご紹介します。

意外と知らないことだったり、人によっては「そういうものだから」と暗記してるだけです。

もう一歩踏み込んで理由をわかっている方がスッキリすると思うので、

今回は原因と対策の両方を紹介します。

WordPressでjQueryが動かないとき

Web制作駆け出しのころ、オリジナルテーマを完成させてWordPressにアップしたら

jQueryのプログラムが動かないことがありました。

なぜかjQueryで書いたプログラムだけにエラーが出て動かなかったのです。

この後原因を探り、問題のある場所を見つけました。

$("#button").click(function() {
   $("#button").show('slow', function(){
     $(this).css('border', '10px solid #333');
   });
});

こちらは例ですが、上記のようなjQueryで書いたプログラムの中で、問題があったのはズバリ

「$」です。

WordPressの中でこの書き方をすると、うまく動かないケースがほとんどです。

まずはなぜ$マークではうまく動かないかの原因の解説をします。

「$」は「jQuery」の省略形でどちらも同じ意味をもつ書き方です。

実はこの「$」はWordPressの中でも頻繁に使われる記号です。

jQueryのそれとWordPressのそれは全くの別物なのに、

同じ「＄」を省略形として使おうとすると衝突がおきてしまいます。

その為、WordPressの中ではあらかじめ「noConflict関数」というものが実行されています。

これがjQueryで$を使うと動かなくなる最大の理由です。

では解決する方法はどうしたらいいか？

答えは簡単です。

全ての$マークを「jQuery」と書き換えてください。

「$」は「jQuery」を省略して代わりに書いているものですので、意味自体は同じものです。

先程のコードで書き換えたとしたら下記のようになります。

jQuey("#button").click(function() {
   jQuery("#button").show('slow', function(){
     jQuery(this).css('border', '10px solid #333');
   });
});

jQueryの「＄」は、ちゃんと「jQueryですよー！」と明確に宣言してあげることで

WordPressの中でも問題なく動けるわけですね

よかったらシェアしてね！