jQuery 不在 WordPress 中排队

时间:2021-04-08 17:10:49

标签: php jquery wordpress

我正在尝试用 CDN 版本替换默认的 WordPress jQuery。我一直都能做到这一点,但我突然遇到了问题 - 我不确定是不是因为最新的 WordPress 更新。我在functions.php中使用这段代码:

function replace_default_jquery_with_fallback() {

    $ver = '1.12.4';
    $migrateVer = '1.4.1';

    // Dequeue first then deregister
    wp_dequeue_script( 'jquery' );
    wp_dequeue_script( 'jquery-migrate' );
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-migrate' );

    // Fallback
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="' . includes_url( '/js/jquery/jquery.min.js' ) . '"><\/script>\')' );
    wp_add_inline_script( 'jquery-migrate', 'window.jQuery||document.write(\'<script src="' . includes_url( '/js/jquery/jquery-migrate.min.js' ) . '"><\/script>\')' );

    wp_enqueue_script( 'jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", '', $ver, false );
    wp_enqueue_script( 'jquery-migrate', "//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/$migrateVer/jquery-migrate.min.js", '', $migrateVer, false );
}
add_action( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');

这将输出到页面的头部:

<link rel='dns-prefetch' href='//ajax.googleapis.com' />
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />

但实际脚本不会排队。如果我将“-test”附加到它们出现的任何一个句柄上,但内联后备脚本不会。

非常感谢任何帮助,谢谢,
泰勒

编辑: 经过一番搜索,我将代码修改为以下内容:

add_action( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');
function replace_default_jquery_with_fallback() {
    $wp_admin = is_admin();
    $wp_customizer = is_customize_preview();

    if ( $wp_admin || $wp_customizer ) {
        // echo 'We are in the WP Admin or in the WP Customizer';
        return;
    } else {
        // Start of jQuery replacing
        $ver = '1.12.4';
        $migrateVer = '1.4.1';

        // Dequeue first then deregister
        wp_dequeue_script( 'jquery' );
        wp_dequeue_script( 'jquery-core' );
        wp_dequeue_script( 'jquery-migrate' );

        wp_deregister_script( 'jquery' );
        wp_deregister_script( 'jquery-core' );
        wp_deregister_script( 'jquery-migrate' );

        wp_register_script( "jquery-core", "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", array(), $ver, false );
        wp_register_script( "jquery-migrate", "//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/$migrateVer/jquery-migrate.min.js", array(), $migrateVer, false );
        wp_register_script( "jquery", false, array("jquery-core", "jquery-migrate"), null, false );

        // Fallback
        wp_add_inline_script( 'jquery-core', 'window.jQuery||document.write(\'<script src="' . includes_url( '/js/jquery/jquery.min.js' ) . '"><\/script>\')' );
        wp_add_inline_script( 'jquery-migrate', 'window.jQuery||document.write(\'<script src="' . includes_url( '/js/jquery/jquery-migrate.min.js' ) . '"><\/script>\')' );

        wp_enqueue_script( 'jquery' );
    }
}

仍然没有运气...

2 个答案:

答案 0 :(得分:0)

您正在尝试通过将版本号存储在变量中来动态添加脚本。你可以这样做:

function replace_default_jquery_with_fallback() {

    $ver = '1.12.4';
    $migrateVer = '1.4.1';

    // Dequeue first then deregister
    wp_dequeue_script( 'jquery' );
    wp_dequeue_script( 'jquery-migrate' );
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-migrate' );

    // Fallback
    wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="' . includes_url( '/js/jquery/jquery.min.js' ) . '"><\/script>\')' );
    wp_add_inline_script( 'jquery-migrate', 'window.jQuery||document.write(\'<script src="' . includes_url( '/js/jquery/jquery-migrate.min.js' ) . '"><\/script>\')' );

    wp_enqueue_script( 'jquery', "https://ajax.googleapis.com/ajax/libs/jquery/".$ver."/jquery.min.js", '', $ver, false );
    wp_enqueue_script( 'jquery-migrate', "https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/".$migrateVer."/jquery-migrate.min.js", '', $migrateVer, false );
}
add_action( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');

这将帮助您将 jquery cdn 包含在您的 wordpress 站点中,而无需将 https: 与您的 cdn 链接一起使用,它将无法工作,并且可能会在前端显示错误。

答案 1 :(得分:0)

我可以在这里找到解决方案:https://wordpress.stackexchange.com/questions/209091/gravity-forms-loading-jquery

我认为 Gravity Forms,即使页面上没有表单,也会劫持 'jquery' 句柄,使我无法修改队列。使用上面链接的帖子中的解决方案解决了我的问题(将重力表单脚本移动到页脚,我在页眉中加载了我的 jQuery):

add_filter('gform_init_scripts_footer', '__return_true');