WordPress で CDN の jQuery を使い、フォールバックとキャッシュにも対応する

投稿日
更新日
WordPress のロゴ

このページで解説する方法は古い方法です。ここで解説する問題を解決した新しい方法があります。

WP で CDN の jQuery を使う：フォールバック・キャッシュ対応 - 3

jQuery を CDN から読み込むように変更します。CDN(Contents Delivery Network) とは、 端的に言えば、外部のサーバからコンテンツやリソースを読み込む仕組みです。 あるいはコンテンツの置いてある外部のサーバの場所を指します。

ユーザがより高速なサーバからリソースを読み込めるようにすることは、ページを素早く表示させるために重要です。 一方でサーバ側は、そのリソースのためにネットワーク帯域を消費しなくなります。

ここでは WordPress 標準の jQuery を読み込まず、Google(CDN) から jQuery を読み込むようにします。 さらに、Google から jQuery がダウンロードできない場合には、WordPress 標準の jQuery を読み込むようにします。

Hosted Libraries - Google Developers

WordPress で CDN の jQuery を読み込む方法

functions.php ファイルを編集する

WordPress で実現するには次のようなコードを functions.php で実行します。 wp_enqueue_scripts アクションにフックして、CSS や JavaScript を出力する際に実行します。

function sample_scripts_styles()
{
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http:\/\/ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'sample_scripts_styles');

処理の流れを大まかに解説すると次のようになります。(1) 標準の jQuery の登録を削除します。 (2) CDN の jQuery を登録します。ここでは Google から jQuery を取得します。 (3) 改めて (CDN の) jQuery を追加します。

header.php ファイルを編集する

head 要素を出力するテンプレート(テーマ)ファイルを編集します。多くの場合には header.php ファイルでしょう。 head 要素の "最後" に、次のような script 要素を追加します。

<script>
window.jQuery || document.write('<script src="<?php echo includes_url(); ?>js/jquery/jquery.js"><\/script>');
</script>

この script は、この script が実行されるよりも前に jQuery が読み込まれていなかったとき、 WordPress の標準の jQuery を読み込むための script 要素を追加します。

includes_url 関数は、./wp-include/ フォルダの URL を取得します。 WordPress 標準の jQuery ファイルは ./wp-include/js/jquery/ フォルダに配置されています。

wp_enqueue_scripts アクションは wp_head 関数が実行されるときに実行されます。 functions.php ファイルから追加した CDN (外部サーバ) の jQuery がサーバダウンなどの影響で読み込めないとき、 それより後に実行される上記のコードによって、自分のサーバにある標準の jQuery を読み込みます(フォールバック)。

実行結果を確認する

元のコードは次のようになっていると思います。(バージョンは実行環境によって異なります。見易さのために改行してます。)

<script type='text/javascript'
        src='http:\/\/ドメイン/wp-includes/js/jquery/jquery.js?ver=1.11.2'>
</script>
<script type='text/javascript'
        src='http:\/\/ドメイン/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'>
</script>

改変されたコードは次のようになります。

<script type='text/javascript'
        src='http:\/\/ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=4.2.2'>
</script>

フォールバックの動作を確認する

header.php ファイルなどに追加したフォールバックの動作を確認するときは、 functions.php ファイルから、WordPress に登録された jQuery を一時的に削除します。

先に追加したコードをすべて無効化し、 wp-deregister_script 関数と wp_dequeue_script 関数を使って登録済みの標準の jQuery を完全に削除します。

// jQuery の追加を一時的に無効化する。
// wp_deregister_script('jquery');   
// wp_register_script('jquery', CDN の URL);
// wp_enqueue_script('jquery');

// 一時的に完全に削除する。
wp_deregister_script('jquery');
wp_dequeue_script('jquery');

jQuery を WordPress 本体から一切出力しないようにした後、ブラウザから JavaScript の動作を確認します。 開発に使っているブラウザの開発者ツールなどを使ってエラーが起きていないか確認します。 重要な点は JavaScript が実行された後のソースコードを確認することです。

追加した JavaScript が実行され、次のようなコードが出力されていればフォールバックが機能してます。 このコードは追加した <script>window.jQuery ~ の直後に追加されます。

<script src="http:\/\/ドメイン/wp-includes/js/jquery/jquery.js"></script>

フォールバックの動作を確認した後は、CDN から jQuery を追加するための設定をすべて元に戻します。 wp_deregister_script 関数とwp_dequeue_script 関数も削除します。

Google の CDN にある jQuery のバージョン

URL http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js の 1 の部分は、jQuery のバージョン番号です。 jQuery のバージョン番号等は状況に応じて変更します。

Google の提供する CDN ではバージョン番号に、1 を指定するとき、jQuery 1.x.x の最新のバージョンがダウンロードされます。 また、例えば 1.7 を指定するとき、1.7.x の最新のバージョンがダウンロードされます。

jQuery 2.x 系は古いブラウザへの対応を取り止め、その分だけ高速に動作するようにしたものです。 具体的には IE8(Windows7標準) などへの対応を取り止めています。

また WordPress が標準で読み込む jquery-migrate.js は jQuery 1.9 の時点で廃止された古い関数や機能を再現するための JavaScript です。 古い jQuery を導入しなければならないシチュエーションでなければ読み込む必要もないでしょう。