WordPressでのjQuery取り扱いの基本

ヘッダ画像

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のコードを{}内にそのまま記述すればよいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です



関連記事

WordPressのユーザー名は丸見え!? 知っていますか?WordPressのログインユーザー名はだだ漏れだという事実を...ダッシュボード乗っ取り防止のためのセ...

絶対に分かる!WordPressの子テーマ作成 WordPressでは子テーマという機能があります。既存のテーマを作成すれば、カスタマイズする際に変更したい部分だけを子...

WordPressのRSSフィードを完全にコントロールする WordPressではコンテンツの更新情報を知らせるために標準でRSSを出力します。その出力方法は...http://e...

「トップに戻る」ボタンでスマホでのユーザビリティアップ! ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初め...