jQueryをWordPressに組みこむ際の注意

jQueryをWordPressに組組むときには次に注意する必要がある。

(1)jQueryの設定を出力する jQueryなどのライブラリは<script>で指定して利用することができるが、<script>で直接記述すると、プラグインなどが挿入する設定と重複する可能性がある。そこで、WordPressが設定をチェックし、重複がないようにするために<php? wp_head(); ?>で出力できるようにする。 そのためにはfunction.phpにadd_action()の設定を追加し、wp_enqueue_script(‘~’)のパラメータで指定する。

//jQueryの設定を出力
add_action('wp_head', 'myScript', 1);
function myScript() {
        wp_enqueue_script('jquery',
        get_bloginfo('template_url').'/js/jquery-1.8.2.min.js');
}

(2)コンフリクトしないように記述する WordPressはjQueryと他のライブラリとがコンフリクトしないように$が使用できなくなっている。そのため組みこんだjQueryを使う際には$をjQueryに置き換えて使う。

<div id="list">
 <table border="0">
 <tr>
    <td><img src="http://sample/images/photo01_thumb.jpg"  height=140" width="140"></td>
    <td><img src="http://sample/images/photo02_thumb.jpg"  height=140" width="140" class="gihyo"></td>
    <td><img src="http://sample/images/photo03_thumb.jpg"  height=140" width="140"></td>
    <td><img src="http://sample/images/photo04_thumb.jpg"  height=140" width="140" class="gihyo"></td>
 </tr>
 </table>
</div>

<script type="text/javascript">
<!--
jQuery('#list img.gihyo').animate({width:190,height:190},3000);
//-->
</script>

サンプル(class=”gihyo”のイメージをjQueryを使って拡大する)