问题描述
我想在我的一个实例 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) 。
但是，我有责任回答你有两个选择之一：
-
检查服务器端与远程 get，如果失败，服务本地副本 (昂贵，不推荐)
-
运行脚本 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_scripts 在 wp_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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。