WordPressに最初から含まれているjQuery本体は、通常配布されているjQueryの本体とは少し違います。WordPressに内包されているjQueryでは、「jQuery.noConflict();」という関数が入っていて、コンフリクト(衝突)を避けるような設計になっています。
それ自体は親切だとは思うのですが、jQuery.noConflict()が含まれていることによって、通常jQueryで使える「$」が使えなかったりと、若干面倒な部分も持ち合わせています。
jQueryプラグインを導入しようと思ったのにちゃんと動かないとか、WordPress内包のjQueryが原因でトラぶった時の対処法を紹介したいと思います。
WordPress独自のjQuery読み込みを停止する
WordPressに含まれるjQueryの読み込みを停止して、GoogleにホスティングされているjQueryを読み込むようにすることで、「$」を使った記述を行えるようにします。
header.php内の「wp_head();」よりも前に、以下のコードを記述してください。
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3');
?>
これで「wp-includes/js/jquery/jquery.js」は読み込まれなくなります。
functions.phpで制御したい場合は、以下のように記述します。
function stop_wp_jq() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3');
}
}
add_action('init', 'stop_wp_jq');
header.phpでもfunctions.phpでも、好きな方で対処しましょう。
WordPress独自のjQueryを読み込みつつ「$」を使う方法
WordPressに含まれるjQuery本体を読み込みつつ、「$」を使った記述をする場合は、以下のようにスクリプトを書きます。
jQuery(function($) {
// ここにスクリプトを記述
});
「jQuery(function($)」で内包することで、「$」を使ったスクリプトを記述することができます。
もしくは、以下のように記述します。
jQuery(document).ready(function($){
// ここにスクリプトを記述
});
あとがき
ほんとjQueryってハマること多いですよね。jQueryがうまく動かない時の参考になれば幸いです。
ただし、どうしても導入しなければいけないjQueryが動かないとか、特別な理由がない限りは、WordPressのjQuery本体を使っておくのが無難です。