GoogleのCDNからjQueryを読み込む方法

WordPress
WordPress
この記事は約3分で読めます。

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

 

コメント

SAWALabの更新をチェック

この記事が気に入ったら
いいね!しよう
更新情報はこちらから