WordPressでjQueryを書いても、動かないことがあります。
WordPressでjQueryのコードを書く時は記述方法に少し注意点があります。
あるあるらしいので、まずはこれをチェックしてみてください。
書いたjQueryのコードをチェックしよう
jQueryのコードは以下のような記述になっていませんか?
1と2の違いは1が2の省略形というだけで、違いはありません。
僕はこれも当初は「なんで書き方が違うんだ」と混乱しました…
動かない記述法
1.
$(function(){
//jQueryで実行する内容
});
2.
$(document).ready(function(){
//jQueryで実行する内容
});
これを以下のような記述法に変更しましょう。
動く記述法
1.
jQuery(function(){
//jQueryで実行する内容
});
2.
jQuery(document).ready(function(){
//jQueryで実行する内容
});
違いはわかりましたか?
違いは書き始めの部分が、「$」か「jQuery」かです。
WordPressでは「$」が使えない
WordPressは標準でjQueryが読み込まれるようになっています。
このWordpressに組み込まれているjQueryが少し特殊で、他のスクリプトとぶつからないように、$が使えないようにしてあるんです。
なので、「$()」の部分を「jQuery()」に変更します。
「$()」と「jQuery()」は書き方が違うだけで、全く同じ意味です。
ちなみに以下のように()内に「$」を記述すると、その中では「$」が使えるようになります。
jQuery(function($){
//この中では$が使える
$("#sample").css("color","#ff0000");
});
まとめ
ちなみに僕はまだWebについて学び始めた当初、これにがっつりハマってしまい、挫折してしばらくjQueryをポイしてました。
少しWebについて知識がついてきた数ヶ月後、調べたらなんとあっけないことか…
アニメーションが動いた時はめちゃくちゃ感動しました。
WordPressのテーマには色々なアニメーションが最初から実装されていますが、自分で調べながらコードを書いて実装させたアニメーションが動いた時は達成感はんぱないです。
知らないだけで、意外と簡単なことでエラーになっていたりします。
焦らずに対処しましょう。