WordPressでjQueryが動かないとき真っ先に確認すべき点

WordPress のテーマやプラグインを作る人には常識だと思うけど、
「jQuery のプラグインが動かない！」
というお悩みはこれが原因であることが一番多いし
自分もこれで嵌まったことがあるので。

jQuery ではこんな表現を使うことがあると思うんだけど

$('#switch').click(function () {
  $('#panel').show();
});

この $ は WordPress 標準の jQuery では使えません。

WordPress が標準で読み込む jQuery だと、こんな感じになりますね。

jQuery('#switch').click(function () {
  jQuery('#panel').show();
});

要するに、一般に $ で表される jQuery オブジェクトを
WordPress では jQuery で表すことになります。

これについて
「WordPress では $ の代わりに jQuery が定義されている」
と説明されているのを見ることがあるんだけど、
これ逆じゃないでしょうか。

本来 jQuery オブジェクトは jQuery という名前で表すもので、
それの別名として $ が定義されてるんじゃなかったかな。
コードの中で何回もジェークエリージェークエリー書くのめんどくさいから。

なので、正しくは
「WordPress では、jQuery の代わりに定義されている $ が使えない」
なんじゃないかと思います。

今は JavaScript のライブラリとして
jQuery が圧倒的な存在感を示してるけど、
他にも便利なものはありますね。
jQuery を使うようになる前は prototype.js のお世話にもなってました。

こういった他のライブラリでも $ が使われていて、
そのままでは $ が jQuery を指すのか他のものを指すのかわからなくなるので
WordPress では標準の jQuery 側が道を譲って
「うちは $ を使わないからそちらでどうぞ」
ということになってるんだと思います。

WordPress で読み込まれている jQuery のコースコードを見ると
最後にこういう記述があると思います。

jQuery.noConflict();

これを呼び出すと、$ が jQuery ではなく
先に定義された動作に戻るんですね。

なので jQuery 側ではエイリアス $ が使えなくなって
jQuery と記述することになります。

なので jQuery を使ったコードやプラグインが WordPress で動かない場合
$ を jQuery に書き換えてみたらいいと思うんだけど、
それでも jQuery で $ を使いたいという場合もあるかと思います。

絶対必要な場面は思いつかないけど、
書きかえるのがめんどくさいとか。

どうしても $ を使いたい場合の対応方法は
WordPress のドキュメントにも書かれてます。

こういうラッパーを作って

jQuery(document).ready(function($) {
    // この関数の中では $() が jQuery() のエイリアスとして機能するよ
});

その中にコードを書けば $ も動きます。
ようするにこの関数の中でだけ、$ に jQuery が渡されるということですね。

ただ上記のラッパーはページ読み込みが完了した時点で動くので、
何らかの理由で即座にコードを実行したい場合

(function($) {
    // この関数の中では $() が jQuery() のエイリアスとして以下同文
})(jQuery);

を使うこともできます。
まあできればページ読み込み後の実行でいいような作りにしといた方が
汎用性が高いし後でメンテナンスするのも楽だと思うけど。

がんばってください！