DeveWork

WordPress中的jQuery库不起作用的相关问题

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 就是方便面——自己好好理解吧~