1分で実装!WordPress標準搭載のjQuery本体コードをCDNに変更する方法
![1分で実装!WordPress標準搭載のjQuery本体コードをCDNに変更する方法|WordPress MAGAZINE ワードプレスマガジン|すぐに仕事で使えるIT技術情報メディア](https://wordpress-mag.com/wp-content/themes/takazawa_theme/image/noimage.png)
みなさんこんにちは!エンジニアの高澤です!
今回は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フックの目的等は以下になります。
目的 | スクリプトやスタイルシートを WordPress のフロントエンドに読み込むために使用されます。 |
動作タイミング | テーマやプラグインがスクリプトやスタイルシートを登録し、ブラウザに出力する前に実行されます。 |
主な用途 | 外部ライブラリの読み込み、カスタムスクリプトの登録など。 |
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 の旧来の方法であり、古いテーマやプラグインで使われていますが、推奨されていない方法です。 |
動作タイミング | ヘッダーまたはフッターにスクリプトを直接出力する際に使用されます。 |
主な用途 | フッターにスクリプトを出力する場合に利用されますが、wp_enqueue_scripts フックを使って適切にスクリプトを管理する方が推奨されています。 |
それぞれのコードは、WordPressの管理画面以外、つまりサイトページ表示時にCDNのjQuery本体コードをロードし、WordPress標準搭載のjQuery本体コードの読み込みを無効化しています。
これにより、Google の CDN から最新バージョンの jQuery を使用することができます。
wp_enqueue_scripts
フックと wp_print_scripts
フックはスクリプトの読み込みにおける違いがあり、適切に使用することで WordPress のパフォーマンスと保守性を向上させることができます。
まとめ
WordPress標準搭載のjQuery本体コードをCDNに変更する方法について解説は以上になります。
よろしければぜひお仕事にお役立ていただけましたら幸いです。