macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

WordPressでjQueryが動かない時【簡単に解決】

JavaScript WordPress プログラミング

「いつも動くはずのコードがwordpressだと動作しない」「jQueryの構文が間違ってる?」そんな悩みに答えます。

そんなに驚くようなことではありません、解決方法はシンプルです。

wordpressを勉強している方や初心者の方は参考にどうぞ。

wordpressでjQueryが動かない、私も最初はありましたし無駄に時間も使ってしまいました。

しかし、この記事にたどり着いた方はラッキーです、すぐに解決してしまいしょう。

スポンサードサーチ


原因は記述方法

これはwordpressに慣れていない方にありがち。

実は、wordpress環境下で普通にjQuery構文を記述すると動作しません。

詳細は割愛します、今回は対処策(書き方)だけ覚えておきましょう。

処理が間違っていない限りは一部を変更するだけでOKなんです。

まずは失敗例から見てみましょう。

動作しない例

wordpress環境のサイトでデベロッパーツールから下記コードを実行してみましょう。

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

実行するとエラーを吐くと思います、次は成功例を見てみましょう。

動作する例

同じく、wordpress環境のサイトでデベロッパーツールから下記コードを実行してみましょう。

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

エラーを吐かず、スクロールすると「scroll」とログ表示されるはずです。

ポイントは一つだけ、1行目の$の部分をjQueryに変えるだけ。

それだけです、簡単ですね。

おまけ:いちいちjQueryって書くのめんどくさい

確かにめんどくさいです、そんな時は下記のようにすればOKです。

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

少々長めのコードだとこっちのほうが楽ですね。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。