ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5, Test jQuery Updates の使い方と注意点

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPress5.5から始まったjQueryの段階的なバージョンアップのテストプラグイン・Test jQuery Updatesの使い方が変わりました。

jQueryが少しずつ変わっていくので、WP5.5以下とWP5.6以上でプラグインのバージョンと設定方法がちがいます。

jQueryのバージョンアップのスケジュール

jQueryのバージョンアップは3ステップで行います。1回のWordPressバージョンアップでは行わず、段階的に行われます。

2020年12月10日現在、WP5.6が公開されたのでステップ2が終わったところ。

ステップWP
バージョン
jquery
(本体)
jquery-migratejquery-ui
15.51系のまま
(1.12.4)
×そのまま
(1.11.4)
25.63系にアップデート
(3.5.1)
アップデート
(3.3.0)
アップデート
(1.12.1)
35.7アップデートなし×アップデートなし
ステップ内容
1下位互換の無効化。
migrateだけ外す。
アップデートなし。
2jQueryおよびUIプラグインのアップデート。
(1系 -> 3系)
Migrate付き。
3下位互換の無効化。
migrateだけ外す。
アップデートなし。

最終的にjQueryを1系から3系に上げてmigrateを廃止します。WP5.6は一気に上げるステップ。一番気をつけるところです。

くわしくはこちらに書きました。

WP5.6に上げる前にテストする

個人でやってる分にはWordPressを5.6に上げてから、いろいろな対応作業をしてもいいですが、企業など業務ではそうはいかないでしょう。

その場合は、WP5.6に上げる前にテストします。

ここで注意点が。

Test jQuery Updatesプラグインの最新版は2.0.0で(2020年12月10日現在)、2.0.0からWordPressの対応バージョンが5.6以上です。事前テストでは使えません。

ということで、こちらから1.0.2をダウンロードして手動で追加してください。

(ページの最後にダウンロードボタンがある。)

プラグインのダウングレードができるプラグインがあります。こちらを使ってもいいでしょう。

(使い方も簡単そうです。ボクは使ってないので説明は割愛。)

使い方

このプラグインは、jQuery本体(core)、jquery-migrate、jQuery-uiのバージョンを個々に切り替えできます。

その組み合わせで、WordPressのバージョンごとのjQuery環境が作れます。

(将来のjQueryの組み合わせも設定できるので、今のうち備えることもできる。)

WordPress5.5 Test jQuery Updates
jqueryjquery-migratejquery-ui
旧バージョン
(1系)
1.12.41.4.11.11.4
新バージョン
(3系)
3.5.13.3.01.12.1
jQueryのバージョン
WPバージョンjqueryjquery-migratejquery-ui
5.4Default
(1.12.4)
Enable
(1.4.1)
Default
(1.11.4)
5.5Default
(1.12.4)
Disable
(×)
Default
(1.11.4)
5.63.5.1Enable
(3.3.0)
1.12.1
5.7
(予定)
3.5.1Disable
(×)
1.12.1
WordPressのバージョンに合わせた設定

migrateはjquery本体のバージョンを見て、プラグインが自動で対象バージョンを設定してくれるので楽です。

1つのWordPressで複数サイトを運用しているとき(マルチサイト)、設定メニューはサイトネットワークになります。

各サイトごとには設定できません。

プラグインのバージョンが1.0.2以下の場合、WP5.6では設定メニューが表示されません。ようは使えない。

WP5.6でテストする

もうすでに、WP5.6にアップデートしているとき、このプラグインは2.0.0以上にする必要があります。

プラグインのアップデートで最新版にしておけばOK。

ただ、設定メニューがガラリと変わっています。

使い方

WordPress5.6 Test jQuery Updates

プラグインの変更点は、jquery-uiの選択をやめてスッキリしました。

また、jQueryバージョンのデフォルトが3系に変わっています。中途半端ですが日本語化もされてます。

WPバージョンjqueryjquery-migrate
5.41.12.4有効化
(1.4.1)
5.51.12.4無効化
(×)
5.6デフォルト
(3.5.1)
有効化
(3.3.0)
5.7
(予定)
デフォルト
(3.5.1)
無効化
(×)
WordPressのバージョンに合わせた設定

jquery-uiのバージョンは、jQueryをダウングレードしても新しいバージョンのまま(1.12.1)。

影響がなく変える必要はないと判断されたのでしょう。

migrateは、jQueryのバージョンに合わせて自動的に変わります。

本番環境で使うのはやめよう!

日本語訳が中途半端ですが、あくまでテスト用プラグインなので本番環境で使うのはやめようと言っています。

このプラグインは、WordPress 5.6でのjQueryとjQuery Migrateのテストを目的としています。

本番環境での使用は意図されていません。

ライブサイト(本番環境)にTest jQuery Updatesをインストールしている場合は、アンインストールして、代わりにEnable jQuery Migrate Helperを使用してください。

筆者訳

jQueryをダウングレードしたいとき、本番環境ではEnable jQuery Migrate Helperプラグインを使えってこと。

Test jQuery Updatesプラグインは、有効化されるとjQueryの初期設定が行われるのでアンインストールが必要です。

(プラグインの無効化でもいいが、使うことはないのでアンインストールのほうがいい。)

『使ってもいいけど、責任はウチにありません。』とも取れる。

使うときは自分で対応する覚悟を。

Enable jQuery Migrate Helperプラグイン

jQueryのバージョンをWP5.5以前に戻すプラグインです。使い方は簡単で、プラグインを有効化 / 無効化するだけ。

有効化jQueryのダウングレード
(WP5.5以下のjQuery)
無効化WP5.6のjQuery

しかし、jqueryのJavaScriptの載せ替えはしないみたいです。

jQueryとmigrateのバージョンは新しいままにして、ajaxでページをリロードして、その中でjQueryのバージョンを下位バージョンに変えてるらしい。

HTMLの差分を取って確認しました。

プラグイン無効化のjQuery
<head>
  <script defer src='https://tadtadya.test/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
  <script src='https://tadtadya.test/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
</head>

(tadtadya.testはテスト用ドメイン。公開されていないのでアクセスできない。)

プラグイン有効化のjQuery
<head>
  <script defer src='https://tadtadya.test/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
  <script src='https://tadtadya.test/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>

<!-- ---------- プラグイン有効化の追加スクリプト start ---------- -->
  <script type="text/javascript">
    window.onerror = function (msg, url, line, col, error) {
      var xhr = new XMLHttpRequest();
      var nonce = '57feb68691';

      xhr.open('POST', 'https://tadtadya.test/wp-admin/admin-ajax.php');
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.onload = function () {
        var response,
        reload = false;

        if (200 === xhr.status) {
          try {
	        response = JSON.parse(xhr.response);

            reload = response.data.reload;
          } catch (e) {
            reload = false;
          }
        }

        // Automatically reload the page if a deprecation caused an automatic downgrade, ensure visitors get the best possible experience.
        if (reload) {
          location.reload();
        }
      };

      xhr.send(encodeURI('action=jquery-migrate-downgrade-version&_wpnonce=' + nonce + '&msg=' + msg));

      // Suppress error alerts in older browsers
      return true;
    }
  </script>
<!-- ---------- プラグイン有効化の追加スクリプト end ---------- -->
</head>
<body>

<!-- ページコンテンツ -->

<!-- ---------- プラグイン有効化の追加スクリプト start ---------- -->
<!-- bodyの下部に追加 -->
  <script id='jquery-migrate-deprecation-notices-js-extra'>
    var JQMH = { "ajaxurl": "https:\/\/tadtadya.test\/wp-admin\/admin-ajax.php", "report_nonce": "eab75ff5d5", "backend": "", "plugin_slug": "enable-jquery-migrate-helper", "capture_deprecations": "", "single_instance_log": "1" };
  </script>
  <script src='https://tadtadya.test/wp-content/plugins/enable-jquery-migrate-helper/js/deprecation-notice.js' id='jquery-migrate-deprecation-notices-js'></script>
<!-- ---------- プラグイン有効化の追加スクリプト end ---------- -->
</body>

サイトのページを表示するたびに、ajaxのリロードが発生するのが若干気になりますが、これを使えって言ってるので使いましょう。

WordPressのアップデートは慎重に

WordPressを3、4、5系と使ってきましたが、今回のWP5.6へのアップデートにいちばん気を使っています。

(5.5に上げるときも全く同じことを言ってた。それ以上ってこと。)

とくにプラグインを多く使っている人、デフォルト以外のテーマを使っている人は要注意。

(WordPress非公式はとくに。)

アップデート頻度が低いものも注意しましょう。

ボクの場合、公開サイトはもともとjQueryを3系を載せるカスタマイズをしていて影響なし、管理画面もとくに影響なしでした。

案外あっさり上手くいったほうでしょう。だからといって『楽勝ですよ』とは言えません。

内容を見てると。

これを機に別のテーマ・プラグインに変えることも念頭に入れときましょう。すべての開発者が迅速に対応するとは限らないので。

WordPressは参入しやすいこともあり、キャリアの少ないエンジニアがたくさんいます。

中にはエンジニアの最低限の常識すらない人もいて、お金目当てを目的にするあまり、バージョンアップの対応すら考えもしない人もいます。

(一時期、Twitterのタイムラインに溢れるくらい流れていた。最近は見なくなってはいるが。)

気をつけましょう。

(ちなみに普通のエンジニアは、自分ができなければ引き受ける人を探す、代わりになるものを紹介する、など行う。)

WordPressの次のバージョン5.7で、migrateを外す予定です。

5.6ほどの内容ではありません。それまでにプラグインやテーマがmigrateを使わなくて済む対応をしてくれるか次第ですが。

前の投稿
WordPress5 失敗した予約投稿をやり直す方法

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください