如何将常规的jQuery调用替换为Google的CDN调用?

时间:2011-03-18 作者:Geo

我想在我的一个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>

3 个回复
最合适的回答,由SO网友:TheDeadMedic 整理而成

您应该使用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
);
Update: 就个人而言,我知道这听起来像是在逃避责任,但我不会费心检查CDN。谷歌是如此的可靠,而且很可能它已经在用户的浏览器缓存中了(很多网站都使用谷歌的CDN)。

However, 我有责任回答,你有两个选择之一;

使用远程get检查服务器端,如果失败,则提供本地副本(价格昂贵且不推荐)

  • 运行一个脚本客户端来检查jQuery,并在必要时打印回退(2)的问题是,您需要在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 );
    
    对于那些知情者来说,这也是wp_head 紧接着wp_print_scripts 如果之后没有更多的脚本可打印,就会触发jquery (该函数在下一个调用中执行它的工作,而不是在jQuery中调用它的实例)。

  • SO网友:l2aelba

    For 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\' );
    
    Note : 更改版本和您自己的本地jQuery源

    SO网友:JPollock

    关于这个答案,需要记住两件事:

    决不要在发布的插件或主题中这样做```

    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的依赖关系管理系统。此外,使用设置HTTPS与HTTPis_ssl() 避免混合内容错误,并让WordPress指定版本号。

    结束