今天我们来看看怎么在WordPress上连接外部的 API 发送 POST 请求,具体我们这里要用到的是 Elementor 的表单,不过 API 你其实可以通过任何表单插件发送。WordPress 可以通过Webhook、functions.php 添加自定义代码和使用插件的方式来连接 API 发送需要的请求。
我们这里就选择使用插件来连接 API。事先声明,我这里使用到的是 WPGetAPI,他有提供免费连接 API 的功能,不过你要是想要用它来连 Elementor,需要购买 PRO 版本。

另外一个平替可以免费连接 Elementor API 的是 Bit Integrations,除此之外,还提供非常多其他连接。

下载安装 WPGetApi 插件
WordPress安装插件的具体方法看之前笔记,这个插件需要免费版也安装了才能启用 PRO 版。

WPGetApi Setup
首先我们需要做的第一步就是去到 “Setup” 设置我们要连接的前缀端口链接。
API Name 和 Unique ID 其实没那么重要,你起一个容易识别的名字就行。链接的 Base URL 非常重要,让你程序员提供给你即可。举例,我这里是 Base URL 是:https://jhchen.top/
全部设置好后保存即可。

保存之后,上面以及左侧菜单里都会出现你刚刚填写的 API Name,这两个地方到达的地方都一样。

WPGetApi Endpoint 端口设置
这就是整个设置里的重头戏(前面的 Base URL 也非常重要)
- Unique ID:为此端点选择唯一 ID,和你在上一步填的 ID 一样即可。
- Endpoint:Base URL 的后缀,用来调用完整 URL。比如/admin/register,那么我完整的端口就是https://jhchen.top/admin/register
- Method:此端点的请求方法。如果从 API 返回数据,通常是 GET。如果是发送到 API,通常是 POST。
- 其他设置就看你自己端口那边的需求了,timeout 和 cache time 通常默认即可。

下面两个设置也是按你端口的需求设置,Header 通常都是 Content-Type:application/json,关于这个可以查看他们的官方文件。

最后的 body 就是我们要发送给 API 的内容。需要输入对应的 name/value ,前者得看 API 那边填的是什么信息,照写就行。至于后面的 value 就是我们要发的内容,因为是和 Elementor 的表单联动的,所以它是动态的。
我们要填写的是(action:字段id),这个方法官方文件也有提到。

字段 ID 需要我们去编辑表单更改,在字段的高级设置里填写需要的 ID。

如果是一些文字和数字没有什么问题,要是有一些选项像 checkbox 和 select 这些,那么我们还要格外在表单里填写 value,通常这类内容 API 那边都是通过数字来代表。这里的操作方式,我之前在用Elementor注册网站用户里也说过。

最后的最后就是这个 API POST 的运行条件,我们选 Elementor 再输入表单的名字即可。


WPGetApi 测试 API 端口连接
在界面上面有一个“test endpoint”可以测试是否成功连接到端口。


WPGetApi Actions log
这个插件还自带一个非常有用的 log 功能,你通过表单发送 POST 后会显示全部内容。
