1分で実装！WordPress標準搭載のjQuery本体コードをCDNに変更する方法

みなさんこんにちは！エンジニアの高澤です！

今回はWordPress標準搭載のjQuery本体コードをCDNに変更する方法について解説していきたいと思います。

当記事の実装が必要になる場面

当記事の内容が必要になる場面は以下の内容になるかと思います。

• jQuery本体コードをCDNにしてページスピードを向上させたい
• 実装上の都合で、CDNに変更したい

上記のような場面で必要になる可能性があります。

実装する方法

それでは早速実装する方法について解説していきたいと思います。

wp_enqueue_scriptsフックで実装

新しいスクリプトやスタイルの読み込みにはwp_enqueue_scriptsフックを使用し、WordPress のスクリプト管理機能を活用するのが推奨されます。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_load_scripts() {
    if (!is_admin()) {
        // jQueryの登録を解除
        wp_deregister_script('jquery');

        // jQueryをGoogle CDNから読み込む
        wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array(), null, false);
    }
}
add_action('wp_enqueue_scripts', 'custom_load_scripts');

wp_enqueue_scriptsフックの目的等は以下になります。

wp_enqueue_scriptsフックで実装（jQuery UIを含めた場合）

wp_enqueue_scriptsフックを使ったスクリプトやスタイルシートの読み込みで、jQuery本体と合わせてjQuery UIも読み込みたい場合は以下のソースコードが使えます。

jQuery UIを利用したい場合はこちらをお使いください。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function custom_load_scripts() {
    if (!is_admin()) {
        // jQueryの登録を解除
        wp_deregister_script('jquery');

        // jQueryをGoogle CDNから読み込む
        wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array(), null, false);

        // jQuery UIのsortableを読み込む
        wp_enqueue_script('jquery-ui-sortable');
    }
}
add_action('wp_enqueue_scripts', 'custom_load_scripts');

wp_print_scriptsフックで実装（非推奨）

wp_print_scriptsフックは古いコードや既存のテーマ・プラグインで使われていることがありますが、新規の開発や更新であればwp_enqueue_scriptsフックを利用することが推奨されます。

推奨はしませんが、ご参考までに以下のコードを掲載しておきます。

<?php
function custom_print_scripts() {
	if (!is_admin()) {
		//デフォルトjquery削除
		wp_deregister_script('jquery');

		//GoogleCDNから読み込む
		wp_enqueue_script('jquery-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js' );
	}
}
add_action('wp_print_scripts', 'custom_print_scripts');

wp_print_scriptsフックの目的等は以下になります。

それぞれのコードは、WordPressの管理画面以外、つまりサイトページ表示時にCDNのjQuery本体コードをロードし、WordPress標準搭載のjQuery本体コードの読み込みを無効化しています。

これにより、Google の CDN から最新バージョンの jQuery を使用することができます。

wp_enqueue_scriptsフックと wp_print_scriptsフックはスクリプトの読み込みにおける違いがあり、適切に使用することで WordPress のパフォーマンスと保守性を向上させることができます。

まとめ

WordPress標準搭載のjQuery本体コードをCDNに変更する方法について解説は以上になります。

よろしければぜひお仕事にお役立ていただけましたら幸いです。