【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

27Feb2012

WordPressでjQueryプラグインが動かない時の対処法

jQuery Write Less, Do More
WordPress初心者、jQuery初心者の為の心得です。

僕もJavaScriptをほとんど理解していない人間ですので、jQueryプラグインを設置するだけでも毎回なんらかのエラーに遭遇してしまい何時間も格闘しています。

静的サイトでjQueryを使う際はトラブルが少ないので、やはりWordPress+jQueryが僕にとって鬼門のようです。

何回も格闘するうちに、我が身をもって”注意すべきポイント”を得てきました^^;

1. jQuery、プラグインの読み込みで注意すること

WordPressをインストールした時点でjQueryが同梱されていますので、そちらを使います。
Google APIを使う方法もメジャーですが、これをWordPressでやると予期せぬエラーが起きるリスクが上がります。今回は諦めましょう。

WordPressでは複数のプラグインがjQueryを使おうとしてエラーを起こすのを防ぐ為に、読み込み時は以下の関数を使います。

これをheader.php内の以下のコード直前に記述します。

参考:WordPress Codex [Function Reference]

正しく読み込まれているか、この時点で一度確認しましょう。
ブラウザからアクセスして、ソースを見ます。
jQueryを読み込むソースを発見したら、リンク先まできちんと確認してから安心しましょう。

2. jsの記述で注意すること

2.1. コンフリクト回避のために

多くのjQueryプラグインは動作設定のjsをheader内に記述します。
もちろんheaderに書く以外に”外部ファイルとして読み込む”方法はありますが、これも今回はきっぱり諦めましょう。

header内にjQueryプラグイン用のjsを書く場合、拾ってきたコードをそのまま書くとほぼ確実に動作しません。

前項で読み込んだWordPressのjQueryは、他のJavaScriptライブラリとの衝突を防ぐ為、グローバル関数を変更しています。

↑何を言っているかわかりませんね。

簡単に言うと、
いろいろなライブラリで「$」を使うのでWordPress版jQueryでは「$」を「jQuery」にしましょう。
という話みたいです。

例えば

$(document).ready(function(){
    $('.rumble').jrumble();
});	

というコードを

jQuery(document).ready(function(){
    jQuery('.rumble').jrumble();
});

に変換しましょう。という事です。

一見簡単そうだけど、初心者には難しい作業になります。

header内に自分でコードを書ける人なら可能性はありますが、拾ってきたコードをそのまま張るしかできない人は、もうお手上げです。

そこでオススメの方法は、「$」のままで大丈夫なスクリプト内にスクリプトを書く、という早口言葉みたいな方法です。

2.2. 最もオススメのコンフリクト回避

具体的には以下のようにします。

この方法を使えばコードを修正する必要がなく手間も少なくする為、上級者も使っている方法です。

3. エラー原因がわからない時は最小パッケージでテスト

プログラムに関わらずどの分野でも同じ事ですが、エラーの解明には余計な物を全部外した最小パッケージで動作チェックをします。

WEBの最小パッケージはご存知の通り、以下ですね。




test



これに使用したいjQueryプラグインを動作させるパーツだけを追加します。




test



	



TEST TEST TEST

ちなみに上の例では、当サイトで使っているマウスオーバーでブルブルするjQueryプラグインを動作チェックしています。

最小パッケージで動作することを確認したら、次に実際の環境に移行してチェックを繰り返します。

関連記事