WordPress では 何もしなくても jQuery を使えます

WordPress で jQuery を使おうと、自前でjqueryを読み込んでいましたが、実は そんなことしなくても最初から jQuery は利用可能になっています。(厳密には wp_enqueue_script で 'jquery' を指定する必要があるのですが、多くのテーマでは実行されていますし、その具体的な方法はここでは述べません。wp_enqueue_script と jquery で検索すれば丁寧に説明してくれるサイトがすぐに見つかるはずです)

しかし、そのままでは jQuery の特徴とも言える "$" を使った記法ができません。$(document) とか $(function とか が使えないということです。 jQuery以外のライブラリでも "$" が使われることがあるため、コンフリクトを避けるために WordPress に組み込まれている jQuery では グローバルに "$" を使えないように設定されているためです。

これでは困るので、ではどうやって使えるようにしましょうか、というお話をこれからします。

WordPress でも "$" を使えるようにしよう

$(document).ready(function() や $(function() で "$" を使う

jQuery(function($) {
    // ここに 内容を記述
});

function 内で $ を使いたい

これはスコープの問題があるので少々ややこしいですが、以下のように置き換え可能です。

// ■ もとの関数
function hogehoge() {
    // ここに内容記述
}

// ■ 修正後の関数
var hogehoge;
jQuery(function($) {
  hogehoge = jq_hogehoge.bind();
  function jq_hogehoge() {
    // ここに内容記述
  }
});

function hogehoge() の内側を jQuery(function($) で囲めば良さそうに思うかもしれませんが、jQuery(function($) 内の実行タイミングが 本来の動作と変わってしまうため、うまく動作しない可能性があります。

ここで紹介したように、function 全体を jQuery(function($) で囲ってから グローバル変数へ bind する方法では 元の動作とほぼ変わらないので 安全な修正といえます。

記述順序に気をつける

グローバルに定義する function と違い、jQuery() ローカルスコープで定義して、bind する場合は bind のタイミングが問題になります。

jQuery() ローカルスコープ内の function からの呼び出しは特に問題になりません。その function を実行するときには すでに すべての jQuery() スコープ内の bind() が実行済のはずです。

問題になりそうなのは、$(document).ready のように 評価時点で実行する場合です。 一般的に、$(document).ready を置換した jQuery(function($) は 一番最後に記述すれば問題ありません。

おわりに

なお、WordPress の jQuery 読込をやめて、独自に読み込めば このような処理はいらなくなりますが、WordPress の思想とは矛盾することになるので、オススメできません。

以上です。