WordPressでjQueryが動かない?
jQueryって便利ですよね。WEBサイト制作において今やなくてはならない存在ではないかと思います。
そんなjQueryですが、ことWordPressで動かそうとするとうまく機能しません…
WordPressにはデフォルトでjQueryが入っているから動かないはずはないんです。
記述は正しいはずなのになぜjQueryで書いたスクリプトが動かないのか。
今回はその原因と対処方法について記述します。
この記事を見て試した結果、まだ動かない場合は記述が間違っている可能性がありますのであしからず。
WordPressでは「$」が使えない
結論から言いますと、WordPressでは「$」が使えません!
$(function(){
$("p").css("color","red");
});
とても単純なコードですが、普段jQueryを書く際は上記のように書くのが一般的ではないでしょうか。
詳しい部分は省きますが、WordPressは様々なライブラリが使用されている為、安易に「$」を使用すると同じく「$」を使用している別のライブラリがコンフリクト(衝突)を起こしてしまい上手く起動しなくなってしまいます。これを回避するためにWordPressでは「$」が使用できない(定義されていない)ようになっています。
実際に上記のコードをそのままWordPressに記述してF12で開発者ツールを確認してみると
$なんてないよ、とエラーを返されます。
私たちがjQuery動かねーじゃん何でだよ、となっているのと同時にWordPress側でも$が何か分からないのに$とか書かれても…となっているわけです。
じゃあどうしたらいいの?
WordPressでjQueryを動かす場合は下記の2パターンで対応が可能です。
「$」を「jQuery」に書き換えるパターン
上記コードの「$」部分を「jQuery」に書き換えます。
「$」がWordPressで使えないことは前述のとおりですが、同じ意味を持つ「jQuery」を使用する事でWordPress側でも、あぁjQuery使いたいのねと理解してくれるようになります。
jQuery(function(){
jQuery("p").css("color","red");
});
こんな感じ。
注意点としては「Q」が大文字だという点です。
jqueryと記述してしまうと変わらずjqueryなんてないよとエラーが出ますので、間違わないようにjQueryと記述してください。
(気づかずに動かないと悩み続けました。)
jQuery(function($){}で囲むパターン
改めて$をjQueryだと定義してあげる事で、$を使う方法もあります。
jQuery(function($){
$(function(){
$("p").css("color","red");
});
});
こんな感じ。
$=jQueryと改めて定義してあげることで、その中では$を使用することが可能になります。
既存のコードを使う場合や記述量が多いコードの場合はこの方法で対応したほうがよさそうですね。
まとめ
という事でWordPressでjQueryが動かなかった場合の対処方法でした。
分かってしまえば何のことはないんですが、WordPressを使い始めたばかりだと案外気づかない内容ですね。
それでもまだ動かないですか?
今一度jQueryのコードを見直してみましょう…!