WordPressでjQueryを使う時の注意点 外部から読み込むか、本体同梱のものを使うか?

公開日: : 最終更新日:2014年4月22日 wordpress, サイト制作

最近は、jQueryというライブラリを使って、サイトの見栄えを良くしたり、動きのある要素をつけたりするのが流行っている。
コンテンツスライダーといって、複数枚の画像が一定間隔で入れ替わっていくのが典型だが、アコーディオンのようにクリックしたら下に広がるメニューなどもjQueryでできる。

jQueryを使わなくても情報を伝えるというサイトの機能は十分果たせると思うが、使うと随分おしゃれな感じになり、場合によって訪問者のユーザビリティを向上させることもできるので、使ってみたくなるのは人情だ。しかし、プログラミングなんかろくにわかっていない初心者には敷居が高い。
以下は私がはまってしまった点と、とりあえず解決できたことの備忘録。
jQueryは、Wordpressじゃなくても、どんなサイトでも使えるライブラリーである。ここでまとめるのは、それをWordpressで使う場合の注意点。

WordPressで使うならheader.phpに直書きはやめたほうがいい

ひとつは、Wordpressはphpで動いていて、通常の静的なHTMLのみでつくられているわけではない点。
通常のHTMLを前提にした記事では、headerなどにそのままコードを書く例が紹介されていたりする。通常のHTMLではそれでいいのだが、Wordpressではそれ以外の方法も取れる。Wordpressではfunctions.phpという特有のファイルがあり、これで関数を呼び出したり、新たに関数を定義したりできる。Wordpressと付き合っていくなら、functions.phpの扱いに習熟していったほうがよいと思う。
jQuery本体はfunctions.phpで呼び出すのがスマートだ。すでに呼び出されているのに紹介記事のとおりに直書きするとjQueryが2回読み込まれる可能性がある。こんなことを避けるためにもしっかりfunctions.phpを見ていくようにしたい。必要であればfunctions.phpのほうをいじるというわけだ。

外部からjQuery読み込ませたら、amazonjsが動かなくなった

もう一つ重要なことは、WordpressにはjQueryそのものは最初から入っているということ。解説記事や配布されているコードでも、外部のGoogleなどにホスティングされているjQueryを読みこませるようにしている例がかなりあるけれども、実は本体に同梱されている。
にもかかわらず外部から読み込ませるのには、合理的な理由もある。
それは、WordPress本体に含まれているjQueryはjQuery.noConflict();というのが含まれていて、通常のjQueryのコードの書き方では動かないということ。これは、jQuery以外の他のライブラリーを使用することをあらかじめ想定して競合が起こらないようにする配慮からそうなっている。つまり親切心からの設計なのだが、これがもとで、通常のコードは動かないから、外部から読み込ませて動くようにしようということだ。
本体に同梱されたjQueryを呼び出すこと自体が、ロード時間の増加につながっている可能性があるとの指摘もあり、普通にjQuery使いたいなら外部のを読み込ませたほうがいいよ、っていう話もある。
外部から呼び出すコードをfunctions.phpに書く場合、管理画面に関しては除外するように条件分岐させる必要がある。これは、管理画面には本体同梱のjQueryを使用する仕様になっているからだ。wp_head();で呼び出されるようになっている。これも外部呼び出しにしてしまうと、管理画面の一部機能が働かないことが知られている。

実は、この記事を書くきっかけは、amazonjsというプラグインを使っていたところ、Stinger2へのテーマ変更に伴い、外部のjQueryを読み込ませる仕様に変更したら、ウィジェットの固定やスクロールしたら現れるgo to topボタンといった新たに導入した機能は動くものの、今まで問題なかったamazonjsがうまく動かなくなったことなのだ。amazonjsはjQuery呼び出しにwp_footer();を使っているそう。そのため、外部呼び出しで管理画面に不具合が出るのと同じ理由で、動かなくなったのだろうか。もちろん、amazonjsの方を改造する手もあるのだろうが、私にはちょっと無理だ。
簡単な解決方法としては、外部から読み込むのはやめてWordpress本体同梱のjQueryに切り替えればよい。ただこうすると、amazonjsは動くようになるが、今度は逆に新たに導入した効果が動かなくなる。これは上述のjQuery.noConflict();の影響である。これを回避するには新たに導入した効果のスクリプトを若干書き直す必要がある。方法としては最初から競合を回避したコードで記述し直す方法。
これは、$() の代わりに jQuery() を使えばいい、または、「カプセル化」が簡単。ポイントは、コードの冒頭に「$」使わないようにすること。jQuery.noConflict();というのは、競合を避けるために、$をあえて使えないようにしているわけだ。だから、$で定義しないようにするだけ。
以下の記事を参考にさせて頂きました。
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例

(function($){
もともとのコード
})(jQuery);
こんなかんじで最初と最後を囲う。

または、もとのコードが
$(document).ready(function()から始まっているのであれば、それを
jQuery(document).ready(function($)に変更する方法もある。
$をjQueryに、()を($)に変える。

これで、WordpressのjQueryを使ってamazonjsも他の効果も問題なく動作するようになるはず。
それでも動かない場合は、もう素人としてはネット上からWordpress本体同梱のjQueryを使って動かす前提で書かれているコードを探してきてコピペさせてもらうしかない。この場合も、セレクタ名なんかを合わせる手直しは必要になる。
このサイトの場合も、わかりやすいように効果ごとにjsファイルを分けて、コードも若干変えて解決しました。多分にやっつけ仕事ですが。

そもそも使用しているテーマで本体同梱のjQueryを呼び出していない場合にfunctions.phpで呼び出すときには、以下の記述を追加する。
外部から呼び出している場合に、本体同梱からの呼び出しに変更したい場合は、該当箇所を以下の記述に変更する。

jQueryをロードするようscriptキューに対して登録を行います。

function add_jquery() {
wp_enqueue_script(‘jquery’);
}

管理画面でなければ、initフックでadd_jqueryが実行されるようアクションフックの登録を行います。
これは、Webサイト表示時でもjQueryを利用するためです。
if ( ! is_admin() ) {
add_action( ‘init’, ‘add_jquery’ );
}

この場合でも管理画面を除外する条件分岐をしていますが、していない記述例もあった。上記引用は↓の書籍付属のサンプルからです。これには多大なるお世話になっています。書籍に書いてある情報だけでなく、サンプルのfunctions.phpの中に、コメントが満載で、初心者が中級になっていくための配慮がされています。非常にお得感のある一冊です。サンプルを実サイトで使うことも可ということで、太っ腹です。

WordPress 3.x (速習デザイン)

Follow me!

ad

関連記事

ad