【おしらせ】RSSフィード配信を停止しました

CocoonでjQuery migrateをフッターで読み込む、さらに解除して高速化を図ってみる

Cocoon
この記事は約7分で読めます。

CocoonデフォルトだとPageSpeed Insightsから「レンダリングを妨げるリソースの除外」を指摘されます。
具体的には「jQuery」と「jQuery migrate」。
本稿では2つの方法にて、この問題への対処をします。

スポンサーリンク
この記事を読む方へのオススメ

jQuery migrateとは?

ざっくり言うと、

jQuery旧バージョンとの互換性を保つためのプラグインです

うっかり読み込みを停止すると、

○○がエラーになって動かない!

と叫ぶ羽目になります。

しかしWordPress5.5でjQuery migrateが廃止されます。
そのせいで本当に「動かない!」と叫ぶ悲劇があちこちで発生してしまいました。

これを踏まえて、以下に対処法を記します。

スポンサーリンク

対処法1 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はクリアできます(検証済)。

参考記事はこの2つ。
何をやっているかは、こちらをお読みください。

【Cocoon高速化】PageSpeed Insightsの点数改善方法8選
運営するサイト(Cocoon高速化)の速度改善するため、点数を上げる具体的方法知りたい。 この記事解決できる問題:・適切なサイズの画像・次世代フォーマットでの画像の配信・使用していない JavaScript の削除・レンダリングを妨げるリソースの除外・使用していない CSS を削除してください・必要ないプラグイン削除
レンダリングを妨げるリソースの除外について
いつもお世話になっております。 PageSpeed Insightsの改善できる項目でレンダリングを妨げるリソースの除外が指摘されたのですが解決方法はございますでしょうか。体感スピードではサイト表示が遅いということはないので気にする必要はないのでしょうか。 引っ掛かったURLは」、 」で...

Cocoonにはフッター読み込みオプションをつけていたものを、後に削除したらしく。
作者わいひら氏は同オプションにつき、上記記事で以下の通り説明しています。

その機能は、不具合が出てしまうプラグインが結構あったので、廃止しました。
やっぱり高速化も大事ですが、正しくコンテンツが表示される方がより大事なので。

スポンサーリンク

対処法2 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' );

jquery-coreは解除しないでmigrateの依存だけ解消すればいいとは思うのですが。
どうせフッター読み込み指定する必要があるので、まとめてしまいました。

コードを見ただけで著者のやりたいことがわかる方。
もし間違っていたら御指摘ください!

なにぶんfunctions.phpでの制御にトライ始めたばかりなレベルの人ですので。

特にjQueryのバージョン。
V3以上だと「Uncaught TypeError: e.indexOf is not a function」のエラーが出るので2.2.4にしています。
migrateを外した影響だとは思うのですが。

コードの説明

wp_deregisterで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);

第3引数が依存関係の指定です。
つまり、

jqueryは本体(jquery-core)とmigrate(jquery-migrate)の両方と依存関係にあります。

そして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での制御推奨だものね
レベルアップするために頑張って勉強しましょう

タイトルとURLをコピーしました