WordPressで自作のjQueryスクリプトを実行する方法

通常のHTMLでのjQueryの使用

Wordpressを使用していない静的HTMLでのjQueryの使用方法から見ていきましょう。
例えば、h2を消したいなんて場合こんな感じになりますよね。

JavaScript

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
		$(document).ready(function () {
			$("h2").hide();
		});
		</script>
	

WordPressでjQueryを読み込む

WordpressのプラグインにはjQueryを使用するものがあり、それらのプラグインを有効にするとWordpress内部のjQueryが「wp_head()」に自動的に読み込まれます。
なので通常のHTMLと同じ感覚でjQueryを読み込んでしまうと、2重に読み込まれてしまいあまりよろしくなかったりします。

この辺はあまり深く考える必要がなくて「wp_enqueue_script」という関数を使用すれば2重の読み込みを防いでくれます。
Wordpressにあらかじめ組み込まれているライブラリにはハンドル名が割り振られており、引数にこのハンドル名を指定することで各ライブラリを読み込むことができます。
jQueyの場合は「jquery」でOKです。

記述する場所は「header.php」の「wp_head()」の前か、「functions.php」です。
「wp_head()」の後だと有効にならないっぽいので要注意です。

functions.php or header.php

		wp_enqueue_script('jquery');
	

自作jQueryスクリプトの実行

よし、これでカンペキ！　実行ってやっても動きませんよね！？
これはWordpressに組み込まれているjQueryが「noConflict」という関数が実行されている状態になっているのが原因です。
この関数はprototype.jsなど他のライブラリと同時に使用したときバッティングを起こさないための機能なようです。
で、「noConflict」ってのがが実行されていると結局何が違うのかと言いますと、「$」と書いていた部分を「jQuery」と記述する必要があります。
このページの最初に書いたコードだと以下のようになります。

JavaScript

		<script type="text/javascript">
		jQuery(document).ready(function () {
			jQuery("h2").hide();
		});
		</script>
	

「うお、jQueryとかいちいち書くのめんどくせ」っていう人はnoConflictをお好きな変数に入れてみてください。

JavaScript

		<script type="text/javascript">
		var j = jQuery.noConflict();
		j(document).ready(function () {
			j("h2").hide();
		});
		</script>
	

でもやっぱり「$」で書きたいんだよなって場合は、こんな書き方があるらしいです。

JavaScript

		<script type="text/javascript">
		(function($) {
			$(function() {
				$("h2").hide();
			});
		})(jQuery);
		</script>
	

「(document).ready」は省略できるみたいですね。