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が利用された場合でも問題無く$変数を使ったコードを実行することができますし、他のフレームワークとのバッティングも起きません。