WordPressでjQueryを動かす方法

先日、別サイトですが、WordPress内でjQueryを動かす必要がありました。
その際に、jQueryがなかなか動かずに困りましたので、備忘録がてらにここで動かし方を書いておきたいと思います。

WordPressでjQueryを動かすには

wp_enqueue_scriptの記述を追加

WordPressでは、わざわざjQueryのライブラリを新しくサーバー上に設置しなくても、標準でWP内にjQueryのライブラリが用意されています。

ただし、初期設定ではjQueryは読み込みされませんので、<head>~</head>内に、ライブラリ読み込みのための関数を追加する必要があります。

このライブラリ読み込みのための関数が「wp_enqueue_script」です。
これを<?php wp_head(); ?>以前に追加します。

具体的には、WordPressの利用しているテーマフォルダ内のheader.phpに、以下のように記述してください。

<?php wp_enqueue_script('jquery'); ?>;
<?php wp_head(); ?>;

これでjQueryが読み込まれるようになります。
なお本当に読み込まれているかを確認するには、実際のページのソースで、以下の一行があるかどうかを確認してください。

<script type='text/javascript' src='http://[ドメイン]/[wordpressを設置したディレクトリ]/
wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>

$をjQueryに置き換え

さらにもう一つの作業として、jQueryのコードを書き換える必要があります。
具体的には、コード内の「$」を「jQuery」という文字列に置き換えます。

これは、WordPressにはjQuery同様に「$」をコード内で利用するprototype.jsのライブラリがあるためです。そこでWordPressでは、ライブラリのコンフリクトを避けるため、jQueryの場合は「$」を「jQuery」に置き換えます。

たとえば以下のようなjQueryのコードがあったとします。
(id=”appeal”内の文字列を赤に設定する、というコードです。)

$("#appeal").css("color","red");

これをWordPress内で利用する場合は、以下のように書き換えます。

jQuery("#appeal").css("color","red");

これで正常に動くようになります。
ただ、コードが長くなる場合は、$をすべて置換するのはあまり綺麗ではないので、以下のようにするといいと思います。

jQuery(function($){
	$("#appeal").css("color","red");
	//以下、コードを追加
});

最初にjQuery(function($)を記述することで、{}内のコードはすべて$のまま記述できます。

なお、今回の記事は以下のサイトを参考にさせていただきました。