小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

CocoonでjQuery migrateをフッターで読み込む、さらに解除した上で3.0系のエラーを修正して高速化を図る

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

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' );

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解除におけるコードの説明

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

というわけで、もしどこか間違ってたらフィードバックお願い!

アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Cocoon
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました