WordPressが独自に読み込むjQueryを停止して、GoogleにホスティングされているjQueryを使う方法

WordPressが独自に読み込むjQueryを停止して、GoogleにホスティングされているjQueryを使う方法

WordPressが独自に読み込むjQueryを停止して、GoogleにホスティングされているjQueryを使う方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • ベテランカードホルダーが厳選したおすすめのクレジットカード
  • このエントリーをはてなブックマークに追加

WordPressに最初から含まれているjQuery本体は、通常配布されているjQueryの本体とは少し違います。WordPressに内包されているjQueryでは、「jQuery.noConflict();」という関数が入っていて、コンフリクト(衝突)を避けるような設計になっています。

それ自体は親切だとは思うのですが、jQuery.noConflict()が含まれていることによって、通常jQueryで使える「$」が使えなかったりと、若干面倒な部分も持ち合わせています。

jQueryプラグインを導入しようと思ったのにちゃんと動かないとか、WordPress内包のjQueryが原因でトラぶった時の対処法を紹介したいと思います。

スポンサードリンク

WordPress独自のjQuery読み込みを停止する

WordPressに含まれるjQueryの読み込みを停止して、GoogleにホスティングされているjQueryを読み込むようにすることで、「$」を使った記述を行えるようにします。

header.php内の「wp_head();」よりも前に、以下のコードを記述してください。

header.php
<?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で制御したい場合は、以下のように記述します。

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本体を使っておくのが無難です。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。