如果您在 WordPress 管理区域(或其他地方)可能看到“jQuery 未定义”错误,这是许多 WordPress 用户遇到的常见问题。
在本指南中,我们将讨论此错误发生的原因,更重要的是,如何修复它。我们将用简单的术语解释所有内容,因此即使您不是开发人员,您也可以快速跟进并解决问题。
什么原因导致“jQuery 未定义”错误?
jQuery 是 WordPress 中广泛使用的 JavaScript 库,可帮助运行许多交互式功能。但是,有时它可能无法正确加载,这可能会影响您网站的功能。
该错误出现在开发人员工具的Console 选项卡下的中,因此许多用户可能不会注意到它,直到他们的站点出现问题。
如果您看到“jQuery is not defined”错误,则表示 WordPress 无法正确加载它。它通常源于几个常见的原因:
- 过时的主题或插件:当他们的主题或插件未更新以匹配最新版本的 WordPress 时,许多用户会遇到此错误。我们经常看到这种情况发生在 WordPress 重大更新之后。
- 脚本加载不当:jQuery 必须在其他 JavaScript 文件之前加载。否则,依赖于 jQuery 的脚本将中断。如果主题或插件没有正确编码以将脚本排入队列,通常会发生这种情况。
- JavaScript 冲突:您网站上运行的其他脚本可能与 jQuery 冲突,尤其是在它们未正确加载的情况下。此冲突可能会中断 jQuery,从而导致错误。
- CDN 故障:某些站点依赖于内容交付网络 (CDN) 上托管的 jQuery。如果 CDN 不可用或被阻止,则站点将无法加载 jQuery,从而导致错误。
所有这些问题都会阻止 jQuery 顺利运行。但别担心 – 凭借我们的经验,我们可以指导您完成解决问题的解决方案。
1. 更新 WordPress、主题和插件
过时的软件是导致“jQuery 未定义”错误的最常见原因之一。过时的主题或插件可能与最新版本的 WordPress 不兼容,这可能会导致脚本冲突。要解决此问题,请执行以下操作:
首先,确保您的 WordPress 核心已更新。导航到控制面板 » 更新,如果有可用更新,请单击“更新到版本 X.X.X”。
您的 WordPress 插件更新将列在核心更新下方。
您可以选择所有这些,然后单击“更新插件”。
最下面,您将看到 WordPress 主题的更新。
只需选择所有这些,然后单击“更新主题”。
2. 检查 jQuery 是否正确加载
在探索更高级的解决方案之前,重要的是要检查您的网站是否真的加载了 jQuery。此步骤可帮助您确认 jQuery 是否可用并正常运行。
只需右键单击 WordPress 网站上的任意位置,然后选择“查看页面源代码”。
提示: 或者,您可以按 Ctrl + U 在 Windows 上或 Cmd + Option + U 在 Mac 上访问页面源。
这将向您显示页面的原始 HTML 和 JavaScript。
接下来,按 Ctrl +F(或 Mac 上的 Cmd + F)调出搜索栏,然后键入“jquery.min.js”。
如果 jQuery 已正确加载,您应该会在代码中看到对它的引用。
查找 jQuery 的另一种方法是使用浏览器的检查工具。只需转到 ‘Network’ 选项卡并重新加载页面。
提示: 在 Windows 设备上,您可以通过按键盘上的 F12 来访问检查工具。对于 Mac,点击 选项 + Cmd + I.
通过在搜索栏中键入 ‘jquery’ 来筛选网络活动。如果加载了 jQuery,您将在此处看到它。
在这两种方法中如果您没有看到 jQuery 加载,则问题可能在于它在 WordPress 中的排队方式。在以下步骤中,我们将指导您解决此问题。
3. 添加 jQuery 回退
有时,您网站上的脚本可能正在使用存在连接问题的 CDN 加载 jQuery。在这种情况下,它将无法加载 jQuery 并导致错误。
要解决此问题,您可以向 WordPress 网站添加 jQuery 回退。这可确保始终加载 jQuery。
您需要将其添加到您网站的 head 部分以确保它首先加载。但是,我们不建议直接编辑主题文件。我们看到人们在更新主题和他们添加的代码时丢失了他们的更改。
在 WordPress 中添加自定义代码的最佳方法是使用 WPCode 插件。它是一个代码片段管理器,使您能够安全地添加自定义代码而不会破坏您的网站。
首先,安装并激活 WPCode 插件。有关详细信息,请参阅我们关于安装 WordPress 插件的教程。
注意:还有一个名为 WPCode Lite 的免费版本。
激活后,转到 Code Snippets » + Add Snippet。然后,单击“添加您的自定义代码(新代码段)”下的“使用代码段”按钮。
在代码编辑器中,为您的代码段指定一个名称,例如“jQuery Fallback”。
之后,为“代码类型”选择“HTML 片段”。
接下来,将以下代码粘贴到 ‘Code Preview’ 框中:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/wp-includes/js/jquery/jquery.js"></script>')
</script>
然后,向下滚动到 ‘Insertion’ 部分。
在这里,您可以告诉 WPCode 在何处加载此代码。确保选择“站点范围标题”。
最后,单击顶部的 ‘Save Snippet’ 按钮以保存您的自定义代码。
之后,不要忘记通过将开关切换到“active”来激活代码段。
4. 修复脚本加载顺序(高级)
“jQuery is not defined”错误的另一个常见原因是 jQuery 在依赖它的其他脚本之后加载。修复脚本加载顺序可确保始终首先加载 jQuery,从而防止冲突。
如果您知道哪个脚本依赖于 jQuery,则可以通过将 jQuery 添加为依赖项来正确地将该脚本排入队列。
如果 ‘jQuery is not defined’ 错误是由于 jQuery 在其他依赖它的脚本之后加载引起的,你可以使用 WPCode 修复脚本加载顺序。
首先,安装并激活 WPCode 插件,或选择名为 WPCode Lite 的免费版本。
激活后,转到 Code Snippets » + Add Snippet 并单击“添加您的自定义代码(新代码段)”下的“使用代码段”按钮。
在代码编辑器中,为您的代码段指定一个名称,例如 ‘Fix Script Loading Order’,然后选择 ‘PHP snippet’ 作为你的代码类型。
然后,添加以下代码以确保 jQuery 作为任何自定义脚本的依赖项排队:
wp_enqueue_script( 'your-script-handle', get_template_directory_uri() . '/js/your-script.js', array( 'jquery' ), null, true );
不要忘记将 ‘your-script-handle’ 替换为有意义的名称来识别脚本。并将 ‘/js/your-script.js’ 替换为主题 /js/ 文件夹中的实际脚本文件名。
代码中的array('jquery')
部分确保首先加载 jQuery。
添加代码后,向下滚动到 ‘插入’ 选项并选择 ‘Site Wide Header’ 以确保脚本加载到您网站 HTML 的正确部分。
最后,单击顶部的 ‘Save Snippet’ 按钮以保存您的自定义代码。
之后,不要忘记通过将开关切换到“’active”来激活代码段。
使用 WPCode 将脚本正确排队可确保 jQuery 以正确的顺序加载。如果这是问题的根源,这应该可以解决错误。
5. 编辑 wp-config.php 以修复 jQuery 加载问题
如果其他方法不起作用,编辑 wp-config.php
文件可以通过控制 WordPress 处理脚本加载的方式来提供帮助。
如果脚本串联或文件路径问题导致“jQuery is not defined”错误,则此方法非常有用。
以下是应用此方法的方法:
首先,访问您的文件。您可以使用 FileZilla 等 FTP 客户端或通过访问托管控制面板中的文件管理器来执行此操作。wp-config.php
该文件位于 WordPress 安装实例的根目录中(通常在文件夹中)。wp-config.php
public_html
找到文件后,打开它进行编辑,并在显示以下内容的行之前添加以下代码:/* That’s all, stop editing! Happy blogging. */
** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(FILE) . '/');
define('CONCATENATE_SCRIPTS', false);
以下是此代码的作用:
- 该定义可确保 WordPress 知道其核心文件的正确路径,这可以防止 jQuery 加载问题。
ABSPATH
- 该行禁用脚本串联。这会强制 WordPress 单独加载每个脚本,从而防止在合并脚本时出现冲突。
CONCATENATE_SCRIPTS
添加此代码后,保存更改并重新加载站点,以查看错误是否已解决。
禁用脚本串联可以解决 jQuery 问题,尤其是当其他方法不起作用时。