WordPressでjQueryプラグインを自由に使う注意

WordPressには最初からjQueryが組み込まれていますが、通常の使用方法とは多少変わってくるところがありますので注意点を備忘録としまとめます。

※WordPress組み込みのjQueryを仕様せず、任意のディレクトリに純正のjQueryをアップロードして使用する場合は、通常通りで問題ないとおもいます。

まず、ヘッダーにjQueryを読み込む際の記述方法

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('easySlider1.5.js', '/wp-content/themes/テーマ名/js/easySlider1.5.js'); ?>

上段はWordPress組み込みjQuery.jsを読み込む記述。下段は、使用したいjQueryプラグインのjsファイルを読み込む記述です。
上記の記述を

<?php wp_head(); ?>

の直前に記述します。（これは大事なようです。）
これで.jsファイルの準備はできました。

今回は「easySlider1.5.js」というプラグインを例にしています。（※このページの最下部に設置してると思います。）
本来、設置箇所に下記のように記述するのですが、

通常の場合

<script type="text/javascript">
		$(document).ready(function(){
			$("#slider").easySlider({
				auto: true,
				continuous: true,
				speed: 700,
				pause:6000,

			});
		});
	</script>

WordPress内で設置する場合は下記のように記述します。わかりますか？

WordPressの場合

<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery("#slider").easySlider({
				auto: true,
				continuous: true,
				speed: 700,
				pause:6000,

			});
		});
	</script>

変数の「$」が「jQuery」となっています。これはWordPressの仕様で、変数「$」が他のライブラリなどに使用されているためにjQueryでは「$」の箇所を「jQuery」に置き換えて使用するように仕様変更されています。
「jQuery」の大文字、小文字は判別されますので、正確に！
（※私はこれに気づかず全く動かなかった・・・・・）

これで組み込みのjQuery.jsでプラグインを動作させることができます。また、ご自身でダウンロードしたjQuery.jsを使用する場合は注意が必要で、WordPressプラグインがjQueryベースで動作している場合はWordPress組み込みのjQueryを使用するため、動作不良をおこします。