如何在 WordPress 中使用 Ajax
已发表: 2023-02-12如果您的网站拥有积极活跃的客户群，您可能想知道如何为他们提供真正互动和丰富的网络体验。 提供实时交互可以极大地吸引您的观众。
幸运的是，异步 JavaScript 和 XML (Ajax) 是一种向您的网站添加交互功能的可行方法。 对于 WordPress，您甚至可以使用基于 Ajax 的插件来简化流程。
在本文中，我们将向您介绍 Ajax 及其工作原理。 我们还将引导您开始使用 WordPress 中的 Ajax。 让我们开始吧！
什么是 Ajax 及其工作原理？
Ajax 汇集了许多不同的编程语言，例如 HTML、CSS、JavaScript 等等。 实际上，它在幕后工作以从 Web 浏览器获取请求，将它们发送到服务器，然后将结果传输回浏览器。
作为 Web 用户，您不会知道 Ajax 正在发挥作用。 您将获得高度互动的体验。 例如，在您自己的站点上，您可以使用 Ajax 接受登录用户对帖子的点赞，并显示实时计数。
为什么 Ajax 有用？
使用 Ajax，用户不必重新加载页面即可看到某些更改。 这意味着您的网站将保持快速，并提供更流畅的用户体验。 由于 Ajax 是高效的，只来回发送它需要的数据，它可以最大化带宽并避免更重的数据传输。
作为 Web 用户，我们无时无刻不在享受 Ajax 带来的好处。 一个例子是谷歌的自动完成搜索功能。
您可能熟悉的其他示例包括 Facebook 评论和 Instagram 点赞。 Ajax 很可能在您能够与网页交互并立即接收返回信息的任何地方发挥作用。
在 WordPress 中开始使用 Ajax
对于 WordPress，Ajax 有几种派上用场的方法。 首先，我们将了解 Ajax URL 以及如何将其与 WordPress 函数挂钩一起使用。
WordPress 中的 Ajax URL
由于 WordPress 在管理仪表板中默认使用 Ajax，因此添加更多 Ajax 功能并不困难。 但是，如果您想在站点的前端使用 Ajax，则需要了解 Ajax URL 的工作原理。
在 WordPress 中，您的admin-ajax.php文件有一个 URL。 这提供了发送数据进行处理所需的信息，这对前端 Ajax 开发至关重要。 WordPress 使用 wp_localize_script() 调用来使用 Ajax URL 连接 JavaScript 和 PHP 函数，因为 PHP 无法在没有一些帮助的情况下直接镜像这些。
如何在 WordPress 中使用 Ajax Action Hook
WordPress 在其编程中使用钩子，作为插件和主题与 WordPress 核心交互的一种方式。 钩子有两种类型：“动作”和“过滤器”。 使用 Ajax，您将使用动作挂钩来执行函数。
Actions 使您能够向 WordPress 添加数据或更改其运行方式。 对于 Ajax，您将使用操作 wp_ajax_(action)。 然后可以将自定义函数挂接到此函数，以便在 Ajax 调用期间执行。
例如，此 WordPress 示例代码显示了如何将 Ajax 调用和 JavaScript 对象组合在同一个文件中以执行操作：
<?php
add_action( 'wp_ajax_my_action', 'my_action' );
函数 my_action() {
全球$wpdb； // 这是你访问数据库的方式
$whatever = intval( $_POST['whatever'] );
$随便+=10；
回声 $随便;
wp_die(); // 这需要立即终止并返回正确的响应
}
您还可以为 Ajax 操作创建单独的 JavaScript 文件。 您只需要确保使用 Ajax URL，这样调用就不会丢失。
如何通过使用示例插件来使用 Ajax（3 个步骤）
如果您想试验 Ajax，最好的方法是用它构建一个插件。 幸运的是，有许多示例代码或基本插件可供您开始使用。 对于此示例，我们将使用一些可下载的 WordPress 插件样板示例代码。
第 1 步：创建适当的文件结构
首先，您需要为插件命名并为其创建适当的文件结构。 该名称必须是唯一的，并且不能与 WordPress 插件目录中的任何其他工具冲突。 那是因为当用户上传你的插件时，它会进入他们的wp-content/plugins/目录。
确定名称后，您需要在自己的wp-content/plugins/目录中至少创建以下三个文件：
- 插件名称.php
- 插件名称.js
- 插件名称.css
您需要将.php文件放在新插件的文件夹中，并为 JavaScript 和 CSS 文件创建单独的子文件夹。插件运行所需的所有文件都需要位于同一个主文件夹中。
在下一步中，您将看到我们使用的示例代码带有预先创建的文件结构。 然而，我们认为了解如何从头开始很重要，以及为什么您的文件需要以某种方式构建。
第 2 步：选择一些示例代码作为开始
在您的第一个插件上试用 Ajax 时，使用示例代码文件是一个很好的起点。 但是，您总是希望仔细检查您的示例代码，以确保它是安全的并且不包含错误。
正如我们之前提到的，我们将在示例中使用 WordPress 插件样板。 此示例代码与完成插件所需的文件打包在一起。
此示例插件还符合 WordPress 的编码和文档标准。 您可以从样板网站下载插件的.zip文件以开始使用。
第 3 步：将操作挂钩到您的代码中
我们使用的插件示例代码是使用面向对象编程 (OOP) 构建的。 这有助于程序员组织他们的代码，并创建易于共享和重用的开发模式。
此外，该代码还打包了插件开发所需的所有文件，包括/includes/目录中的激活和停用文件。 您还会发现根据需要可以轻松找到面向公众和面向管理员的文件。
让我们通过查看plugin-name.php文件的开头来了解我们的示例插件：
<?php
/**
* 插件引导文件
*
* 该文件由WordPress读取生成插件中的插件信息
* 管理区。 该文件还包括插件使用的所有依赖项，
* 注册激活和去激活函数，并定义一个函数
* 注册激活和去激活函数，并定义一个函数
* 启动插件。
*
* @link http://example.com
* @自 1.0.0 以来
* @package 插件名称
*
* @wordpress-插件
* 插件名称：WordPress 插件样板
* 插件 URI: http://example.com/plugin-name-uri/
* 描述：这是对插件功能的简短描述。 它显示在 WordPress 管理区域中。
*版本：1.0.0
* 作者：您的姓名或您的公司
* 作者 URI：http://example.com/
* 许可证：GPL-2.0+
* 许可证 URI：http://www.gnu.org/licenses/gpl-2.0.txt
* 文本域：插件名称
* 域名路径：/languages
*/
这部分代码中包含的所有信息对于在 WordPress 中注册您的插件都很重要。 这就是插件目录将如何知道要为您的插件显示什么。
现在你需要做一些事情来连接所有的点，包括：
- 确保您的 Ajax URL 可用于您的脚本。 您可以使用 wp_localize_script() 来完成它。
- 在您的plugin-name.php文件中使用 class Plugin-Name{} 创建一个 plugin-name 类。 这是您定义动作挂钩的地方。
- 在plugin-name.js文件中创建相应的 JavaScript 函数。
Ajax 方法的一个重要元素是定义谁可以使用每个功能，尤其是在创建前端交互性时。 我们将使用 WordPress 中的一些示例代码挂接前端操作：
如果（is_admin（））{
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// 在此处添加其他后端操作挂钩
} 别的 {
// 在此处添加非 Ajax 前端操作挂钩
}
让我们注意这个例子中的一些事情。 首先，网站上的任何人都可以使用这些操作，无论他们是否登录帐户。 这由“wp_ajax_nonpriv_()”调用指示。 其次，您可以看到在前端操作期间还挂钩了后端管理操作。
要了解在这组动作中发生的过程，了解 my_frontend_action 将触发 PHP 函数 my_frontend_action_callback() 也很重要。
第 4 步：测试和调试您的插件
一旦你设置了你需要的所有动作挂钩和相应的功能，你就会想要测试并可能调试你的插件（如果有任何问题）。 您的虚拟主机可能会提供调试工具作为其托管包的一部分。
在 WP Engine，我们提供 WP Engine 错误日志来帮助您找到问题点。
我们的错误日志提供了您网站代码中任何错误的颜色编码演练，以及它们与我们的服务器或您网站的其他部分交互的位置。 这使得故障排除变得更加容易，无论您是使用 Ajax 还是完全使用其他东西。
探索其他 WP Engine 资源和工具
现在您已经开始使用 Ajax 创建令人惊叹的 WordPress 插件，您可能想要评估您还需要哪些其他工具。 WP Engine 提供完整的数字体验平台 (DXP)，可帮助您为 WordPress 创建新插件。
无论您是对我们的 WP Engine 错误日志感兴趣以便执行无错误的插件，还是只需要可靠且安全的 WordPress 托管，我们都会提供各种计划和资源供您使用！