先日、別サイトですが、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($)を記述することで、{}内のコードはすべて$のまま記述できます。
なお、今回の記事は以下のサイトを参考にさせていただきました。