WordPress で jQuery を使う

どうも、つばさ♂です。
今回は WordPress で jQuery を使用する際のメモ的なものを書きたいと思います。
当サイトでも WordPress を使用していますが、テンプレートをデザインした当初は jQuery が上手く動かずにちょっとだけ困ったりしました。
WordPress では jQuery 以外のライブラリも使用するために、jQuery の $ 表記が他のライブラリとコンフリクトして上手く動作しないのだそうです。

そこで、jQuery をカプセル化することで jQuery を正しく動作させることが出来ます。

jQuery (function ($) {
	//ここに処理を記述
});

コードを簡単に解説してみましょう。
まず、jQuery では

$('#id').method();

の形式でコードを記述しますが、この $ とは jQuery のエイリアスです。
したがって、全ての $ を jQuery と書けば、すなわち

jQuery('#id').method();

このように書けば WordPress でも問題なく動作するのですが、使い慣れた $ をわざわざ jQuery と記述するのはやはり手間がかかります。また、既存のコードを流用する際にもあまり効率が良くありません。
そこで、カプセル化によって $ を jQuery に置き換えます。

(function ($) {
	//ここに処理を記述
}) (jQuery);

これで WordPress で jQuery を正しく動作させてやることが出来ます。

ただし、このままでは一部の処理は正しく行われません。
HTML / CSS を読み込み終わった後、すなわち DOM 構築後に実行させてやる必要のある処理ですね。

通常、DOM 構築後に処理を実行させる場合には、

$(document).ready( function () {
	//ここに処理を記述
});

または、これを短縮して

$( function () {
	//ここに処理を記述
});

のように記述するのでした。
したがって、DOM 構築後に処理を実行させてやる場合は、次のように記述してやればいいわけです。

jQuery (function ($) {
	//ここに処理を記述
});

ちなみに、WordPress では header.php 内に

<?php wp_head(); ?>

を記述することで jQuery が読み込まれます。この記述がないとそもそも jQuery が動作しませんので注意してください。
ではまた。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)