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 などのプラグイン開発も行っています。サイト運営者の力になりたいと考えます。