WordPress での jQuery 取り扱いの基本

WordPress にはデフォルトで jQuery ライブラリが用意されています。
こちらを使わずに CDN などから通常のライブラリを読み込むこともできますが、実際にはこれを制御するのは WordPress 本体ではなく、テーマです。
そして、ほとんどのテーマでこの同梱ライブラリを読み込むよう設計されています。

この WordPress 同梱の jQuery は普通のライブラリとはちょっとした違いがあります。
他のライブラリでもよく使われるオブジェクト名$が競合しないようnoConflictという関数が使われており、これによって$が使えなくなります。
このため、サイトでの紹介や GitHub などで挙がっているサンプルコードでは動かないケースがあります。

基本的には、グローバル変数jQueryのエイリアスである$を直接jQueryに書き変えれば動作します。
長くないコードであれば、これが一番シンプルな対処方法です。

h1 を赤にするだけのシンプルなコード$('h1').css("color","red")を例にとります。

jQuery('h1').css("color","red");

また、jQuery(function($){})で囲みカプセル化することで、その中で$を使うことができます。

jQuery(function($){
  $('h1').css("color","red");
});

通常の jQuery のコードを{}内にそのまま記述すればよいです。

執筆:R3098

WEB サービス構築・監修が生業です。 WordPress 関連では Aurora Heatmap などプラグイン開発も行っています。悩めるサイト運営者の無料相談受付けます！