WordPressのテーマで、jQueryを利用したプラグインを組み込んでいるのにもかかわらず、エラーが発生して利用出来ないことがあります。

原因

これはテーマ側で wp_enquere_script() 関数を用いて、WordPress本体に附属するjQueryを利用している場合によく発生する問題です。

/* WordPress附属のjQueryを、wp_head() 内で読み込む */
wp_enqueue_script('jquery');

WordPressの wp_enqueue_script() 関数を用いてjQueryを読み込んだ場合、通常利用できるはずのjQueryのインスタンスである$変数が利用できません。

これは、WordPress附属のjQueryでは他のライブラリとの競合を防ぐために jQuery.noConflict() を自動的に実行させているため、$変数が設定されないのが原因です。

対処

テーマ側で独自にjQueryを用意して読み込んだり設置してもかまわないのですが、プラグインなどで wp_enqueue_script('jquery') でjQueryを呼び出されてしまうと、既にテーマ附属のjQueryが読み込まれているのにもかかわらず、WordPressに附属しているjQueryも読み込まれてしまいます。

そのため、scriptタグの記述される順番によっては、WordPress附属のjQueryが優先され、jQuery.noConflict() 関数が実行されてしまうために$変数が使えなくなる事もあります。

そのため、いかなる場合にも正常に動作させられるようにするには、jQueryを利用するコードを工夫する必要があります。

問題の起きないコード

下記のように、jQueryのインスタンスを$変数として利用できるスコープを作り、その内部にjQueryを利用したコードを書きましょう。

(function($) {
    /* いつも通りのjQueryを利用したコードを書く */
    $(function() {
        /* 初期化コードなど */
    });
})(jQuery);

こうすることで、WordPressに附属するjQueryが利用された場合でも問題無く$変数を使ったコードを実行することができますし、他のフレームワークとのバッティングも起きません。