WordPress 中的jQuery 库问题曾经困扰了我一段时间。如果仅仅加载WordPress 自带的jQuery 库,在使用一些jQuery 插件的时候明明是代码没有错误,但就是不起作用,该有的效果不能实现;但加载了原版的jQuery 库却又可以了,这样一来却同时加载了两个jQuery 库,网页速度拖慢了而且根本没有必要。
后来才了解到:为了防止与其他 JS 库(如 YUI)冲突,WordPress 内置 jQuery 库的末尾都在原版的基础上加入了 jQuery.noConflict()
这个东东,以至于在jQuery 代码中用$ 代替jQuery 的写法不能识别,一些功能不起作用的原因正是由此而来。
如何解决这个问题,网络上有以下解决方案:
方案一:将相关js代码中的$ 手动改为 jQuery。
比如原来的代码是:
$(document).ready(function(){
$("p").after("Hello");
});
需要改为:
jQuery(document).ready(function(){
jQuery("p").after("Hello");
});
方案二:不加载WordPress自带的jQuery 库,改用官方或者第三方的jQuery 库。
貌似WordPress 默认是加载自带的jQuery 库的,首先你要取消这个功能,使之在前台默认不加载自带的jQuery 库:
打开/wp-includes/script-loader.php文件,以“jquery.js”为关键词查找,在第127行能找到这么一句(以WordPress 3.5.1为例):
$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', array(), '1.8.3' );
替换为:
if(is_admin()){$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.8.3' );}
因为在后台必须得用到这个库,只能加个判断,让其只在后台下运行。
更新:如果查看源代码分享加载了WordPress 自带的jquery 库,那么肯定是主题或者插件加载的(非登录状态下),因此,按照下面的代码可予以取消(其实就开发而言,不建议这么做):
你的主题也可能加载也会加载WordPress 自带的jQuery 库。如果你想取消,就需要在主题文件中找到如下关键代码,删除或注销之:
wp_enqueue_script('jquery');
当然,既然主题自动加载了,那肯定是有它的用处,如果删除了,一些主题功能可能会失效。
接下来就是改用官方或者第三方的jQuery 库,请直接参考:
《为你的WordPress 选择最佳的第三方jQuery 库》
我的话是两个都用上。
参考WordPress官方文档:zh-cn:函数参考/wp enqueue script
相关知识:jQuery 与Javascript 的关系
jQuery 是一个 JavaScript 函数库。jquery 对javascript进行扩展,封装,让javascript更好用,更简单。看过一个比喻:如果说JavaScript 是面条,那么jQuery 就是方便面——自己好好理解吧~