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
- 访问 hPanel → 托管 → 管理。
- 在左侧菜单中,选择 文件 → 文件管理器。
- 输入 public_html → wp-content。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html
- 打开 主题 文件夹 并选择一个已安装的主题。
- 在左侧菜单中,单击 新建文件夹 并将文件夹命名为 js。
- 单击 新建文件 创建一个新的 .js 文件——例如: new_script.js。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html
- 将 jQuery 脚本添加到文件中。
- 重复相同的步骤来自定义 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