jquery - 如何将 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 无法工作。

为了可靠地让它工作，我将创建一个包含以下内容的 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>');