如何在 WordPress 中使用 jQuery:2 种方法(手动和使用插件)

2023-04-0319:33:56网站建设与开发Comments2,259 views字数 2652阅读模式

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

如何在 WordPress 中使用 jQuery:2 种方法(手动和使用插件)文章源自菜鸟学院-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

如何在 WordPress 中使用 jQuery:2 种方法(手动和使用插件)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

  1. 打开 主题 文件夹 并选择一个已安装的主题。
  2. 在左侧菜单中,单击 新建文件夹 并将文件夹命名为 js
  3. 单击 新建文件 创建一个新的 .js 文件——例如:  new_script.js

如何在 WordPress 中使用 jQuery:2 种方法(手动和使用插件)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/32742.html

  1. 将 jQuery 脚本添加到文件中。
  2. 重复相同的步骤来自定义 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

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cms/32742.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定