WordPressのパッケージには初めからjQueryが含まれているため、
インストールを行うと自動でjQueryが読み込まれるようになります。
ところが、このデフォルトで用意されたjQueryがなかなかの曲者。
ファイルサイズが大きく、サイトの軽量化を進めていくと誰もが壁にぶち当たるはず。
こんなときは、GoogleがCDNで提供しているGoogle AJAX APIを利用しましょう。
Google AJAX APIを利用するメリットは以下3つ。
・常に最新版のjQueryを利用できる(WordPress内のjQueryは旧バージョンが多い)
・YUI等を利用せずとも、初めから圧縮されたjQueryを読み込んでくれる(高速化)
・ユーザー側でjQueryのキャッシュを保持してくれる(高速化)
デメリットはオフライン作業時にWeb環境を再現できないことですが、
ThemeTestDriveを利用していればそんな悩みとは無縁!
オンラインのままバックグラウンドでテーマをゴニョゴニョできるのでオススメです。
それではGoogleのCDNからjQueryを読み込む方法。
以下をfunctions.phpに追記
// jqueryをGoogleAjaxApiから読み込む
function load_cdn() {
if ( !is_admin() ) {
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’, array(), ‘1.10.2’);
}
}
add_action(‘init’, ‘load_cdn’);
header.php内の<?php wp_head(); ?>でインストール済のjs等が読み込まれるため、
wp_deregister_script()でWordPress版jQueryを停止し、
wp_enqueue_script()でGoogle版jQueryを代わりに読み込むイメージ。
(is_admin()を使うことで管理画面ではWordPress版jQueryを読み込んでいます。)
ちなみに、上の記述ではjQueryの1.10.2を読み込む設定になっているので、
常に最新版(1.X系)を読み込むなら、wp_enqueue_script()内を以下のように
記述してください。
wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, array(), ‘1‘);
これでjQuery1.X系の最新版を常に拾ってくるようになります。
(現行の最新版は2.0.3ですが、IEとの互換性も考慮して当サイトは1.10.2にしています)
常に最新版を読み込むようにしている場合は、その都度動作確認を忘れずに!!
参考サイト
WordPress 同梱の jQuery 以外を使う方法 | dogmap.jp
コメント