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

WordPress

こんにちはtakosanです。

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」と書き換えてください。

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

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

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

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

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

動かない時は怖かったけど、原因と対策がわかってよかった!

タイトルとURLをコピーしました