LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress jQueryをCDNに変える。バージョンを変える。

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPressで使われているjQueryをCDN配信に変えたり、バージョンを変える方法です。

かんたんです。解除して再登録します。

『百聞は一見にしかず』なのでコードから見ましょう。

(どちらかといえば説明のほうが長い。)

<?php

add_action( 'wp_enqueue_scripts', function() {
    if ( is_admin() ) {
        return; // 管理画面は変更しない
    }

    if ( ! wp_script_is( 'jquery', 'registered' ) ) {
        return; // jqueryがない
    }

    // jqueryの登録解除
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-core' );
    wp_deregister_script( 'jquery-migrate' );

    $new_ver = '3.4.1';

    // jquery-core, jquery-migrateのエイリアス
    wp_register_script( 'jquery', false, [ 'jquery-core', 'jquery-migrate' ], $new_ver );

    //Google CDNのJQueryの登録
    $src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
    wp_register_script( 'jquery-core', $src, [], $new_ver );

    // Google CDNにないのでcdnjsからもってくる
    $new_ver = '3.1.0';
    $src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js';

    wp_register_script( 'jquery-migrate', $src, [], $new_ver );
} );

やっていることはシンプルです。スクリプトのレジスタからjqueryを外し新たに設定し直します。

jquery, jquery-core, jquery-migrateとは?

WordPressのjqueryは3つのハンドラで構成されています。

ハンドラjQueryの種類
jquery-corejQuery本体
jquery-migratejQueryのバージョン違いを補足するプラグイン。
下位互換のないコードは復元してくれる。
jqueryjquery-core, jquery-migrateのエイリアス

(そのほかjquery-ui関連の多数の付属プラグインもあります。)

くわしくはこちらにまとめました。

再登録処理

wp_register_script()を参考にしたのはWordPressのコードです。

wp-includes/script-loader.php
function wp_default_scripts( &$scripts ) {
    // 省略

    // jQuery
    $scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
    $scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
    $scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

    // 省略
}

これを見慣れた方法で書くとこうです。

wp-includes/script-loader.php
function wp_default_scripts( &$scripts ) {
    // 省略

    // jQuery
    wp_register_script( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
    wp_register_script( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
    wp_register_script( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

    // 省略
}

$scriptsってなんだ?と思う人はこちらをどうぞ。

最初のサンプルコードは、jquery-core, jquery-migrateのjsファイルを変えただけです。

(あとバージョンも。)

今回はCDNで配信するようにしましたが、自サーバーにダウンロードしたjsファイルを使うこともできます。

公開サイトしか変更しない

サンプルコードでは管理画面は対象にしていません。

<?php

add_action( 'wp_enqueue_scripts', function() {
    if ( is_admin() ) {
        return;  // 管理画面は変更しない
    }

    if ( ! wp_script_is( 'jquery', 'registered' ) ) {
        return; // jqueryがない
    }

    // 以下省略。
} );

管理画面ではjQueryを多く使っているので動かなくなる可能性が大いにあります。

(とくにプラグインは多く使っていてすべての動作確認が面倒。)

動かなくなるリスクを負ってまでjQueryを変える必要性を感じません。それでも『管理画面が重い』などから条件を外すときは自力で解決する力が必要です。

今回はついでに、jqueryがレジスタにないときも何もしません。

jqueryが無いなんてことは処理の流れ上ありえないですが。

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください