Twitter で @mokeco_ さんから「WP関連で質問があります。jQueryをWP同梱のものではなく、google等から引っ張ってきたいと思い、wokamotoさんのサイト http://bit.ly/iiBu1R や http://bit.ly/dYfu1e などを参考にしましたが、どうしても同梱のjQueryが呼び出されてしまいます。今回、ContactForm7がWP同梱のものより上位のjQueryで動くか試そうと思ったところ、こういうことになってしまい…お手数ですが解決法を教えていただけると幸いです。宜しくお願いします。」という質問があったので、それに対する回答。
WordPress には、wp_enqueue_script という仕組みがあり jQuery 等の JavaScript ライブラリを簡単に読み込ませることができます。
ただし、同梱されている jQuery 以外の他の jQuery (例えば Google Libraries API 上の jQuery) を読み込ませようとする場合、これらのデフォルトライブラリは wp_register_script() ですでに登録されているため、一度 wp_deregister_script() してから wp_enqueue_script() してやる必要があります。
# デフォルトで読み込まれる JavaScript ライブラリとそのバージョンは wp-includes/script-loader.php 辺りを眺めればわかるので、興味の有る方はソースを眺めてみてください。
以下のようなコードを functions.php に追記してやれば、おっけです。
wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', array(), '1.6.1');
1行目で、wp_register_script() で登録されているデフォルトの jQuery を登録解除し、2行目で Google Libraries API に登録されている jQuery を読み込むように指定しています。
他のデフォルト登録されている同梱のライブラリも同様にして変更することができます。
簡単ですね。
注意:
WordPress 同梱の jQuery には、末尾に jQuery.noConflict();
が追記されていますが Google Libraries API の jQuery には、この記述はありません。
prototype.js 等を同時に使っているサイトで Google Libraries API の jQuery を使用すると、競合して動かなくなるので、お手当してやる必要が有ります。
jQuery しか使ってなければ、問題有りません。
追記: 2011-8-23
をかもとさんのWordPress 同梱の jQuery 以外を使う方法という記事でwp_enqueue_scriptを使って外部スクリプトを読み込む方法が書かれていますが、このまま書くと管理画面にも読み込んだCDNが反映されます。
そうすると、管理画面内でjsで動かしているサイドメニューのアコーディオンやテーマで設定されたカスタム背景のカラーピッカーなどが動かなくなる事があるので、管理画面はそのままのほうがいいかもしれません、と思ったので書いてみます。
via. WordPressでjQuery本体をCDN等に置き換える際は管理画面に読み込ませないようにする – かちびと.net
シロさんに指摘されました。
確かにそうですね。
上記方法だと管理画面の jQuery も入れ替えられちゃって、管理画面で prototype.js とか使ってるときは、正常に動作しなくなったりします。
シロさんの指摘どおり、is_admin() 書いておきましょう。
function load_cdn() { if ( !is_admin() ) { wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', array(), '1.6.1'); } } add_action('init', 'load_cdn');
または、header.php の一番上に以下を書いておいても良いです。
<?php wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', array(), '1.6.1'); ?>
header.php に書いておけば、管理画面には影響しないので。
ピンバック: firegoby » Blog Archive » ContactForm7にGoogle Ajax APIを使って日付入力用カレンダー