2017/12/22 (更新日: 2020/12/24)

WordPressでjQueryが動かない原因と解決策【コピペOK】

「いつも動くはずのコードがワードプレス環境だと動作しない」「jQueryの記述が間違っている？いやそんなことはない」

こんな悩みに答えます。上記のように、jQueryで作ったプログラムをWordPressで試すと動かない（エラーが出る）ってのは割とよくある話で、原因も解決策もシンプルだったりします、数分で解決しますのでご安心ください。

目次【本記事の内容】 [ click ]

jQueryが動かない原因と解決策

実はWordPress環境下で普通にjQueryを記述すると動作しません、これはWordPress側で予めjQueryがカスタマイズされているからで、通常の構文でコードを書くと怒られちゃうわけです。

これだと動作しない

$(window).on('scroll',function(){
	console.log('scroll');
});

例えば上のjQueryコードは動作しません、コードの頭にある「$」が原因です、WordPressでは少し書き方を工夫する必要があります。

これだと動作する

jQuery(window).on('scroll',function(){
	console.log('scroll');
});

さっきのコードとほとんど変わりませんが、コードの頭にある「$」が「jQuery」に置き換わっている事に注目してください、そうなんです、WordPressでjQueryを動かす時は「$」ではなく「jQuery」と記述する必要があるわけです。

「$」の部分を「jQuery」にする、たったこれだけでjQueryは動くようになります、是非お試しあれ。

jQuery(function($){
  // この中であれば「$」使用可
});

コードを書くたびに「$」を「jQuery」に置き換えるのは大変なので、上記コードをコピペしてその中であれば通常と同じ書き方でjQueryを使うことができます、少々ボリュームのあるコードはこっちの方が使いやすいと思います。

以上、おつ。