web-dev-qa-db-ja.com

安全コールバックでcdnからのスクリプトを使用してwp enqueueスクリプト

私はリモートCDNからいくつかのスクリプトとスタイルをインクルードしたいのですが...この場合はブートストラップとsimilerファイルですが、CDNが何らかの理由でダウンした場合のためにコールバックの形でセーフティネットを提供したいです.

私はいくつかのコードを追加するでしょうが、私は本当にこれをどうやって承認するのかわからない...

これは私が現在使用している通常のwp_enqueue_scriptの例です： 

wp_enqueue_script( 'bootstrap', 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js', array('jquery'), 3.3, true);
wp-enqueue-scriptcdncallbacks
6
Sagive SEO

受け入れられた答えは全く間違っています。プログラミングの経験が少ない人でも、「自分のスクリプトのコピーをキャッシュして、20分ごとにget_url呼び出しを実行する」というようなことを推奨することは決してないため、OP'S質問に対する大きな誤解があると思います。

@Paul G.は、すべてのページがロードされるたびにCDNからロードする意味がないと言っています。

これがCDNを使用する全体的なポイントです。 CDNからロードせずにキャッシュコピーをロードする場合、クライアントはそれをサーバからダウンロードする必要があります。あなたはニュージーランドのオークランドにいて、あなたのクライアントはロンドンにいるかもしれません。あなたのサーバーは、クライアントに近いCDNと一致することは決してできません。

さらに、CDNはNGINX/Varnishのようなものを使用しています。大規模なキャッシュはサーバーにさえ触れません。あなたのサーバはロードバランシングでNGINXのようなリバースプロキシを使用しているかもしれませんし、静的ファイルを処理する大きなキャッシュを持っているかもしれないので、あなたのファイルのコピーをロードするためにそれはスタック全体を通過する必要があります。これは、キャッシュされた静的ファイルをロードすることで得られる速度にはほど遠いものです。

何をするにしても、できる限りCDNを使用してください。そうすれば、ページを読み込むたびにそうなります。

最後に、CDNがダウンするのではないかと心配です。それが起こる場合、単純な回避策はフォールバックとして2または3他のCDNを言及することです、そしてプライマリCDNがロードに失敗した場合、あなたは簡単にリスナーを接続して他からロードすることができます。

すべての主要なCDNがダウンした場合、あなたのサイトが機能しない世界で唯一のサイトにはならないでしょう。Facebook、Imgur、Flckr、そしてあなたと一緒に失敗する他の10億のWebサイトのようなものを追加することができます。その時点では、外に出て空を見た方が良いかもしれません。おそらく、人類の歴史の中で世界初のデータセンターの失敗を引き起こしたUFOが見つかるでしょう。

簡単な答え：Cdnを使ってください。

代替URL用のrequirejsスクリプトの例。

   requirejs.config({
   enforceDefine: true,
   paths: {
       jquery: [
        '//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min',
        //If the CDN location fails, load from this location
        //xyz.com/jquery.min.js
      ]
   }
   });
6
user2076066

私は前の記事を取り、それを使って2つのことをしました：

  • ネイティブのWordPress http呼び出し機能を使用します
  • cDNが20分間稼働しているという事実をキャッシュします（これを微調整できます）。あなたは本当にすべてのページロードでCDNコンテンツを取得したくありません。あなたがそうするときあなたのサイトをCDNsでスピードアップする意味がありません。
$get_the_url = 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js';

$cdnIsUp = get_transient( 'cnd_is_up' );

if ( $cdnIsUp ) {

    $load_source = 'load_external_bootstrap';

} else {

    $cdn_response = wp_remote_get( $get_the_url );

    if( is_wp_error( $cdn_response ) || wp_remote_retrieve_response_code($cdn_response) != '200' ) {

        $load_source = 'load_local_bootstrap';

    }
    else {

        $cdnIsUp = set_transient( 'cnd_is_up', true, MINUTE_IN_SECONDS * 20 );
        $load_source = 'load_external_bootstrap';
    }
 }

add_action('wp_enqueue_scripts', $load_source );

function load_external_bootstrap() { 
    wp_register_script( 'bootstrap', 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js', array('jquery'), 3.3, true); 
    wp_enqueue_script('bootstrap'); 
}

function load_local_bootstrap() {
    wp_register_script('bootstrap', get_bloginfo('template_url').'/js/bootstrap.min.js', __FILE__, array('jquery'), 3.3, true);
    wp_enqueue_script('bootstrap'); 
}
8
Paul G.

このようなことを試して最初にCDNのバージョンをテストし、それが利用可能かどうかに基づいて条件付きでロードすることができます。

$get_the_url = 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js';
    $test_the_url = @fopen( $get_the_url,'r' );

    if ( $test_the_url !== false ) {

        function load_external_bootstrap() { 
        wp_register_script( 'bootstrap', 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js', array('jquery'), 3.3, true); 
        wp_enqueue_script('bootstrap'); 

    }

    add_action('wp_enqueue_scripts', 'load_external_bootstrap');

    } else {

        function load_local_bootstrap() {
        wp_register_script('bootstrap', get_bloginfo('template_url').'/js/bootstrap.min.js', __FILE__, array('jquery'), 3.3, true);
        wp_enqueue_script('bootstrap'); 
    }

    add_action('wp_enqueue_scripts', 'load_local_bootstrap');
    }
2
Matt Royal

@ciroは、接続中のサーバーがこれに対して適切なテストではないということに絶対に正当です。フォールバックのポイントは、クライアントに確実にドキュメントを提供できるようにすることです。

（例として）Googleがブロックしている国があります。 Webサーバーがカリフォルニアにあり、訪問者がGoogleがブロックされている国にいる場合、このPHPサーバーサイドコールはTRUEとテストされますが、スクリプトはユーザーに提供されません。

ローカルバックアップでエンキューし、サーバーではなくクライアントをテストする方法については、 jQueryフォールバックをエンキューする方法 - WordPress を参照してください。

2
Mark

私は二つのラッパー関数を思いついた。

function wp_enqueue_cdn_script( $handle, $src_cdn = false, $src_local = false, $deps = array(), $ver = false, $in_footer = false ) {
    $cdnIsUp = get_transient( $handle . '_script_cdn_is_up' );
    if ( $cdnIsUp ) {
        wp_enqueue_script( $handle, $src_cdn, $deps, $ver, $in_footer );
    } else {
        $cdn_response = wp_remote_get( $src_cdn );
        if ( is_wp_error( $cdn_response ) || wp_remote_retrieve_response_code( $cdn_response ) != '200' ) {
            wp_enqueue_script( $handle, $src_local, $deps, $ver, $in_footer );
        } else {
            $cdnIsUp = set_transient( $handle . '_script_cdn_is_up', true, MINUTE_IN_SECONDS * 20 );
            wp_enqueue_script( $handle, $src_cdn, $deps, $ver, $in_footer );
        }
    }
}

function wp_enqueue_cdn_style( $handle, $src_cdn = false, $src_local = false, $deps = array(), $ver = false, $media = 'all' ) {
    $cdnIsUp = get_transient( $handle . '_style_cdn_is_up' );
    if ( $cdnIsUp ) {
        wp_enqueue_style( $handle, $src_cdn, $deps, $ver, $media);
    } else {
        $cdn_response = wp_remote_get( $src_cdn );
        if ( is_wp_error( $cdn_response ) || wp_remote_retrieve_response_code( $cdn_response ) != '200' ) {
            wp_enqueue_style( $handle, $src_local, $deps, $ver, $media);
        } else {
            $cdnIsUp = set_transient( $handle . '_style_cdn_is_up', true, MINUTE_IN_SECONDS * 20 );
            wp_enqueue_style( $handle, $src_cdn, $deps, $ver, $media);
        }
    }
}

しかし、それが本当に役立つかどうか私は思っています。それはサーバーを過負荷にします、そして私たちはサーバーがCDNに達することができればクライアントもそうすることをふりをしています。

2
Ciro Mattia Gonano