如何在 WordPress 中使用 jQuery：2 种方法（手动和使用插件）

WordPress 开发人员使用 JavaScript 和库在网页上创建交互元素并简化编码过程。最受欢迎的选项之一是 jQuery。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

在 WordPress 中使用 jQuery 的特别之处在于广泛的插件生态系统。开发人员无需从头开始编写 jQuery 脚本，而是可以通过使用可重复使用的代码片段来自定义 WordPress 插件和主题来节省时间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

如果您想使用 jQuery 创建引人入胜的网站，本文将指导您完成整个过程。我们还将讨论什么是 jQuery、它的主要优点以及如何将 jQuery 添加到 WordPress。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

什么是 jQuery？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

jQuery 是一个 JavaScript 库，用于创建动态前端组件，例如旋转滑块。其轻量级代码使 Web 开发人员能够更有效地操作 HTML 元素和验证数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

为什么使用 jQuery文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

除了它的插件生态系统，在 WordPress 中使用 jQuery 库的其他原因是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

• 初学者友好。由于它使用简单而简短的文本格式，因此 jQuery 代码易于阅读和编写。
• 紧凑性。jQuery 文件通常比纯 JavaScript 小，让您可以用更少的字符执行相同的任务。
• 跨浏览器兼容性。支持 jQuery 的流行浏览器包括 Google Chrome、  Microsoft Edge、  Mozilla Firefox、  Safari和 Opera。
• AJAX 支持。开发人员可以实施 AJAX 来构建响应迅速且用户友好的网站。
• 降低带宽使用率。jQuery 可以直接在用户的浏览器上执行动画效果，从而降低带宽使用率。

如何在 WordPress 中使用 jQuery文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

有两种方法可以将 jQuery 脚本添加到 WordPress 站点——手动或使用 WordPress 插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

让我们从手动方法开始。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

手动添加 jQuery

如果您有 JavaScript 和 WordPress 开发经验，请按照以下步骤操作：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

1.切换到兼容模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

在开始将自己的 jQuery 脚本添加到 WordPress 之前，了解 jQuery 的兼容模式至关重要。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

默认情况下，jQuery 使用 $ 符号作为快捷方式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

$（文档）.ready（函数（）{$（“按钮”）.click（函数（）{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

但是，您网站上的其他 JavaScript 库也在其语法中实现了美元符号。为避免冲突，请将$ 符号 替换为jQuery以进入兼容模式 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

看看下面的代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

jQuery（文档）.ready（函数（）{jQuery（“按钮”）.click（函数（）{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

这种模式的唯一问题是，编写 jQuery 而不是快捷方式意味着包含更多字符，从而导致脚本臃肿。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

要解决此问题，请选择一个新变量名来替换美元符号。最常见的是 $j。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

只需将此代码添加到 jQuery 脚本的顶部：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

var $j = jQuery.noConflict()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

2.制作脚本文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

之后，创建一个扩展名为 .js 的自定义脚本文件。Hostinger 用户可以按照以下步骤操作：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

重要的！ 对于初学者，我们建议先创建一个 WordPress 子主题。这样，您可以在不更改父主题目录的情况下自定义样式、布局参数和脚本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

1. 访问 hPanel  → 托管 → 管理。
2. 在左侧菜单中，选择 文件 → 文件管理器。
3. 输入 public_html  →  wp-content。

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

4. 打开 主题 文件夹 并选择一个已安装的主题。
5. 在左侧菜单中，单击 新建文件夹 并将文件夹命名为 js。
6. 单击 新建文件 创建一个新的 .js 文件——例如：  new_script.js。

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

7. 将 jQuery 脚本添加到文件中。
8. 重复相同的步骤来自定义 WordPress 插件。

专家提示

如果您不确定如何编写脚本，请参阅我们的指南什么是 jQuery？A Beginner’s Introduction to the jQuery Library 解释了它的主要特性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

3. 将代码添加到 functions.php 文件中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

在将内联脚本添加到 WordPress 之前，请 在主题文件夹中找到 functions.php文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

打开文件并在顶部添加以下 jQuery 函数：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

function add_my_scripts() { wp_enqueue_script( ‘new-script’, get_template_directory_uri() . ‘/js/new_script.js’, array( ‘jquery’ ), ‘1.0.0’, true );}add_action( ‘wp_enqueue_scripts’, ‘添加我的脚本’）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

确保  用实际文件名替换new-script 和 new_script.js 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

通过在 PHP 代码中插入 wp_enqueue_script 函数，用户可以添加自定义脚本并通知 WordPress 它依赖于 jQuery。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

它还可以帮助 WordPress 找到脚本文件并根据您的 jQuery 脚本自定义主题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

通过 WordPress 插件添加 jQuery

如果手动向 WordPress 添加脚本对您来说技术性太强，我们建议使用 WordPress jQuery 插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

就是这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

1. 选择一个插件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

WordPress 提供了各种插件来使用 jQuery 创建交互式网站。以下是我们针对不同用例的首选：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

• jQuery 更新程序。虽然 jQuery 预装在 WordPress 中，但该平台通常使用过时的版本。jQuery Updater 确保您的站点自动安装此 JavaScript 库的最新版本。
• 高级自定义字段。此工具适用于向帖子和页面添加自定义字段。它的一些基于 jQuery 的字段包括 Color Picker、Google Map、Date Picker 和 Time Picker。
• Contact Form 7 的 jQuery 验证。当用户在 Contact Form 7 上输入无效数据时，此插件允许您显示错误消息。您可以为 URL、日期、信用卡和电话号码创建验证规则。
• jQuery 后拆分器。该插件与大多数 WordPress 主题兼容，可让您将帖子和页面拆分为滑块。

虽然安装这些插件可以简化网站设计过程，但您仍然需要具备 JavaScript 和 jQuery 库的基本知识才能使用它们。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

结论文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

了解如何在 WordPress 中使用 jQuery 对于任何网站所有者和开发人员来说都是至关重要的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

jQuery 提供了一个轻量级的解决方案来创建交互元素、编辑页面和自定义 WordPress 网站的整体外观。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

要手动添加 jQuery 脚本，请切换到其兼容模式，创建一个脚本文件，然后  在您的主题文件夹中自定义functions.php文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

对于初学者， 高级自定义字段等 WordPress jQuery 插件 将有助于完成此过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html