WordPress本体のjQueryと公式版のjQueryの違い

WordPress本体にはjQueryが含まれており、デフォルト状態でjQueryを使用している場合、このWordPress本体のjQueryが読み込まれるようになっています。

wp-includes/js/jquery/jquery.js のことですね。

このjquery.jsを読み込んだ状態で、テーマ内にダウンロードしてきたjQueryライブラリを設置したりすると、｢あれ？動かなくなったぞ？｣といったような状態になってしまう場合があります。これはなぜかというと…
WordPress本体のjquery.jsと公式版のjquery.jsにはちょっとした違いがあるためです。

jquery.js

// WordPress本体のjquery.js
jQuery.noConflict();  // 記述あり

// 公式版のjquery.js
jQuery.noConflict();  // 記述なし

補足

●WordPress本体のjquery.js
jquery.jsの最後の記述を見ると”jQuery.noConflict();”と入っています。
WordPress本体のjquery.jsは、テーマだけではなく、管理画面にも使用されており、その中にはjQuery以外のライブラリが使用されているような場合もあります。
また、jQueryはプラグインでも使用されており、その中にはjQueryとコンフリクトを起こすPrototypeライブラリ等が使用されていることもあります。
このような配慮から、WordPress本体のjquery.jsには、”jQuery.noConflict();”が含まれています。

jQueryとPrototypeでは、関数省略に$を使っていますので、これが原因でコンフリクトを起こし、バグやエラーを引き起こしてしまうわけですが、jQueryでは$関数の上書きを元に戻す”jQuery.noConflict()”メソッドを実行し、$関数の代わりに”jQuery”を使用することで、コンフリクトを回避することができます。

●公式版のjquery.js
jquery.jsの最後の記述を見ても”jQuery.noConflict();”は入っていません。
そのため、テーマ内にダウンロードしてきたjQueryライブラリをWordPress本体のjquery.jsを読み込んで動かそうとしても、きちんと動いてくれないことがあります。

WordPressでjQueryを使用する場合に気を付けておきたいこと

WordPressでjQueryを使用する場合、どのような点に注意すればよいのでしょうか？

jQuery以外のJavascriptライブラリと共存させたい時は、先にも述べたように｢コンフリクトを起こす原因は何なのか｣を知っておく必要があります。といっても、この辺のことを初めから理解している方は、当記事をわざわざ参考にはされないと思いますので、｢もっと楽な方法はないの？｣｢使ってみたいjQueryライブラリがあるんだけど、ダウンロードして自分で設置したい｣といった方向けの注意点と方法を紹介したいと思います。

1. テーマ内でjQuery以外は使わないようにする
2. WordPress本体のjquery.jsを読み込まないようにする
3. jQueryライブラリ同士でありがちな記述ミスを覚えておく

1.テーマ内でjQuery以外は使わないようにする

jQueryと他のJavascriptライブラリの共存が難しく、対応できそうにない場合は、テーマ内でjQuery以外のライブラリやプラグインは使わないようにします。
近年、｢他のJavascriptライブラリにはできて、jQueryではできない｣といったものは殆どないと思いますので、jQuery以外のライブラリやプラグインを使わないようにするのもその方法の一つです(※ある意味合理的で、トラブルも少ない方法だと思います)。

2.WordPress本体のjquery.jsを読み込まないようにする

WordPressの仕様でいうと｢WordPressでjQueryを使う場合、”$”ではなく”jQuery”を使う｣ことが前提になっています。でもそうするといちいち書き換えないといけなくなってしまいます…。ですが、”テーマ内でjQuery以外は使用しない”のであれば、WordPress本体のjquery.jsを読み込むのではなく、公式版のjquery.jsを読み込んだ方がトラブルも少なくなります。

テーマ内でWordPress本体のjquery.jsを読み込まないようにし、公式版のjquery.jsを読み込むようにするには以下のようにします。

header.php

<!--WordPress本体のjquery.jsを読み込まない-->
<?php wp_deregister_script('jquery'); ?>
<?php wp_head(); ?>

補足

2行目の記述でWordPress本体のjquery.jsを読み込まないようにします。
<?php wp_head(); ?>より上に記述してください。

function.php

// 公式版のjquery.jsを読み込む
if (!is_admin()) {
   function register_script(){
     wp_register_script('jquery', get_bloginfo('template_directory').'/js/jquery-1.7.2.min.js');
   }
   function add_script() {
     register_script();
     // 全ページ共通
     wp_enqueue_script('jquery');
   }
   add_action('wp_print_scripts', 'add_script');
}

補足

2行目の”!is_admin()”で管理画面は除外します。
管理画面では、他のjQuery以外のライブラリが使用されていることもあるでしょうし、動作上問題が起きる可能性が高いためです。

4行目にはハンドル名、スクリプトのパスの順番で記述します。
以前の記事｢WordPressでCSSやJavascriptをページ毎に振り分ける｣でも紹介していますので、詳細はそちらをご覧ください。
また、この記事の中では、｢”ハンドル名(上記で言うとjquery)”と”ファイル名(上記で言うとjquery-1.7.2.min.js)は同じにした方が分りやすい｣と書いていますが、ハンドル名は”jquery”としてください。
なぜかというと、WordPress本体のjquery.jsを読み込まないようにする際、ハンドル名を”jquery”としているためです。こちら側でもハンドル名を同じにしないときちんと読み込んでくれなくなりますので、注意してください。
ファイル名にバージョンを含めているのは、サーバー側で”mod_expires”モジュールを用いてブラウザキャッシュを使い有効期限を設定している場合、新しいバージョンのjQueryに変更した際、ブラウザでキャッシュされたファイルを読み込まないようにするためです(※簡単にいうと｢ファイル名を変更してやることで、キャッシュされたファイルを読み込まなくなる｣ということです)。

上記では、jquery-1.7.2.min.js(2012.7.14時点のminify化された最新版)をテーマ内に格納していますが、Google Libraries APIからリンクしても構いません。
⇒ Google Libraries API

8行目にも同じハンドル名(jquery)を記述します。

こうしてやることで、｢WordPress本体のjquery.jsと公式版のjquery.jsを両方読み込んでしまっている…｣といったこともなくなります。

3.jQueryライブラリ同士でありがちな記述ミスを覚えておく

一番ありがちなミスを一つ紹介しておきます。
jQueryを使って、｢ページの先頭へスクロールしながら戻る｣や｢メニューをタブで切り替える｣といったものを併用することがあると思います。
このように｢リンクを使ってクリック時にアクションを起こすjQueryライブラリやプラグインを併用したら動かなくなった…｣ということがあります。
これは、セレクタが重複していることが原因で起こる記述ミスです。

参考ソース

// ページの先頭へスクロールしながら戻る
$(function(){
    $('a[href*=#]').click(function() {
// 動作用のソース
    });
});

// メニューをタブで切り替える
$(function(){
    $('a[href*=#]').click(function() {
// 動作用のソース
    });
});

↓

// ページの先頭へスクロールしながら戻る
$(function(){
    $('#top_scroll a[href*=#]').click(function() {
// 動作用のソース
    });
});

// メニューをタブで切り替える
$(function(){
    $('#tabs a[href*=#]').click(function() {
// 動作用のソース
    });
});

補足

1～13行目が、それぞれのセレクタが重複している例です。
これでは、片方しか動作しなくなりますよね。

17～29行目が、それぞれのセレクタを変更した例です。
こうしてやることで、問題なく両方動作するようになります。
※反転表示されている19･26行目がセレクタを変更している箇所です。

これは、jQueryを使ったLightboxのグループ化でも使えますよね。

また、”ページの先頭へスクロールしながら戻る”をもっと簡単に実装したい場合、コリスさんのサイトで配布されているjQueryライブラリなんかもあります。
こちらのライブラリは、上記のようにセレクタが重複している場合、”動作しないエリアを設定”という機能も付いていたりします(※動作しないエリアにclass=”nopscr”を追記するだけといった簡単仕様で、セレクタの重複を防げます)。
⇒ コリスさん配布のPage Scrollerライブラリページ