【初心者向け】WordPressでjQueryを使う方法、たった3ステップで完了！

 

WordPressでjQueryを使うには。
1）header.phpに

<!--wpにインスト済みのjavascriptニックネーム（jquery）読み込み-->
<?php wp_enqueue_script('jquery'); ?>

と読み込み。
WordPress内にすでにjQueryがインストールされているので、インストールされているものを利用する関数を使う。
wp_head();の前に読み込む。

2）jQueryプラグインのコードをheader.php内に読み込み。
wp_head();より後ろに。

<!--wp_head();より後ろに-->
<script src='<?php echo get_template_directory_uri(); ?>/js/example.js'></script>

get_template_directory_uri();はテーマディレクトリフォルダまでのパスを出力するテンプレートタグ。

※子テーマのディレクトリを出力する場合はこれを

get_stylesheet_directory_uri();

とする。

3）終了タグの直前に対象物(動かす要素)を指定するスクリプトを書く。

<script>jQuery(function(){
  jQuery('#sample').*yurayura( {//*jQueryネーム
    'move' : 20,
    'delay' : 100,
    'duration' : 1000
  } );
});</script>

ポイントは、＄を全て「jQuery」に書き換えて貼り付けること。
（＄は他のプログラムとぶつかりエラーになる）
サーバーに置くjQuery（2））の方は＄があっても大丈夫。

ところでずっとjQueryで動かす要素はid（＃）指定しなければならないと思っていたのですが、class(.)でも指定できて動くのですね。
初めて知りました(^^;)