WordPressでjQueryが動かない場合【めもめも】

2014-12-03

＊旧ブログ（あんど+BLOG）からの転載です。

どうも。すんです。
今回はWordPressを使う方なら誰でも一度はぶつかるであろう壁、
…というのは少し盛りましたぶつからない方もいらっしゃいますよねもちろん。(弱気)

え、うそ、jQuery動かないんだけど…

という大大大問題の解決方法について、
メモ程度に記しておきたいと思います。

WordPressにjQueryを埋め込む際、
まあ、普通にjsをリンクさせて、コードを埋め込みますよね？

jsファイルをリンクさせる場合は、header.phpに

&lt;script type="text/javascript" src="&lt;?php echo get_template_directory_uri(); ?&gt;/js/jquery.js"&gt;&lt;/script&gt;

こんな感じでリンクさせて、

で、↓のようなコードを埋め込みたいとします。

&lt;script type="text/javascript"&gt;
			$(document).ready(function() {
				$('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
&lt;/script&gt;

こんなんちょろいちょろい

と、毎回埋め込んで動作を確認するんですが、
7割がた上手く動いてくれません。(私調べ)

普通に動いてくれる場合もたまーーーーーーにあるかもしれませんが、
動かない場合は、こう記述してみてください。

	&lt;script type="text/javascript"&gt;
			jQuery(document).ready(function() {
				jQuery('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
	&lt;/script&gt;

「$」を「jQuery」に変えるだけで、あら不思議。

これで大抵動作するようになります。

なぜ「$」だと動いてくれないかというと、
既存のjQueryファイルには、他のjsライブラリファイルとのコンフリクトを回避する設定
「noConflict:function(X)」が記述されています。
この設定が邪魔をして、「$」では動作しないようになっているようです。

「$」を「jQuery」にしても動かない場合は、
WordPress本体がすでにjQueryを読み込んでくれているのに、
自分で本体を追加で読み込ませてしまっていて動かない〜〜ということもあるので、
確認してみましょう。

&lt;script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.X.2'&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.X.1/jquery.min.js"&gt;&lt;/script&gt;

新しい本体の後に、古いバージョンのやつ読み込んじゃってるよー、
なんてことも時々あります。

それでも動かないんだけど！！！！という場合は、
……ググりましょう。

こうやってちゃんと書いておけば、
もう同じ失敗は繰り返さないよね！……きっと！！

(私もそろそろ学習します)