WordPressでjquery-migrate.min.jsをCDNに変える:メモ

WordPressで読み込まれるjquery-migrate.min.jsを、CDNに変える際にどうもうまくいかなかったのでメモ。

まだ原因というか理由は調べ切れていませんが、方法だけはわかったのでメモとして。

[追記:2016.6.12 「CDNの読み込み判定」を追加]

実現したいこと

実現したいことは以下の通り。

• WP内蔵のjquery-migrate.min.jsをはずす
• CDNからjquery-migrate.min.jsを読み込む

なお、WordPressのバージョンは4.5.2です。
(…バージョン情報の記載は統一した位置や表示にした方が良いですね。折りをみて考えたいと思います。)

問題点

jquery-migrate.min.jsまで読み込まれる前は、以下の書き方でローカルのjQueryの読み込みを止められました。

wp_deregister_script( 'jquery' );

そして、jquery-migrate.min.jsをremoveする記述を探した際に、いくつかのサイトでは上記の記述のみを発見。

wp_deregister_script( 'jquery' )を記述したあとで、wp_enqueue_scriptを使い再びjQueryのハンドル名で登録しました。

確かにwp_deregister_script( 'jquery' )だけの時点で消えるのですが、jquery.jsとともにjquery-migrate.min.jsをCDNを読み込む指示を記載しても、ローカルのjquery-migrate.min.jsが読み込まれました。

対応策

wp_deregister_script( 'jquery' )の時点では消えていても、消し切れておらずjquery-migrate.min.jsのハンドル名が必要と考えて再調査し以下のページを発見。

Always the Latest google jQuery instead of default WordPress jQuery

上記ページより下記の記述が必要であると知りました。

wp_deregister_script('jquery-migrate');

なので以下のようにすれば解除と登録ができます。

wp_deregister_script('jquery-migrate');
wp_enqueue_script('jquery-migrate', '//code.jquery.com/jquery-migrate-1.2.1.min.js', array(), NULL , true);

WordPress自体から探す

Googleで検索してしまっていますが、WordPressの中身を見れば当然ハンドル名が書いています。

今回必要だったjquery-migrate.min.jsのハンドル名は、wp-includes/script-loader.phpの166行目に以下の記述があります。

$scripts->add( 'jquery-migrate', '/wp-includes/js/jquery/jquery-migrate$suffix.js', array(), '1.2.1' );

ハンドル名と動作

気になっていてるのはjqueryのハンドル名で解除した際に、なぜjquery-migrateが消えるのかという点です。

単純に考えれば、jqueryのハンドル名で2つを読み込む指定になっているとは思うのですが。

なお、依存関係は164行目にて以下のように定義はされています。

$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.11.1' );

$srcの所をfalseにしているためjqueryのハンドル名ではなにも読み込まれず、jquery-corejquery-migrateの順序だけを指定しているように見えますが、ここが指示なのかどうなのか。

$srcの所をfalseにし$depsだけ指定している書き方の動作がわかりませんでしたが、そこがわかればなと。

CDNの読み込み判定

functions.phpに記載してwp_enqueue_script()を用いてCDNでjQueryを読み込ませる場合、フォールバックを動作させるために「CDNが存在しているかどうか」という判定を行います。

この時、@fopenを用いる方法を使っていたのですが、プラグインの Debug bar で計測した際に速度低下の原因になっていたようでしたので（効率的な調査法がわからず怪しい所を総当たりした感じです…）、以下の方法に変更。

$url = get_stylesheet_directory_uri();
        $jsCore= 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
        $jsMigrate = 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://code.jquery.com/jquery-migrate-1.2.1.min.js';
        $jsCoreLocal = $url.'/js/jquery.js';//ローカルのjsフォルダにファイルがあるという前提
        $jsMigrateLocal = $url.'/js/jquery-migrate.min.js';

        //remove jquery in WP
        wp_deregister_script( 'jquery' );
        wp_deregister_script( 'jquery-migrate' );

        //jQuery CDN Check
        $args = array(
          'timeout' => 15,
          'headers' => array(),
          'body'    => null,
          'sslverify' => true
          );
        $test_url_jsCore = wp_remote_get( $jsCore, $args );
        $check_jsCore  = wp_remote_retrieve_response_code($test_url_jsCore );
        if ( (int)$check_jsCore === 200 ) {
          wp_enqueue_script('jquery', $jsCore, array(), NULL , true);
        } else {
          wp_enqueue_script('jquery', $jsCoreLocal, array(), NULL , true);
        }

        $test_url_jsMigrate = wp_remote_get( $jsMigrate, $args );
        $check_jsMigrate  = wp_remote_retrieve_response_code($test_url_jsMigrate );
        if ( (int)$check_jsMigrate === 200 ) {
          wp_enqueue_script('jquery-migrate', $jsMigrate, array('jquery'), NULL , true);
        } else {
          wp_enqueue_script('jquery-migrate', $jsMigrateLocal, array('jquery'), NULL , true);
        }

httpとhttpsの処理や、wp_remote_get()とwp_remote_retrieve_response_code()の利用などは下記を参考にしています。

[続報] fopen,file_get_content等がそのままでは利用できないサーバーでWordPressのjQueryをCDNにする方法

なお、Debug barでは該当の速度が3分の1程度まで改善できた模様ですが、PeegSpeed Insightsで計測した限りでは1点増加するかしないかというレベルで、大きな効果とは言えませんでした。

Debug barのエラー

WARNING: wp-includes/class-wp-http-encoding.php:58 – gzinflate(): data error
require(‘wp-blog-header.php’), require_once(‘wp-includes/template-loader.php’)・・・

前半しか載せていませんが、上記のように gzinflate()のエラーがでる場合があります。

これに関しては以下などに情報がありました。

• I’m seeing the following PHP warning in the Debug bar:
• gzinflate Warning on transient expiration

内容を読む限り、gzinflate()が呼び出される順序が原因であり、動作には問題ないととです。
直したい場合、コアコードである「WP_HTTP_Encoding()」を書き換えるような処理が必要とのことでした。

なお、WP_DEBUGによるエラー表示では出てきませんでした。

まとめ

日本語のサイトを探すと大抵wp_deregister_script( 'jquery' )だけですので、私の書き方のどこかが悪い可能性も十分にあり、調査も不十分ですが今はここまでで。

Twitter

Hatena

Facebook

Pocket