CocoonデフォルトだとPageSpeed Insightsから「レンダリングを妨げるリソースの除外」を指摘されます。
具体的には「jQuery」と「jQuery migrate」。
本稿では２つの方法にて、この問題への対処をします。
jQuery migrateとは？
ざっくり言うと、
jQuery旧バージョンとの互換性を保つためのプラグインです
うっかり読み込みを停止すると、
○○がエラーになって動かない！
と叫ぶ羽目になります。
しかしWordPress5.5でjQuery migrateが廃止されます。
そのせいで本当に「動かない！」と叫ぶ悲劇があちこちで発生してしまいました。
これを踏まえて、以下に対処法を記します。
対処法１ jQuery本体とmigrateをフッターで読み込ませる
かような状況からmigrateの読み込みを停止するのは怖いという方もいるでしょう。
またjQuery本体は必ず読み込ませないといけません。
そこで両方ともフッターで読み込ませることで対処します。
次の記述を子テーマのfunctions.phpに加えます。
/* jQuery＆migrate遅延*/
if ( !function_exists( 'is_footer_javascript_enable' ) ):
function is_footer_javascript_enable(){
return true;//get_theme_option(OP_FOOTER_JAVASCRIPT_ENABLE, 1);
}
endif;
これでPageSpeed Insightsはクリアできます（検証済）。
参考記事はこの２つ。
何をやっているかは、こちらをお読みください。
Cocoonにはフッター読み込みオプションをつけていたものを、後に削除したらしく。
作者わいひら氏は同オプションにつき、上記記事で以下の通り説明しています。
その機能は、不具合が出てしまうプラグインが結構あったので、廃止しました。
やっぱり高速化も大事ですが、正しくコンテンツが表示される方がより大事なので。
対処法２ jQuery migrateの読み込みを解除する
コード
migrate無しでも動くなら、余計なものは読み込まない方がいいわけです。
そこで今度はjQuery migrateを外すことにします。
次のコードを子テーマのfunctions.phpに記述します。
/* jquerymigrate停止*/
function jq_enqueue_scripts(){
//管理画面以外
if ( ! is_admin() ) {
//一旦、全て解除
wp_deregister_script('jquery');
wp_deregister_script('jquery-core');
wp_deregister_script('jquery-migrate');
//一本化
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js', array(),'2.2.4', true);
}
}
add_action( 'wp_enqueue_scripts', 'jq_enqueue_scripts' );
Cocoonのデフォルト状態だとjQuery3.0以上ではエラーが出るので2.2.4にしています。
jQuery3.0系以上を使いたい場合およびエラー修正
jQuery3.0系が使いたい場合は、まず前項のコードの以下の部分を差し替えてください。
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(),'3.6.0', true); }
さらに親テーマのJavaScript.jsの編集をします。
174行目あたりの記述を以下のコードと差し替えてください。
//モバイルヘッダーメニューのロゴ処理
//console.log($('.mobile-menu-buttons'));
$('.mobile-menu-buttons').each(function(){
if ($(this).has('.logo-menu-button').length) {
$(this).addClass('has-logo-button');
}
});
$(window).on('load',function(){
$('#carousel').addClass('loaded');
});
エラーの原因は、loadが3.0系以上で非推奨のためです。
該当箇所はこの行（修正前）。
$(window).load(function(){
書き換えたところエラーが出なくなりました。
ただし親テーマ更新のたびに書き換える必要はあります。
JavaScript.jsの中身を子テーマにまるっとコピペして親テーマのJavaScript.jsの読み込みを停止する方法はあります。
しかし他のアップデートが入った時に対処できなくなりますので、現状は親テーマ書換えでよろしいかと。
スキンがエラーを生じさせる場合もある
スキンによっては3.6.0系だとmigrateを外したときエラーが生じます
例えばイノセンススキン。
恐らくコード書換えで対応できると思います。
migrate解除におけるコードの説明
それだとテーマのjavascript.jsを読み込まなくなっちゃうの……
親テーマにおけるjQuery読み込みコードはlib/utils.phpにあります。
該当箇所はこちら。
//jQueryファイルの読み込み
if ( !function_exists( 'wp_enqueue_script_jquery_js' ) ):
function wp_enqueue_script_jquery_js(){
wp_deregister_script('jquery');
wp_deregister_script('jquery-core');
wp_deregister_script('jquery-migrate');
$ver = get_jquery_version();
$in_footer = is_footer_javascript_enable() ? true : false;
wp_register_script('jquery', false, array('jquery-core', 'jquery-migrate'), get_jquery_core_full_version($ver), $in_footer);
//jQueryの読み込み
wp_enqueue_script('jquery-core', get_jquery_core_url($ver), array(), get_jquery_core_full_version($ver), $in_footer);
//jQuery Migrateの読み込み
$ver = get_jquery_migrate_version();
wp_enqueue_script('jquery-migrate', get_jquery_migrate_url($ver), array(), get_jquery_migrate_full_version($ver), $in_footer);
}
endif;
御覧いただきたいのはこの行。
wp_register_script('jquery', false, array('jquery-core', 'jquery-migrate'), get_jquery_core_full_version($ver), $in_footer);
第３引数が依存関係の指定です。
つまり、
そしてjavascript.jsはjqueryと依存関係にあります。
親テーマの場合ですとこちら。
wp_enqueue_script( THEME_JS, THEME_JS_URL, array( 'jquery' ), false, true );
第三引数がjqueryとなっている通りです。
先に説明した通り、jqueryはcoreとmigrateの両方と依存関係にあります。
つまり両方を読み込まないとjavascript.jsを読み込まない仕組になっています。
これを解消するため、
「core＋migrate＝jquery」だったものを一旦リセットして「core＝jquery」に変更したわけです
wp_enqueue_script()の構造は以下の通り。
wp_enqueue_script('ハンドル名', 'ファイル元', 依存関係,'バージョン名', フッター読み込み);
先述のコードと見比べていただければ、何を入れればいいかわかると思います。
まとめ
実はfunctions.phpでスクリプトを制御するの今回が初めて
今まではテンプレートに直打ちしてたし
WordPressではfunctions.phpでの制御推奨だものね
レベルアップするために頑張って勉強しましょう
というわけで、もしどこか間違ってたらフィードバックお願い！
