微信分享代码引发的jQuery调用的问题

最近帮以前的班级做了小网站,因为不需要第三方的社会化分享那么多的分享内容,尝试用代码的方式实现微信分享功能。

网上类似的实现很多,其中js代码很简单,随便找了一个,如下:

 

 

把以上代码添加到 footer.php 以后,竟然没有生效。 按浏览器f12发现报错,大概意思就是$符号不认识。

猜想这应该是由wordpress的jQuery调用机制引起的,无非就是$被Wordpress用了,造成了冲突 。熟悉js的朋友,应该都知道 jQuery.noConflict()这个函数,就是解决这种情况的。 所以 加上以下代码:

var $ = jQuery.noConflict();

这个段微信分享的js代码就能正常使用了。

 

WordPress调用jQuery的方法及区别

做web开发的时候,用jQuery的碰到这种冲突并不多。所以就好奇的了解一下WordPress是这么调用jQuery的。

1、我们知道最常见的方式一般web 页面可以在头文件静态加载的方式,如下:

2、或者调用第三方库网上加载类似:

 

3、但是一般WordPress的主题的头文件header.php里面不会有类似的代码,而是要通过wp_enqueue_script这个钩子函数挂载WordPress 自带的jQuery库
因为在开发WordPress 主题或者WordPress 插件时候,各种插件,主题都可能自己加载jQuery,通过用wp_enqueue_script可以避免重复加载,而非是通过硬编码的方式来加载jQuery。
这样我们就可以看出,之前所以会出现上面说的$符号不识别的问题,是为WordPress 自带的jQuery库会在最后添加jQuery.noConflict()以保证与其他js 库的兼容而引起的。

载入 jQuery 库的建议

一般我们都建议使用第三方的库实现CDN方式的加载,而不是从你的服务器本地加载。这样可以节省服务器资源,而且CDN资源下载速度肯定是要比你的服务器快的。

我们可以使用一下方法替换WordPress 自动的默认jQuery库:
在主题的functions.php文件中加入一下代码:

 

  • wp_deregister_script是注销WordPress 自带的默认的jQuery 库;
  • wp_register_script是自定义jQuery 库;
  • 使用if ( !is_admin() )是为了确保这些脚本和css只在前端加载,不会在后台管理界面加载。

注意: 上面的用的是 googleapis.com在国内肯定是被封了。所以你可以自行替换到国内的CDN服务商,比如百度静态资源公共库,又拍云什么的。