[jQuery] WordPressでJQueryが動かない場合の対処方法

WordPressでjQueryを使おうとすると動かない場合があります。WordPressじゃないとうまく動いているプログラムでも

WordPressだと動いてくれない！そんな状況になってしまいます。原因は複数のjQueryがお互いに影響を及ぼしているということです。

WordPressに限らず、複数のjQuery関係のライブラリを同時に利用するときにも同様の現象が起こったりします。

下記のような方法で対処可能です。

Contents

WordPressにはjQueryがパッケージされています。

headerに

<?php wp_head(); ?>

1	<?php wp_head(); ?>

が記入されているとjQueryへのリンクが自動で貼られます。

WordPressにパッケージされているJQueryではjQuery.noConflict();という関数が実行されていて、これが原因でJQueryが動かないということになっているのです。

WordPressのjQueryパッケージの読み込みを止めて、GoogleのjQueryを読み込むようにする。
これが一番簡単な方法ですね。

WordPressのjQueryパッケージの読み込みを止めるはヘッダー内（<header></header>）に

<?php wp_deregister_script('jquery'); ?>

1	<?php wp_deregister_script('jquery'); ?>

を記述します。

Googleの配信しているjQueryを読み込むにはヘッダー内に以下を追記します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

これでjQueryの重複読み込みも無く、うまくjQueryが動く環境になりました。

参考

SearchLight