jQuery CDN和WordPress主题冲突

2012年8月6日发布在Wordpress |1评论中


自3.4版最近更新以来,许多用户开始遇到网站无法正常工作的问题,特别是由于JavaScript功能(如日期选择器、自动补全器等)无法像以前那样工作。

对于像我这样的插件开发人员来说,这是@!+中的一个痛苦因为我现在看到用户在几周内每天都会遇到这个问题,很明显,在任何情况下,问题都是从CDN,特别是谷歌,强制加载jQuery库文件。

从外部源加载jQuery库的目的是加快页面加载时间,所以难怪主题制作者会急于进行这种快速升级。

然而,虽然理论上这样做没有什么错,但他们是这样做的大错特错了! The 在网上流传的各种误导性帖子很可能是导致这一广泛问题的原因,现在我们开始看到随着时间的推移而产生的后果。

为什么这是错误的?

正如我前面提到的,从CDN加载文件没有什么错,但是,主题有两个主要错误:

第一个主要问题是,我还没有看到一个主题能够加载WordPress使用的最新jQuery版本!这带来了很多问题,因为依赖jQuery库的其他插件被迫使用过时的库,这可能会与使用更高版本库编写的某些代码冲突。

第二个主要错误是,他们一开始就自作自受。我的观点是,主题不能与jQuery库和WordPress依赖性相混淆。主题必须考虑到将要安装的插件,并且这些插件应该可以访问WordPress提供的标准库。

我如何检查我是否有这个问题?

现在的主流浏览器都有自己的代码查看器,这使得检查加载了哪些脚本变得很容易。下面的屏幕截图显示了如何在Google Chrome中实现这一点,这与FireFox和Firebug扩展类似。

要打开开发人员窗口,请右键单击网页上的任意位置,然后单击“Inspect Element”。您将看到一个类似于下面的窗口,单击来源(在FireBug中是脚本)选项卡,然后在那里查看脚本:

如您所见,jquery.js文件的位置在Google服务器上,单击该文件会显示包含版本号的内容(通常也在URL中)。在本例中,主题是加载jQuery 1.4.4。

我的主题在哪里实现了这一点,我该如何修复它?

这是我最近遇到的最常见的问题,也是这篇文章的灵感来源。谢天谢地,大多数主题所采用的方法都是相同的,或者类似的,因此很容易识别。不幸的是,并非所有人都会这么幸运。

在这两种情况下,当试图找到完成此操作的位置时,您需要使用文本编辑器中的搜索功能。

典型–functions.php

这是通常的情况。

wp_deregister_script('jquery');wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',false,'1.4.4');wp_enqueue_script('jquery');

解决方法很简单,只需删除它!WordPress将开始加载自己的jQuery库副本。

更糟–header.php

不太常见,但令人惊讶的是,有些主题继续使用纯html硬编码jQuery文件,类似于:

<script type=“text/javascript”src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" />

这更糟糕,因为它违背了WordPress用来在通常在header.php文件中执行wp_head()函数期间加载正确脚本的整个依赖系统。

修复包括一到三个步骤(取决于主题制作者犯了多少错误):

步骤1–拆下上面的管路。

步骤2(如果步骤1失败)–您的主题可能正在做一些更为滑稽的事情,它没有在文档头中包含wp_head()PHP函数,这意味着像Events Manager这样的插件不能包含自己的javascript文件。尝试用以下内容替换您刚才删除的行:

<?php wp_head();?>

步骤3(如果步骤2失败)-如果必须添加wp_head(),那么很可能还需要添加wp_footer(),这是在body结束HTML标记上方的footer.php文件中完成的。

一旦你解决了这个问题您的主题现在可以与更多插件一起使用。然而,如果你不得不做第二步或第三步,你可能想重新考虑你的主题是从哪里来的(如果你是自己做的,我希望你学到了教训!)。

最糟糕的–未知

你的主题制作人决定通过在无数自定义包含文件中的某个地方进行此修改来获得超级用户的喜爱并展示他们的技能。最好的办法是使用搜索工具,查看所有主题文件中的单词,如jquery或google.com。如果header.php文件中没有进行mod,则可能会使用function.php的方法。

如果你的主题找到了另一种巧妙的方法……我会说你的主题太聪明了,不适合在WordPress上使用,省去你的头疼,继续前进。

托管外部库的“正确方法”

虽然有多种方法可以做到这一点,但最明智的两种方法是:

  • 使用这样的插件,比如使用谷歌库并确保根据您的WP版本加载正确的jQuery版本。
  • 将所有javascript、css、图像和其他文件托管在CDN上,如Amazon S3或CloudFront。它既便宜又有效。缓存插件,例如超级缓存W3总缓存使其易于设置并有良好的文档记录。

在这两者之间,如果您可以使用minify函数(W3TC具有此函数)将所有js文件合并到一个缓存文件中,那么如果您的最终目标是提高页面速度和/或减少服务器负载,那么最好的选择是第二个。然而,如果你有预算,或者你在使用缓存插件缩小脚本时遇到问题,那么使用谷歌库仍然会有很大帮助,强烈推荐。

正如你所看到的,这些与你的主题无关,这是应该的!