【jQueryが動かない】WordPressでjQueryのコードを書く時の注意点

Web

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のテーマには色々なアニメーションが最初から実装されていますが、自分で調べながらコードを書いて実装させたアニメーションが動いた時は達成感はんぱないです。

知らないだけで、意外と簡単なことでエラーになっていたりします。
焦らずに対処しましょう。

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