web-dev-qa-db-ja.com

通常のjQuery呼び出しをGoogleからのCDN呼び出しに置き換える方法は？

私のインスタンスの1つであるWordPressに定型的なテンプレート機能のいくつかを実装したいと思います。

下記のjQuery呼び出しを交換する方法を見つけようとしています

<script type='text/javascript' src='http:/.../wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://.../wp-includes/js/jquery/ui.core.js?ver=1.8.9'></script>

これに：

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
javascriptcdn
5
Geo

JQueryをwp_enqueue_script('jquery')でロードする必要があります-そのようにすると、プラグインがそれをロードしようとしても、複数のインスタンスになりません。

Google CDNを使用するには、これをfunctions.phpに配置します。

wp_deregister_script( 'jquery' );
wp_register_script(
    'jquery',
    'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', 
    null, // Dependencies - none
    null  // Version - use null to prevent WP adding version argument "?ver" in URL
);

更新：個人的には、これは警戒のように聞こえますが、CDNを確認する必要はありません。 Googleは非常に信頼性が高く、とにかくユーザーのブラウザーキャッシュに既に存在している可能性が非常に高い（多くのサイトがGoogleのCDNを使用している）。

ただし、答える私の義務では、2つのオプションのいずれかがあります。

  1. リモートgetでサーバー側を確認し、失敗した場合はローカルコピーを提供します（高価で推奨されません）
  2. JQueryをチェックするクライアント側のスクリプトを実行し、必要に応じてフォールバックを出力します

2）の問題は、このスクリプトをjQueryの直後jQueryに挿入し、それに依存する他のプラグインがスクリプトを起動する前に挿入する必要があることです。これを行うことができる唯一の方法は、jQueryを「リッスン」し、次の呼び出しでJavaScriptを出力することです。

魔法？これをfunctions.phpにドロップします;

/**
 * Print fallback script right after jQuery is printed from queue.
 *
 * @param   string $src
 * @return  string
 */
function wpse_12448_fallback_jquery( $src, $handle = null ) {
    static $run_next = false;

    if ( $run_next ) {
        // Defaults to WP bundled jQuery, but you should use your own that
        // matches the version loaded via CDN.
        $local = includes_url( 'js/jquery/jquery.js' );

        echo <<<JS
<script>window.jQuery || document.write( '<script src="$local"></script>' );</script>

JS;
        $run_next = false;
    }

    if ( $handle === 'jquery' )
        $run_next = true;

    return $src;
}

add_action( 'wp_head', 'wpse_12448_fallback_jquery', 2 );
if ( ! is_admin() )
    add_filter( 'script_loader_src', 'wpse_12448_fallback_jquery', 10, 2 );

知っている人のために、これはjqueryの後に印刷するスクリプトがもうない場合に備えて、wp_headが起動した直後にwp_print_scriptsにフックされます（関数はnext呼び出し（jQueryで呼び出されるインスタンスではありません）。

15
TheDeadMedic

Wordpress 4.5.0の場合+ ：wp_add_inline_script()＃

function jquery_enqueue_with_fallback() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery' , '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, '3.1.1', true );
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="'.esc_url(get_template_directory_uri()).'/libs/js/jquery.js"><\/script>\')' );
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts' , 'jquery_enqueue_with_fallback' );

注：バージョンと独自のローカルjQueryソースを変更してください。

2
l2aelba

この答えについて覚えておくべき2つのこと：

  • リリースのためのプラグインやテーマでこれをしないでください。
  • WordPressプラグインは提供されているjQueryの正しいバージョンに依存しているので、私はjQuery 3を使用しておらず、バージョン番号をハードコーディングしていません。代わりに、WordPressにCDNからロードされたバージョンのバージョン番号を設定させます。

`` `

add_action( 'init', function(){
    //Only act if in admin
    if (  ! is_admin()) {
        //set protocol dynamically
        if( is_ssl() ){
            $protocol = 'https';
        }else {
            $protocol = 'http';
        }

        /** @var WP_Scripts $wp_scripts */
        global  $wp_scripts;
        /** @var _WP_Dependency $core */
        $core = $wp_scripts->registered[ 'jquery-core' ];
        $core_version = $core->ver;
        $core->src = "$protocol://ajax.googleapis.com/ajax/libs/jquery/$core_version/jquery.min.js";

        ///Use jQuery migrate if WP_DEBUG
        if ( WP_DEBUG ) {
            /** @var _WP_Dependency $migrate */
            $migrate         = $wp_scripts->registered[ 'jquery-migrate' ];
            $migrate_version = $migrate->ver;
            $migrate->src    = "$protocol://cdn.jsdelivr.net/jquery.migrate/$migrate_version/jquery-migrate.min.js";
        }else{
            /** @var _WP_Dependency $jquery */
            $jquery = $wp_scripts->registered[ 'jquery' ];
            $jquery->deps = [ 'jquery-core' ];
        }

    }


}, 11 );

`` `

私はまだWordPressの依存関係管理システムを使っていることに注意してください。また、混在するコンテンツエラーを回避するためにis_ssl()を使用してHTTPSとHTTPを設定し、WordPressにバージョン番号を指示させます。

2
JPollock