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 有任何疑问,请在下面的评论部分告诉我们。