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 语录。恭喜！

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

创建自定义函数

获取 API 响应

把 JSON 对象转成 PHP 数组

返回目标值

用 Bricks 建站？我接客户项目。

相关教程

Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

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

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