【Wordpress】jQueryのアップデート方法！読み込むjQueryをバージョンアップ（更新）してサイトを高速化。

WordPressのjQueryを変更する

記事内の画像はChrome拡張機能の「Wappalyzer」を使ったものです。

jQueryのバージョンを確認したところjQuery1.11.3が読み込まれていました。
これは使用しているテーマ側で設定されているバージョンのようです。

執筆時最新のjQueryのバージョンは3.6.0ですので、jQueryをアップデートします。
※バックアップ、作業後の問題確認も適宜行ってください！

functions.phpにコードを記述する

読み込むjQueryのバージョンを変更するのですが、Wordpressの場合はfunctions.phpに簡単なコードを追記するだけでバージョン変更が可能です。

コードのポイントと流れは以下です。

既存のjQueryを停止した後、新しいjQueryを読み込みます。

WordPressのjQueryの読み込みを停止する

まずWordpress側（テーマ側）で読み込まれるjQueryを以下のコードで停止します。

// WordpressのjQueryの読み込みを停止
wp_deregister_script('jquery');

コメントアウトについては適宜削除してもらってOK。

Wordpress5.7のデフォルトバージョン

テーマ側で設定されていたjQuery1.11.3が読み込まれなくなりました。
それと同時にWordpressに同梱されているjQuery3.5.1とjQuery Migrate3.3.2が読み込まれるようになります。

最新バージョンのjQueryを読み込む

Wordperssの標準のjQueryを停止したら、最新のjQuery3.6.0を読み込みます。
以下のコードをfunctions.phpに追加。

// WordpressのjQueryの読み込みを停止
wp_deregister_script('jquery');
// 新しいjQueryを読み込む
wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), '3.6.0', true);

wp_enqueue_script()で新しいjQueryのバージョンを読み込むことが出来ます。
先にwp_deregister_script('jquery');で既存のjQueryの読み込みを停止後、新しいjQueryを読み込むようにします。

関数内の3.6.0でファイル名の後にバージョン番号（?ver=3.6.0）を付与します。
最後のtrueはフッターで読み込むようにする方法です。
trueを設定しない場合はヘッダーでjQueryが読み込まれます。

レンダリングの関係でフッターで読み込む方がページ表示を高速化できます。
今回はGoogleのCDNを使いました。

バージョンを確認してみると3.6.0が読み込まれていることが分かります。

WordPressにjQuery Migrateを読み込む

ここまでの方法でjQueryのバージョンは変更できました。
しかしjQuery Migrateが読み込まれていません。

Migrateについては割愛しますが、jQueryのバージョンごとの差異を自動で修正してくれる相互プラグインです。
Wordpress5.7ではMigrate3.3.2の最新バージョンが読み込まれています。

WordpressではjQueryとともにMigrateも読み込んでいます。
先ほどのwp_deregister_script('jquery');でjQueryの読み込みを停止するとMigrateも読み込まれなくなります。

なので、jQueryの読み込みと同時にMigrateもfunctions.phpで読み込みましょう。

// Migrateを読み込む
wp_enqueue_script('jquery', '//code.jquery.com/jquery-migrate-3.3.2.min.js"
integrity="sha256-Ap4KLoCf1rXb52q+i3p0k2vjBsmownyBTE1EqlRiMwA="
crossorigin="anonymous', array(), '3.3.2', true);

URLやMigrateのバージョンはjQueryの公式サイト（ページの下の方）にあります。

基本的に最新バージョンを読み込んでおけばOKです。

プラグインでjQueryをバージョンアップする

Wordpressの場合、インストールして有効化するだけで最新のjQueryにアップデートできる「jQuery Updater」というプラグインがあります。

jQuery Updater – WordPress プラグイン | WordPress.org 日本語

公式サイトの説明をChromeで日本語訳した内容は以下です。

このプラグインは、jQueryを最新の公式の安定バージョンに更新します。これは、WordPressの最新の安定リリースでは利用できない可能性があります。
下位互換性のために、jQueryMigrateも含まれています。

ファイルは置き換えられないため、このプラグインを非アクティブ化すると、サイトが元の状態に戻ります。

WordPress5.6には最新バージョンのjQuery3が含まれているため、アップグレードは必要ありません。

管理画面左メニュー ＞ プラグイン ＞ 新規追加

プラグインの新規追加から「jQuery Updater」と検索。
有効化するだけで自動的に最新バージョンのjQueryがサイトに適用されます。

jQuery Updater有効化後

プラグインの説明にもある通り、Migrateも含まれています。

「WordPress5.6には最新バージョンのjQuery3が含まれているため、アップグレードは必要ありません。」とありましたが、Wordpressの標準バージョンは3.5.1です。

プラグインをインストールすると執筆時最新の3.6.0が適用されたため、アップグレードしても良いと思うのですが…

まとめ

WordoressのjQuery及びMigrateを最新バージョンに変更する方法のまとめでした。

手順自体は簡単なのでプラグインを使うより、手作業でアップデートした方が良いかと思います。
プラグインはバージョンを戻したい時に削除するだけなので保守性が若干良いですが、jQueryのバージョンってそんなにコロコロ変えるものでもなさそうなので...

余談ですがjQuery1.11.3からjQuery3.5.1に変更後、サイトスピードテスト「PageSpeed Insights」を行いましたがスコアは変わりませんでした。

jQueryでもっと重たい処理をするサイトなんかだと効果があるのでしょうか・・・