WordPressのテーマではWordPress本体からjQueryを読みこんでいるものが多く、それと併せてjQueryプラグインや簡単なプログラムを追加して活用しようとする場合が多いかと思います。

でも、実際にjQueryを使ってみたもの動かない！となったことがありませんでしたか？
今回はWordPress本体のjQueryを使うに必要なチョットしたコツをお伝えします。

WordPress本体のjQueryにはコンフリクト対策の追記がある

WordPressではjQueryのほかにもprototype.jsなどのJavaScript ライブラリを利用する場合があります。
そのためWordpressのjQueryには他のライブラリとコンフリクト（競合、衝突）しないように.noConflict() が追記されています。
この記述があることで＄関数がjQueryで使えなくなっていたのでした。

では、動かない問題を解決する方法はどうすればいいのでしょうか。

一番簡単な方法は、$ を jQuery と書き換えること

答えはとても簡単です。一番手っ取り早い方法は、$ を jQuery とするだけです。

例えば次のようなコードを書きたい場合

$(document).ready( function() {
   $(#nav).toggle();
}); 

これは

jQuery(document).ready( function() {
   jQuery(#nav).toggle();
}); 

とすればOKです。

なお、通常どおりに $ のままでいくには次の通りです。

jQuery(document).ready( function( $ ) {
　　$(#nav).toggle();
});

 

私もはじめたばかりのころ、jQueryが動かなくて、わざわざWordPress本体のjQueryを読み込まないようにして、新たにjQueryを読み込みなおして動ごかす。
なんて手間のかかる方法を行っていたりしました。

これを覚えておけばそんな必要なくなりますので、ぜひ覚えておきましょう。

【参考サイト】

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例

WordPressでjQueryが動かないという人へ – WordPressにイメージスライダーを付けてみよう