jQuery 是最流行的 JavaScript 库。它允许高度简化前端开发，因为它提供了许多现成的插件。无需创建新内容，您只需添加插件并解决网站的任何问题。
它也经常在 WordPress 中用于简化网站的前端部分。此外，它甚至默认添加到 WordPress。当您为您的网站安装新模板时，您可能会遇到这样一种情况，即由于旧版本的 jQuery 连接到 WordPress，您需要的附加功能不起作用。这个问题的解决方案，其实并没有那么复杂。要更新 WordPress jQuery，您只需要添加几行代码。然而，使用这个库有一些有趣的细微差别。所以，让我们更详细地看一下这个问题。
在本文中，我们将向您展示如何在 WordPress 中正确禁用和启用 jQuery，并下载最新版本。我们希望这些信息对您有用。文章中会有很多代码示例。
什么是 jQuery？
为了更好地理解 WordPress jQuery，您需要做的第一件事是复习有关 javascript 的基础知识。 它是一种主要的语言，通常用于在网站上进行更改、计算和验证数据。
除此之外，在 javascript 的帮助下，您还可以更改或更新 HTML 和 CSS。 简而言之，您可以自由制定规则并设计您的网站结构和内容。 由于各种不同的脚本库的可用性，这一切都是可能的。
JQuery 是一种快速、小巧且功能齐全的脚本库。 它是一个开源库，您可以在它的帮助下添加或创建前端功能。 例如，如果您在网站上看到任何类型的动态功能，例如旋转或滑块，则表示 jQuery 正在工作。
为什么你应该使用 WordPress jQuery？
使用 WordPress jQuery 时，您会发现有很多您没有想到的优势。 除了用于在您的网站上创建动态和吸引人的功能外，它还可以帮助减少有限的带宽拥塞。
这一切皆有可能，因为在 jQuery 的帮助下，您可以直接在浏览器中运行任何移动元素，而无需重新加载网页。
什么是“$ is not a function WordPress”错误？
如果您使用的是 WordPress，默认情况下它无法将“$”理解为 jQuery，因此它会在您的屏幕上触发错误消息“$ is not a function WordPress”错误。 它实际上发生在代码在 jQuery 库之前开始执行时。
让我们通过一个例子来理解它，假设一个主题或插件在调用正确的jQuery库之前调用了一个代码，就会出现错误。 因此，要修复此错误，您必须进行某些更改，我们在下面的部分中进行了说明。
在 WordPress 中使用“$”而不是“jQuery”
我们发现，WordPress 带有 jQuery。 要在您的插件和主题中正确使用它，需要使用wp_enqueue_script(),您需要将以下代码添加到 functions.php 文件中：
wp_enqueue_script("jquery");
这里的诀窍是默认情况下 jQuery 的副本在兼容模式下工作。 这意味着众所周知的快捷方式 $ 将不起作用。 这样做是为了不与使用美元符号的其他 JavaScript 库产生冲突，例如 MooTools 或 Prototype。
许多插件创建者和主题开发人员都知道这一点，并使用 jQuery 而不是“$”来确保产品安全。
/* Normal jQuery you see everywhere */
$("#some-element").yaddaYaddaYadda();
/* "Safe" jQuery you see in WordPress */
jQuery("#some-element").yaddaYaddaYadda();
当您在脚本中多次编写查询行时，会使它们的可读性复杂化并过度增加脚本大小。 结果，该站点超载并且运行缓慢。 让我们停止这样做。
如果脚本在页脚中加载（大多数情况下都会这样做），则可以将代码包装在匿名函数中。 $ 将被转入其中：
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
如果您需要在标题中加载所有脚本，您可能必须使用文档准备功能。 $ 将被发送到那里：
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
现在您可以在添加到 WordPress 网站的 jQuery 脚本中安全地使用 $ 符号。
如何将 jQuery 添加到您的 WordPress 自定义主题或插件中
要在 WordPress 网站上运行 jQuery 脚本，您需要添加适当的库。 但幸运的是，WordPress 结构已经包含了所有必要的库。 要使它们起作用，您只需要将它们连接到您的WordPress主题。
jQuery 如何连接到 WordPress
在 WordPress 中，jQuery 库会自动连接，如果在您的模板中的 HEAD 部分中有以下 PHP 代码：
<?php wp_head(); ?>
在 WordPress 中正确注册 jQuery
因此，在连接 WordPress jQuery 之前，打开 HTML 代码页面并确保 jQuery 之前没有被活动主题或任何插件连接。 所有连接的 WordPress 脚本都应该使用 wp_enqueue_script() 函数注册和加载。 插件有必要检测连接的特定库，识别依赖关系，并且不会再次加载相同的脚本。
如果网站 HTML 代码没有提到 jQuery，那么您必须在活动主题的 functions.php 文件中启动它的连接。 jQuery 是最容易连接到 WordPress 的，因为它是默认注册的。
要从 WordPress 自动连接 WordPress jQuery 库，您需要将以下行添加到主题的 functions.php 文件中：
function theme_scripts_method(){
wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'theme_scripts_method' );
检查 WordPress jQuery 负载
如果你做的一切都正确，那么在你网站的源代码的 HEAD 部分你应该会看到类似的行：
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'https%3A%2F%2Fsitename.tld%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%3Fver%3D1.12.4'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'https%3A%2F%2Fsitename.tld%2Fwp-includes%2Fjs%2Fjquery%2Fjquery-migrate.min.js%3Fver%3D1.4.1'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
要激活源代码视图，请在浏览器窗口中按 Ctrl + U。
如何使用与 WordPress 不同的 jQuery 版本
考虑另一种情况，当 jQuery 已经连接到主题或插件时，但您需要另一个版本。 此外，您可能需要从其他来源加载 jQuery，例如 CDN。
首先，您需要注销之前加载的 jQuery：
wp_deregister_script('jquery');
然后注册一个新的。 例如，这种方式：
wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js', false, null);
wp_enqueue_script('jquery');
请记住，wp_register_script() 函数有几个参数： wp_register_script($handle, $src, $deps, $ver, $in_footer);
- $handle — 快捷方式，唯一的脚本名称；
- $src — 脚本路径；
- $deps — 加载的脚本所依赖的脚本数组；
- $ver——版本；
- $in_footer — 在页脚中下载脚本。
如何更新 WordPress jQuery？
当您要更新库时，整个过程由两部分组成。 首先，您需要禁用 WordPress jQuery 中的脚本，然后重新激活它。 为此，请使用 wp_deregister_script、wp_register_script、wp_enqueue_script 函数。 他们的意思是什么？
- wp_register_script — 注册要连接的脚本（它不会自动加载）；
- wp_enqueue_script — 加载网站/主题/插件的脚本；
- wp_deregister_script — 删除之前注册的脚本。
functions.php 文件中完整的 jQuery 更新代码如下所示：
// Remove themes old version of jQuery and load a compatible version
function my_update_jquery () {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, false, true);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', my_update_jquery);
这里有几个细微差别：
- ajax.googleapis.com 的链接允许您连接到 WordPress 最新和当前版本的 jQuery 库。 如果您愿意，可以指定一个特定的值。
- 如果可能，最新参数的 true 值会将 jQuery 加载到页脚中。 在这里，对于输出，您不需要 wp_head，而是 wp_footer，它也应该在每个主题中。
- 更新 jQuery 后，检查网站上已安装插件或脚本的功能很重要。 如果他们需要这个库来工作，那么应该更早地请求它，因此，将代码移动到页脚可能并不总是最好的解决方案。
- 此代码从 Google CDN 连接到 jQuery，而不是从 WordPress 系统本身连接到基本脚本。 CDN 技术允许您使用离用户最近的服务器上的文件，从而加快下载速度。
如果您仔细查看 WordPress 网站的 HTML 代码以及 jQuery，您通常会注意到另一个类似的脚本名为 jquery-migrate.min.js。 这个库消除了您的模板或模块与早期版本的 jQuery 的所有不兼容性。 如果您在升级 WordPress jQuery 库时需要保留此迁移脚本，那么前面的代码看起来会有些不同：
function my_update_jquery () {
if ( !is_admin() ) {
wp_deregister_script('jquery-core');
wp_register_script('jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, false, true);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', my_update_jquery);
jquery-core 参数指定只替换库的主脚本，jquery-migrate.min.js 不会影响这个过程。
在大多数情况下，编辑 functions.php 文件将是一个更好的选择。 加入一个额外的模块并不难。 如果您对 WordPress 中的 jQuery 有什么要补充的，请在评论中与我们分享。
如何使用 WordPress 插件添加 WordPress jQuery？
如果在 WordPress 核心文件中手动插入脚本不是一杯茶，或者您不想冒任何风险。 您也可以选择更简单的替代方法，即使用 WordPress 插件。
有很多免费的 WordPress 插件可用，但您可以使用的两个知名插件是：
- Advanced Custom Fields
- Simple Custom CSS and JS
结论
在本文中，您了解了 jQuery 是什么，它的好处，以及如何将 jquery 添加到您的 WordPress 站点是非常简单和容易的步骤。 要进一步了解这些特殊库，我们强烈建议您在使用插件或手动操作之前深入了解 jquery 以及它如何与 WordPress 一起工作。
如果您发现我们在这篇文章中遗漏的任何内容，或者您对 jQuery 有任何疑问，请在下面的评论部分告诉我们。
