Affinger6のアップデート(var20240721)に伴い今迄のjQuery1.11.3から最新のjQuery3.Xが適用される様になり、脆弱性リスクの減少が期待できます。
早速Affinger6のアップデートを行こなったところ、jQueryで記述しているscriptがことごとくエラーになって動作不良（正常に表示しない）になってしまいました。^^;
Affinger6のアップデート(var20240721)に伴う、jQueryエラーの発生原因と回避策を紹介します。
注意ポイント
Affinger6のアップデート(var20240721)に伴う、jQueryエラー（事象）は、当サイトのWordPress環境で生じたものです。 利用されているWordPress環境で、事象が異なる場合があり得ますことを予めご承知おきください。
なぜjQueryエラーが発生するか？(原因)
今までのAffinger6バージョン(var20240625)までは、WordPressの独自仕様によるjQueryを「読み込ませない」設定 にして外部からjQueryを読み込む仕様でした。
ところが、今回のアプデで、WordPressに付属するjQueryを読み込む仕様に変更された様で、WordPressにおいてjQueryコードの書式が厳格化されます。 このため、簡易表記の$マークはリジェクトされ、今まで動作していたjQuery scriptがエラーになります。
対応策（正しいjQueryの表記方法）
NG表記（例） $(function() { $('div.nolink a').css('pointer-events', 'none').attr('tabindex', -1); });
＄マークをjQueryに変更するだけ
OK表記（例） jQuery(function($) { // ($)にすることで、function内は今まで通り$マークOK $('div.nolink a').css('pointer-events', 'none').attr('tabindex', -1); }); 単独の場合は jQuery('div.nolink a').css('pointer-events', 'none').attr('tabindex', -1);
ブログ内の全てのjQueryコードを修正したところ、ブラウザで確認する限りjQueryの動作不良は解消されましたが？
jQueryエラーの有無を念の為ChromeのConsoleで確認すると
下に示す３つのエラーが発生しているのが確認できました。
この原因は、Affinger6テーマファイルの st-richjs.php 内に$マーク表記のjQueryコードが存在している為でした。
st-richjs.php の640行、652行、664行に$マーク表記のjQueryコードがあり、下のコードの様に前述の正しいjQueryの表記に手修正して保存したところ、上記エラーは解消しました。
|
640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 |
jQuery(function($) { $('.is-style-st-paragraph-kaiwa').wrapInner('<span class="st-paragraph-kaiwa-text">'); }); }(window, window.document, jQuery)); </script> <?php endif; ?> <?php if ( trim( $GLOBALS["stdata568"] ) === '' ): // 簡易会話ふきだしB ?> <script> (function (window, document, $, undefined) { 'use strict'; jQuery(function($) { $('.is-style-st-paragraph-kaiwa-b').wrapInner('<span class="st-paragraph-kaiwa-text">'); }); }(window, window.document, jQuery)); </script> <?php endif; ?> <script> /* Gutenbergスタイルを調整 */ (function (window, document, $, undefined) { 'use strict'; jQuery(function($) { $( '[class^="is-style-st-paragraph-"],[class*=" is-style-st-paragraph-"]' ).wrapInner( '<span class="st-noflex"></span>' ); }); }(window, window.document, jQuery)); </script> |
注意ポイント
今後、Affinger6のバージョンアップがあった時に、st-richjs.php のjQuery表記が訂正されていれば問題ないのですが、訂正されていない場合は、バージョンアップ毎に、今回と同様の手修正が必要です。
Affinger6 var20240721のjQueryバージョンの確認
jQueryバージョンの確認は、例えばこのページをChromeで表示させ、デベロッパツールのConsoleで、 jQuery.fn.jquery と打ち込みます。
上画の様に、Consoleに '3.7.1' と表示されたので、Affinger6 var20240721は、jQuery3.7.1 になっていることが確認できました。