【WordPress】jQueryのアップデート方法!読み込むjQueryをバージョンアップ(更新)してサイトを高速化。

Wordpress_jQueryのアップデート方法_eyecatch

WordPressサイトで使用するjQueryをアップデートする方法をまとめました。

執筆時最新のWordpress5.7ではデフォルトでjQuery3.5.1が読み込まれますが、テーマ側の設定によって1.x系の古いjQueryを読み込んでいるテーマも多いです。

基本的にjQueryは新しいバージョンの方が高速に動作するため、問題が発生しないのであればバージョンアップすることでサイトの高速化が期待できます。

functions.phpで対応しますが、プラグインを使う方法もご紹介。

WordPressのjQueryを変更する

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

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

ポイント

・jQuery1.x系(1系):IE8以前の古いブラウザにも対応。
・jQuery2.x系(2系):IE8以上のブラウザに対応。1.xより高速。
・jQuery3.x系(3系):2.xの設計を見直したバージョンが3.x系。

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

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

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

ポイント

・wp_deregister_script()で既存のjQueryの読み込みを停止。

・wp_enqueue_script()で新しいjQueryを読み込む。

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

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

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

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

Wordpress_jQueryのアップデート方法_002

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を使いました。
■CDNに関する関連記事はコチラ。
jQueryのCDN読み込み先(ダウンロード先)URL一覧。Google、Microsoft、jQueryの3社より。

Wordpress_jQueryのアップデート方法_003バージョンを確認してみると3.6.0が読み込まれていることが分かります。

バージョンが変わらない場合、親テーマのfunctins.phpもご確認ください。

WordPressにjQuery Migrateを読み込む

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

Migrateについては割愛しますが、jQueryのバージョンごとの差異を自動で修正してくれる相互プラグインです。
Wordpress5.7ではMigrate3.3.2の最新バージョンが読み込まれています。
Wordpress_jQueryのアップデート方法_004WordPressでは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」というプラグインがあります。

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

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

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

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

Wordpress_jQueryのアップデート方法_006

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

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

ポイント

・wp_deregister_script('jquery');は必要無し!
・Wordpressの標準のjQueryが最新バージョンになります。

Wordpress_jQueryのアップデート方法_007

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でもっと重たい処理をするサイトなんかだと効果があるのでしょうか・・・

-Wordpress
-, ,

© 2021 ソロ学