问题描述

我想在我的一个实例 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="//googleajax.admincdn.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>

最佳解决方案

您应该使用 wp_enqueue_script('jquery')加载 jQuery – 这样,如果插件尝试加载它,则不会最终导致多个实例。

要使用 Google CDN,请将其放在 functions.php 中;

wp_deregister_script( 'jquery' );
wp_register_script(
    'jquery',
    'https://googleajax.admincdn.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
);

更新:个人而言,我知道这听起来像一个 cop-out,但是我不会打扰检查 CDN 。 Google 只是那么可靠,而且用户的浏览器缓存也是可能的 (很多网站使用 Google 的 CDN) 。

但是,我有责任回答你有两个选择之一:

  1. 检查服务器端与远程 get,如果失败,服务本地副本 (昂贵,不推荐)

  2. 运行脚本 client-side 来检查 jQuery,并在必要时打印回退

2) 的麻烦在于,您需要在 jQuery 之后注入此脚本,并且在依赖于它的任何其他插件之前,都会触发它们的脚本。我认识的唯一方法就是将’listen’ 用于 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_print_scriptswp_print_scripts 将被触发之后,还会挂起 wp_head,以防在 jquery 之后没有更多脚本打印 (该函数在下一次调用时工作,而不是使用 jQuery 调用的实例) ) 。

次佳解决方案

对于 Wordpress 4.5.0 +:wp_add_inline_script() #

function jquery_enqueue_with_fallback() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery' , '//googleajax.admincdn.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 源代码。

第三种解决方案

有两件事要记住这个答案:

  • 不要在插件或主题中发布。

  • 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://googleajax.admincdn.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 vs HTTP 以避免混合内容错误,并让 WordPress 指定版本号。

参考文献

注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。