【WordPress】jQuery Migrateの読み込みを停止する方法。jQuery本体だけを読み込みたい場合。

Migrate読み込み停止_004

WordPress付属のjQueryを読み込むと一緒にMigrateも読み込まれます。

jQuery MigrateはjQueryのバージョン間の差異を無くしエラーを回避してくれるプラグインですが、エラーが出ないことを確認した後やそもそもデバッグしない場合には不要です。

jQuery Migrate自体は12KB程の小さなファイルですが、高速化の観点から不必要な読み込みを無効にしておきたいという方向けの記事です。

functions.phpにコードを追加してMigrate"のみ"読み込まなくします。

jQuery Migrateの読み込み停止

Migrate読み込み停止_001

jQueryとセットで読み込まれるjQuery Migrate

WordPressでjQueryを使用する方法は自サーバー内のファイルを使用するか、CDNで外部サーバーのファイルを使用するかの2択です。

前者の場合、WordPressに始めから入っているjQueryを使っている場合が大半ですが、これを読み込むとMigrateもセットで読み込まれるようになっています。

jQuery本体はほぼ必須ですが、Migrateは使わないことがあると思います。
そこで付属のMigrate"のみ"を読み込まなくする方法です。

jQuery Migrateは必要か?

作業前にMigrateを読み込まないメリットとデメリットについて書いておきます。

【メリット】
・ほんの少しだけサイトの高速化に貢献する。
【デメリット】
・jQueryを新しくするとエラーが頻発する可能性がある。
・Wordpressの場合古いプラグインでエラーが出る可能性がある。
Migrate読み込み停止_002

migrate.min.jsのサイズは12KB程度

エラーや警告が0の場合や、デバッグしない場合は不要なファイルかもしれません。
しかし、本番環境で使用される「migrate.min.js」のサイズは僅か12KB程度です。

そんなに重たい処理をしているようにも思わないので、基本的にはjQuery Migrateは読み込んでおいた方が良さそうです。
良くも悪くもブラウザコンソールに表示されるメッセージや警告の数が変わります。

functions.phpにコードを書くだけでjQuery Migrateの読み込みを停止できますので、一旦試してから考えていただくのもアリです。

functions.phpでMigrateの読込を停止する

jQueryとjQuery MigrateはセットになるのがWordpressの仕様のようなので、コードの中身は意外と複雑です。

が、コードの説明は需要が少ないと思うので先にコードから書きます。
簡単に言うとjQueryとMigrateを一旦解除し、jQueryのみを登録する感じです。
functions.phpに以下を追加するとjQuery Migrateのみ読み込みを停止できます。

2種類のコードについて

jQuery本体をどのように読み込んでいるかによってコードが変わります。
・自サーバーから読み込んでいる場合は前のコード
・外部サーバーから読み込んでいる場合は後のコード
をお使いください。

WordPress付属のjQueryを使う場合

WordPressに始めから入っているjQueryを使う場合のコードは以下です。

//Migrate読込停止
function remove_migrate($scripts){
    if(!is_admin()){    
        $scripts->remove('jquery');
        $scripts->add('jquery',false,array('jquery-core'));
    }
}
add_filter('wp_default_scripts','remove_migrate');

jQuery Migrateが読み込まれなくなります。
(Wordpress付属のjQuery本体のみが読み込まれます。)

CDNでjQueryを読み込む場合

CDN経由で外部サーバーからjQueryを読み込んでいる場合は以下です。

//Migrate読込停止
function remove_migrate(){  
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), '3.6.0', true);
}
add_action('wp_enqueue_scripts','remove_migrate');

jQuery Migrateが読み込まれなくなります。
(CDN経由で取得したjQuery本体のみが読み込まれます。)

コードは異なりますが、ブラウザの開発者ツールのコンソールに「JQMIGRATE: Migrate is installed」と出ていなければMigrateは読み込まれていません。

Migrate読み込み停止_003

jQuery Migrateが読み込まれなくなった

もちろんヘッダーからも読み込みコードが消えます。
お疲れさまでした。

jQueryのハンドラについて

ここからはプログラムを考える時に詰まった内容です。

2つ目のコードはよくあるコードですので割愛。
1つ目のコードで「$scripts->add」という見慣れないコードが出てきました。
何をしているのかというとwp_default_scriptsを使ってWordpressのオブジェクトを操作しています。

$scriptsでキューやレジスタを管理しているらしく、このオブジェクトにハンドル名を指定してごにょごにょできます。
ベースになりそうなコードはwordpressのコアファイルにあります。

/wp-includes/script-loader.php

内を覗くと1つ目のコードに非常に近いコードが見つかると思います。

Migrate読み込み停止_004

script-loader.phpの748~752行目が参考になる

wp_deregister_script( 'jquery-migrate' );

でMigrateだけ停止できるだろ!と思っていたのですが見事にダメでした。
Migrateのみを停止するにはオブジェクトにアクセスしないと無理?

あと「jQuery」というハンドラ名がややこしすぎます。。。

ハンドラ名中身
jqueryjquery-coreとjquery-migrate
jquery-corejQuery本体
jquery-migrateMigrate本体

jQueryというハンドル名を使用するとjqueryとmigrateがセットになるんですね…
なが~くなるのでここらへんでもう...深堀りすると何時間あっても足りません・w・

今回こちらのサイト様を参考にさせていただきました。

ん~何時間勉強すればこの領域に辿り着けるのだろうか...凄い。

関数についてはWordPress Codex等に一通りあります。

ひとこと

WordPressのfunctions.phpにてjQuery Migrateを読み込まなくする方法でした。

コードの部分はすごく難しくなりそうなので省略しちゃいました…
Javascriptにしろオブジェクトの操作は便利だけれど本当に難しいです…

-Wordpress
-

© 2021 ソロ学