Bricks 中调用 API 入门（以 Chuck Norris 语录为例）

本教程通过从公共 API 拉取一条动态的 Chuck Norris 语录，带你掌握在 Bricks 中调用 API 的基础流程。

创建自定义函数

打开子主题的 functions.php，创建函数 get_random_chuck_norris_quote，先返回一段占位文本：

function get_random_chuck_norris_quote(){
   return 'This function works';
}

在 Bricks 编辑器里打开一个页面，用 Bricks 的 echo 函数把这个函数输出到目标元素里（本例用的是 Testimonial 元素）：

去前端检查一下有没有生效：

函数生效了！接下来接入 API。

获取 API 响应

先把 API 地址存进变量 $random_url_api。打开 https://api.chucknorris.io/ 网站，官方给出的随机语录 API 地址是 https://api.chucknorris.io/jokes/random。

用 GET 方法发一个 HTTP 请求，把响应存进新变量 $response，这里用 wp_safe_remote_get() 函数，并 var_dump 一下看看 API 返回了什么：

function get_random_chuck_norris_quote(){
  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);
  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }
  // Let's check the response content
  var_dump($response);
}

刷新前端页面，应该会看到下面这样的输出（一大段数组，包含 headers、body、response、cookies、http_response 等）：

可以看到它返回了一个数组，里面大部分信息我们用不上，我们只需要位于 [body] 里的语录文本。

那就只取 body 部分，用 wp_remote_retrieve_body() 函数：

function get_random_chuck_norris_quote(){
  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);
  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }
  // Get the body part
  $response_body = wp_remote_retrieve_body( $response );
  // Let's check the response body content
  var_dump($response_body);
}

输出是一个 JSON 对象，包含 categories、id、url……以及我们真正要找的 value：

{
   "categories":[
   ],
   "created_at":"2020-01-05 13:42:26.447675",
   "icon_url":"https://assets.chucknorris.host/img/avatar/chuck-norris.png",
   "id":"wOgZCCWDReOnr3ws_Sqw2g",
   "updated_at":"2020-01-05 13:42:26.447675",
   "url":"https://api.chucknorris.io/jokes/wOgZCCWDReOnr3ws_Sqw2g",
   "value":"No matter how manly and hetro you claim to be, if you are given a nude photo of Chuck Norris, you will be dead from carpal tunnel syndrome within 4 hours."
}

把 JSON 对象转成 PHP 数组

越来越接近了！现在返回的 JSON 对象把语录文本放在 value 里。

要用 json_decode() 函数把 JSON 对象转成 PHP 数组，再提取数据。先 var_dump 看看结果：

function get_random_chuck_norris_quote(){
  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);
  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }
  // Get the body part
  $response_body = wp_remote_retrieve_body( $response );
  // Decode the JSON object into a PHP array
  $response_body_decoded = json_decode( $response_body, true );
  // Let's check the response body content
  var_dump($response_body_decoded);
}

输出如下数组：

Array
(
    [categories] => Array
        (
        )
    [created_at] => 2020-01-05 13:42:28.984661
    [icon_url] => https://assets.chucknorris.host/img/avatar/chuck-norris.png
    [id] => nYj4tJQ-T4ioHrzbr8rFMg
    [updated_at] => 2020-01-05 13:42:28.984661
    [url] => https://api.chucknorris.io/jokes/nYj4tJQ-T4ioHrzbr8rFMg
    [value] => By the time you see Chuck Norris in your rearview mirror, he's already kicked you in the face and is 10 car lengths ahead of you.
)

相关阅读：

返回目标值

快完成了！现在从数组里取出 value，并在函数里返回它：

function get_random_chuck_norris_quote(){
  $random_url_api = 'https://api.chucknorris.io/jokes/random';
  $response = wp_safe_remote_get($random_url_api);
  // Stop the function if the response returns an error
  if ( is_wp_error( $response ) ) {
	return false;
  }
  // Get the body part 
  $response_body = wp_remote_retrieve_body( $response );
  // Decode the JSON object into a PHP array
  $response_body_decoded = json_decode( $response_body, true );
  // Return the quoted text
  return $response_body_decoded['value'];
}

搞定！我们成功用公共 API 做出了一个完全没用但动态的 Chuck Norris 语录。恭喜！

适用场景与常见误区

这种「服务端函数 + 动态标签」的套路，凡是页面要显示外部数据都能用：天气、汇率、快递状态、库存、社交媒体动态、随机语录等。新手常踩两个坑：一是每次页面加载都去打外部 API，没做缓存，流量一大就被限流甚至拖慢整站；二是把密钥写进前端代码，等于公开泄露。正确做法是把密钥留在 functions.php 的服务端函数里，用 WordPress Transients 缓存远程结果（具体缓存时长按官方文档或业务需求定），并对 wp_remote_get 的返回用 is_wp_error 兜底，失败时用静态文案降级而不是报错。

常见问题（FAQ）

Q：Bricks 里调 API 必须写 PHP 函数吗？ A：是的。Bricks 的动态标签走的是服务端 PHP，所以先在子主题 functions.php 里写好取值函数，再用 {echo:函数名} 这类动态标签调用，前端只拿到最终结果。

Q：远程请求会不会拖慢页面？ A：会。建议用 WordPress Transients 把结果缓存起来，避免每次访问都现打外部 API；缓存时长按官方文档或你的更新频率来定。

Q：调用失败页面会报错吗？ A：教程里已经用 is_wp_error() 做了兜底返回 false。生产环境最好再加一层失败时的静态 fallback 文案，别让用户看到空白或报错。

Q：能调用需要鉴权的 API 吗？ A：可以。把密钥放在服务端函数里，用 wp_safe_remote_get 带上授权 header 即可，密钥千万不要写进前端代码。

Bricks 中调用 API 入门（以 Chuck Norris 语录为例）

创建自定义函数

获取 API 响应

把 JSON 对象转成 PHP 数组

返回目标值

适用场景与常见误区

常见问题（FAQ）

延伸阅读

延伸阅读

Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据

Bricks 中输出 ACF Relationship 关联文章的数量

ACF Relationship 字段 + Bricks 查询循环：显示关联文章

把任意自定义 WP_Query 循环接入 Bricks 查询循环

相关教程

用 Bricks 建站，Ray Chan 接客户项目