2.4.3のJSエラーなどについて

[ボヘミアン]

こんばんわ。2.4.3のリリースお疲れ様です。
早速2.4.3に更新してみたところ、Chromeのデベロッパーツールで下記のようなエラーが出るようになりました。

Uncaught ReferenceError: jQuery is not defined
    at /wp-includes/js/jquery/jquery-migrate.min.js:2

Uncaught ReferenceError: jQuery is not defined
    at javascript.js:34

また、ブログパーツのカエレバを埋め込んだ時に、イメージ画像が表示しない、などの現象が発生しました。
バージョンを2.4.2に戻したところ、上記のエラーは出なくなりました。カエレバの方はバージョンを戻しても画像は表示しないままだったので、2.4.3とは関係ないとは思いますが、一応ご報告いたします。

[Hidekichi]

2.4.3のアップデートでjQueryをasyncで呼び出すようになったとのことでのエラーだと思われます。
asyncは読み込み順序を保証するものではないので単発で動作するスクリプト以外で使うと、それらが原因で問題が出るようになります。

どのように読み込み方法になっているかはまだ見てませんが、質問のエラーはjQuery-migrateを読み込む際にjQuery自体が読み込めてないという事です。

jQuery-migrateとはjQueryのバージョン差異によって発生する問題を解決する為のjQueryプラグインです。

jQueryはjavascriptのライブラリなので単発で動作しますが、jQuery-migrateはjQueryのプラグインなのでjQueryが事前に読み込めていないと動作しません。
javascript.jsもjQueryが読み込めてないと中に書いてあるのはほぼjQueryですからエラーになります。

解決方法としては、jQueryをヘッダで読み込むならdeferに。フッタで読み込むならdeferもasyncも不要で(すでにbodyのレンダリングはされているので)、とにかく最初に読み込むことです。
document.readyとはつまりはフッタで読み込ませるのとほぼ同義です。なんせドキュメントの準備ができたらということなんですから。結果的にレンダリングブロックさえしなければよいのです。なので通常はdeferで遅延読み込みをすれば自ずとdocument.ready状態なわけです。が、本当にそうかどうかを確かめるためにdocument.readyを入れるということですね。

wp_enqueue_scriptで読み込まれている場合はdequeueして新たに登録し直したりして、jQuery以降に読み込ませるスクリプトをjQuery依存で読み込み直しをさせれば良いということになります。

あるいは既にjQueryが読み込まれているかどうかをチェックする機構が必要になります。ただこんな機構を作らずとも順番に読み込ませるだけで大抵は問題ありません。この順番の確保が一番重要です。

[ボヘミアン]

Hidekichi様。丁寧な解説ありがとうございます。
ご説明にある通り、順番に読み込ませるなどの処置を行ってみたいと思います。
カエレバの画像に関しては、こちらの問題のようで解決いたしました。
それでは失礼いたします。

[わいひら]

結局、以前はdefer asyncで動作しなくて、
今回、deferでもテスト段階で動作しなくて、asyncは、一見、僕の環境ではまくいったように見えたのですが、エラーが出てしまっていたようですね。
とりあえず、以前に呼び出し方法に戻したものをダウンロードページにアップしておきました。
とりあえず、レンダリングブロックを回避してみようと、やってみたのですが、難しいものですね。
とりあえず、hidekichiさんが書かれたことを見直してみようと思います。

[ボヘミアン]

わいひら様。おはようございます。
早速のご対応ありがとうございます。
お手数ですが、よろしくお願いいたします。

[投稿者]

投稿