将 jQuery 添加到 WordPress 网站的简单方法

jQuery 是最流行的 JavaScript 库。它允许高度简化前端开发,因为它提供了许多现成的插件。无需创建新内容,您只需添加插件并解决网站的任何问题。

将 jQuery 添加到 WordPress 网站的简单方法
将 jQuery 添加到 WordPress 网站的简单方法

它也经常在 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 核心文件进行某些更改。 作为预防措施,第一步也是最重要的一步是创建 WordPress 网站的完整备份。 这是非常重要的,如果你有任何机会错过任何一个字符,甚至是一个“;” 它可能会导致整个网站损坏。

在 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="&lt;script&gt;" title="&lt;script&gt;" />

<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="&lt;script&gt;" title="&lt;script&gt;" />

要激活源代码视图,请在浏览器窗口中按 Ctrl + U。

检查 WordPress jQuery 负载
检查 WordPress jQuery 负载

如何使用与 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 不会影响这个过程。

WordPress jQuery Migrate是什么,如何禁用?

在大多数情况下,编辑 functions.php 文件将是一个更好的选择。 加入一个额外的模块并不难。 如果您对 WordPress 中的 jQuery 有什么要补充的,请在评论中与我们分享。

如何使用 WordPress 插件添加 WordPress jQuery?

如果在 WordPress 核心文件中手动插入脚本不是一杯茶,或者您不想冒任何风险。 您也可以选择更简单的替代方法,即使用 WordPress 插件。

有很多免费的 WordPress 插件可用,但您可以使用的两个知名插件是:

  • Advanced Custom Fields
  • Simple Custom CSS and JS

结论

在本文中,您了解了 jQuery 是什么,它的好处,以及如何将 jquery 添加到您的 WordPress 站点是非常简单和容易的步骤。 要进一步了解这些特殊库,我们强烈建议您在使用插件或手动操作之前深入了解 jquery 以及它如何与 WordPress 一起工作。

如果您发现我们在这篇文章中遗漏的任何内容,或者您对 jQuery 有任何疑问,请在下面的评论部分告诉我们。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注