WordPress, jQueryをCDNに変える。バージョンを変える。

WordPressで使われているjQueryをCDN配信に変えたり、バージョンを変える方法です。

かんたんです。解除して再登録します。

『百聞は一見にしかず』なのでコードから見ましょう。

（どちらかといえば説明のほうが長い。）

<?php

add_action( 'wp_enqueue_scripts', function() {
    if ( is_admin() ) {
        return; // 管理画面は変更しない
    }

    if ( ! wp_script_is( 'jquery', 'registered' ) ) {
        return; // jqueryがない
    }

    // jqueryの登録解除
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-core' );
    wp_deregister_script( 'jquery-migrate' );

    $new_ver = '3.4.1';

    // jquery-core, jquery-migrateのエイリアス
    wp_register_script( 'jquery', false, [ 'jquery-core', 'jquery-migrate' ], $new_ver );

    //Google CDNのJQueryの登録
    $src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
    wp_register_script( 'jquery-core', $src, [], $new_ver );

    // Google CDNにないのでcdnjsからもってくる
    $new_ver = '3.1.0';
    $src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js';

    wp_register_script( 'jquery-migrate', $src, [], $new_ver );
} );

やっていることはシンプルです。スクリプトのレジスタからjqueryを外し新たに設定し直します。

jquery, jquery-core, jquery-migrateとは？

WordPressのjqueryは3つのハンドラで構成されています。

（そのほかjquery-ui関連の多数の付属プラグインもあります。）

くわしくはこちらにまとめました。

再登録処理

wp_register_script()を参考にしたのはWordPressのコードです。

function wp_default_scripts( &$scripts ) {
    // 省略

    // jQuery
    $scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
    $scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
    $scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

    // 省略
}

これを見慣れた方法で書くとこうです。

function wp_default_scripts( &$scripts ) {
    // 省略

    // jQuery
    wp_register_script( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
    wp_register_script( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
    wp_register_script( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

    // 省略
}

$scriptsってなんだ？と思う人はこちらをどうぞ。

最初のサンプルコードは、jquery-core, jquery-migrateのjsファイルを変えただけです。

（あとバージョンも。）

今回はCDNで配信するようにしましたが、自サーバーにダウンロードしたjsファイルを使うこともできます。

公開サイトしか変更しない

サンプルコードでは管理画面は対象にしていません。

<?php

add_action( 'wp_enqueue_scripts', function() {
    if ( is_admin() ) {
        return;  // 管理画面は変更しない
    }

    if ( ! wp_script_is( 'jquery', 'registered' ) ) {
        return; // jqueryがない
    }

    // 以下省略。
} );

管理画面ではjQueryを多く使っているので動かなくなる可能性が大いにあります。

（とくにプラグインは多く使っていてすべての動作確認が面倒。）

動かなくなるリスクを負ってまでjQueryを変える必要性を感じません。それでも『管理画面が重い』などから条件を外すときは自力で解決する力が必要です。