WordPressでjQueryを使うには

WordPress

WordPressは標準でjQueryを読み込むようになっていますがコンフリクトを回避するため「$」を使ったjQueryの呼び出しができないようになっています。

そこでWordPressでjQueryを呼ぶ方法をまとめました。

jQuery(…)で呼び出す

jQueryは$(…)だけではなくjQuery(…)でも呼び出せます。

ローカルスコープ内で$として使う

グローバルのjQueryを引数として関数に渡し、ローカルスコープ内で$として使用します。グローバルの$は汚染されないので安全に使えます。

(function($) { 
  $(function() {
    // ここでは$がjQueryオブジェクトとして動作します
  });
})(jQuery);

WordPressに含まれるjQueryを使わないようにする

テーマファイルのwp_head()よりも前に追加します。functions.phpに追加してもOKですが、その場合は管理画面にも反映されてしまうので誤動作を招く可能性があります。

<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
?>

参考サイト

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

jQuery.noConflict() – jQuery 日本語リファレンス

コメント