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を使って拡大する)