如何将 jQuery 后备加入队列 - WordPress

Question

在一个 HTML 模板中，我发现以下两行代码用于加载外部脚本。第一个是 CDN 中非常熟悉的 jQuery 库，但第二个对我来说很奇怪。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>

作为 WordPress 开发人员，我可以使用 wp_enqueue_script() 将第一个加入队列：

function scripts() {
   wp_enqueue_script( 'jquery-latest', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' );
}
add_action('wp_enqueue_scripts', 'scripts');

但我想知道，第二个怎么做？

所以我的问题是双重的：

1. 那行代码是什么？是不是只有在 CDN 失败时才会触发回退？
2. 如何在 WordPress 中将第二行排入队列但对其进行硬编码？

编辑

在@RobSchmuecker 的回答之后，我实际上明白了这一点。但实际上缺乏以这种方式寻求正确执行方式的经验，这是我的代码：

function scripts() {
   wp_enqueue_script( 'jquery-latest', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' );
   wp_localize_script( 'jquery-fallback', 'styleSheetURL', get_stylesheet_directory_uri() );
   wp_enqueue_script( 'jquery-fallback', get_template_directory_uri() . '/js/jquery-fallback.js', array( 'jquery-latest' ) );
}
add_action('wp_enqueue_scripts', 'scripts');

我按照你的方式设置jquery-fallback.js，仅使用以下行：

window.jQuery || document.write('<script src="' + styleSheetURL + '/js/jquery-1.11.1.min.js"><\/script>');

文件层次结构是：

/ functions.php
/ js
    / jquery-1.11.1.min.js
    / jquery-fallback.js

但我无法从本地服务器加载 jQuery。

编辑 2

HTML 输出似乎正确。我从浏览器推测jquery-fallback.js 文件，它显示了前面提到的确切文件。但是我把路径改成了styleSheetURL + '/jquery-1.11.1.min.js。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=3.9.1"></script>
<script type="text/javascript" src="http://localhost/PROJECTDIRECTORY/wp-content/themes/MYTHEME/js/jquery-fallback.js?ver=3.9.1"></script>

但是控制台仍然说至少有 4 个依赖的 jQuery 调用被遗漏了。

Answer 1

是的，如果 CDN 无法正常工作，它肯定看起来像是 fallback。

为了可靠地让它工作，我会制作一个包含以下内容的 JS 文件：

window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>');

打电话给fallback.js，显然src引用了你自己的jQuery副本。然后将依赖于jquery-latest 的fallback.js 文件排入队列。

为确保您可以插入正确的路径，您还可以使用 wp_localize_script http://codex.wordpress.org/Function_Reference/wp_localize_script

<?php wp_localize_script( 'fallback', 'styleSheetURL', get_stylesheet_directory_uri() ); ?> 

这意味着你会将你的 fallback.js 更改为

window.jQuery || document.write('<script src="' + styleSheetURL + 'js/jquery-1.9.1.min.js"><\/script>');

Answer 2

从 4.5 开始，您可以使用一个新功能，请参阅我在 wordpress.stackexchange here 上的详细回答。

简短版：

您可以使用wp_scripts()->add_inline_script()，它将一个js脚本附加到一个排队的脚本，不问任何问题，不检查代码问题（有一个包装函数wp_add_inline_script可以检查但不允许</script>标签，甚至编码）。

这是一个工作示例

function _enqueue_my_scripts() {
  // the normal enqueue
  wp_enqueue_script( 'jquery-cdn', 'https://code.jquery.com/jquery-3.3.1.min.js' );
  // our custom code which will check for the existance of jQuery (in this case)
  wp_scripts()->add_inline_script( 'jquery-cdn',
    "window.jQuery || document.write('<script src=\"".get_template_directory_uri() ."/js/jQuery.js\">\\x3C/script>')", 'after');
}
add_action('wp_enqueue_scripts', '_enqueue_my_scripts', 100);

这会给你

<script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script type='text/javascript'>
window.Swiper || document.write('<script src="http://localhost/wordpress/wp-content/themes/wp-theme/js/jQuery.js">\x3C/script>')
</script>

在您的 HTML 中。

根据您的需要替换“window.jQuery”和“/js/jQuery.js”，但不要触摸该行的其余部分，因为它旨在将正确的行传递给 HTML。

Answer 3

根据 Wordpress 文档，wp_localize_script“使用 JavaScript 变量的数据本地化 注册脚本。” fallback.js 脚本必须先注册。 Rob Schmuecker 让我达到了 90%，但直到我先注册脚本，然后本地化 filePathURL，然后将后备加入队列，后备才起作用。

此外，没有理由创建依赖项，因为这会导致回退脚本也无法加载。这是我的最终代码：

fallback.js

    window.jQuery || document.write('<script src="' + filePathURL + '\/js/vendor/jquery-1.11.2.min.js"><\/script>');

functions.php

    wp_deregister_script( 'jquery' );
    wp_enqueue_script( 'jquery',   'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), '1.11.2', true );

    //Fallback
    wp_register_script( 'fallback', get_template_directory_uri() .  '/js/fallback.js', array(), null, true );
    wp_localize_script( 'fallback', 'filePathURL', get_template_directory_uri() );
    wp_enqueue_script( 'fallback');

效果很好！

Answer 4

除了问题的第一次编辑之外，我建议将排队脚本的 CDN 版本称为“jquery-cdn”或“jquery-latest”或类似名称，并将回退版本称为“jquery”。这样，不需要更改其他入队，并且依赖关系的顺序确保 CDN 版本和回退都在需要“jquery”时入队。

此外，调用顺序不起作用，因为根据docs：

重要！ wp_localize_script() 必须在脚本完成后调用 已使用 wp_register_script() 或 wp_enqueue_script() 注册。

所以你的最终函数看起来像这样：

function scripts() {
   wp_enqueue_script( 'jquery-latest', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' );
   wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-fallback.js', array( 'jquery-latest' ) );
   wp_localize_script( 'jquery', 'styleSheetURL', get_stylesheet_directory_uri() );
}
add_action('wp_enqueue_scripts', 'scripts');