【jQuery】WordPressでjQueryが動かない時の対処方法

WordPressのページ内でjQueryを使用してプログラムを書くときに、

$ is not a function

というエラーでてjQueryが使えない！？という事があります。
これはprototype.jsというライブラリでも関数$を使用しており、２つのライブラリが重複した際に起こる問題です。
この問題を解決するには、jQuery側で$を使わないようにすればいいわけですが、通常の利用方法と違うように使ってしまうと、他の人間がプログラムを管理する際など、新たな問題を生んでしまいます。

そこで、一番簡単に回避する方法として、カプセル化をしてjQueryを使用しましょう！

jQueryのカプセル化

カプセル化とは外部のライブラリから影響を受けないように隠蔽を行うオブジェクト指向プログラムの手法です。
実際に以下のように記述します。

<!-- HTML部分 -->
<p id="sample1">こんにちは！</p>

<!-- Script部分 -->
<script>
// この記述の場合は対象オブジェクトよりも後に記述します。
(function($){
	// プログラムを記述：$を利用できます。
	alert($("#sample1").text());
})(jQuery);
</script>

もしくは

<!-- Script部分 -->
<script>
// すべてのドキュメント（ページ）が読み込まれた後に実行するので記述場所はどこでもよい
jQuery(document).ready(function($){
	// こちらでも$を利用できます。
	alert($("#sample2").text());
});
</script>

<!-- HTML部分 -->
<p id="sample2">これでOK！</p>

と記述しましょう。

ダメな例

<script>
$(function($){
	// このように記述すると、Wordpress内ではエラーがでます
});
</script>

下記のNG

<script>
$(document).ready(function($){
	// この記述もNG
});
</script>

普通のサイトに使う分には上記の書き方でも問題ないのですが、Wordpressのようにライブラリを複数利用しているようなCMSを利用する場合などは問題が起こってしまいます。

その他の対処

何らかの理由でカプセル化を使いたくない場合などは、下記のように記述します。

<!-- HTML部分 -->
<p id="sample3">カプセル化を使わない</p>

<!-- Script部分 -->
<script>
// $を使わず代わりに[jQuery]を記述することで、問題なく利用できます
alert(jQuery("#sample3").text());
</script>

外部ファイルでJSを記述する・共通のファンクションを定義するなどの時は、多少コードが長く読みづらくなりますが、このように記述できます。

WordPress開発には基本知識として知っておくべき！

これらの記述の違いはWordpressでJSのプログラム開発する際には基本的に知っておくべき事ですが、jQueryやWordpressを始めたばかりの方は最初につまづいてしまいやすいところですので、参考にしてみてください。