使用 WP-API 获取文章

您可能还不知道，有一个很棒的资源叫做 Quotes on Design，它提供由我们自己的 Chris Coyier 策划的关于设计的有趣引言。

到目前为止，Quotes on Design (QoD) 使用了一些自定义代码来查询 WordPress 数据库并提供引言。这用于网站本身，以及用于其 API 以允许在外部网站上使用。随着即将推出的 WordPress JSON REST API 的激动人心，我们认为使用 WP API 而不是我们自己的自定义代码重建网站会很有趣。

以下是我们将要介绍的内容

1. 设置 API
2. 查询 API 以获取随机引言
3. 对该引言做一些有趣的事情
4. 自定义 API 以删除未使用的信息
5. 使用新的 QoD JSON REST API 为您的网站获取精美的引言

警告！ WP JSON REST API 仍在开发中，查询接口可能会在最终版本发布之前发生变化。我们会尽力更新本教程，以防出现任何更改。我们不建议在任何超重要的网站上使用 WP API，除非您是超专业的 WordPress 开发人员，在这种情况下，您可能可以直接跳过这篇文章，对吧？

安装 WP API

WP API 作为插件打包，可在 WordPress.org 插件库中获取。这意味着您可以

• 打开您的 WordPress 仪表板
• 转到插件 → 添加新插件
• 搜索“WP API”
• 安装、激活，您就完成了

让我们开始深入了解！

获取随机文章

对于 QoD，我们想在主页上添加一些简单的功能：单击一个按钮，并从 API 中重新加载一个随机引言。

WP API 包含多个端点，您可以使用它们从数据库中读取信息，包括 元数据、附件、用户 - 实际上，存储在标准 WP 数据库中的任何内容在某种程度上都是可访问的。

对于我们的用例，我们只需要获取一个随机文章。我们从 /wp-json/posts 端点开始，这本质上就像运行 WP_Query 一样，如果您熟悉 WordPress 开发，就会明白。以下是基本端点 URL

http://quotesondesign.com/wp-json/posts

在没有任何查询参数的情况下访问该 URL 会以 JSON 格式返回默认的文章列表 - 本质上，与您在博客页面上看到的一样。

[
  {
    "ID": 2328,
    "content": "<p>Everything we do communicates.</p>\n",
    /* ...snip most of the fields... */
    "title": "Pete Episcopo",
    "type": "post"
  },
  {
    "ID": 2326,
    "content": "<p>The only &#8220;intuitive&#8221; interface is the nipple. After that it&#8217;s all learned.</p>\n",
    /* ...snip most of the fields... */
    "title": "Bruce Ediger",
    "type": "post"
  },
  {
    "ID": 2323,
    "content": "<p>Only show work you like, or you&#8217;ll end up being hired to do things you don&#8217;t like.</p>\n",
    /* ...snip most of the fields... */
    "title": "Victoria Pater",
    "type": "post"
  }
]

请注意，引言的 ID 是连续的：它们代表网站上最新的三条引言。

对于我们的设计，我们只需要一个文章，并且希望它被随机选择。我们需要对结果进行过滤，并且可以使用与调用 WP_Query 或 get_posts 时相同的参数来实现。

在这种情况下，我们需要两个参数

• orderby 参数需要为 rand，以获取随机文章
• posts_per_page 参数需要为 1，以将结果限制为单个文章

请查看 WP_Query 手册条目 上所有可用参数的列表。

我们使用 filter 查询变量作为数组，通过 URL 传递这些参数，如下所示

http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1

以下是我们使用经过过滤的 URL 从 WP API 获取到的内容

[
  {
    "ID": 2153,
    "author": {
        "ID": 2,
        "URL": "https://css-tricks.cn",
        "avatar": "http://0.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=96",
        "description": "",
        "first_name": "Chris",
        "last_name": "Coyier",
        /* ...snip some fields... */
    },
    "comment_status": "closed",
    "content": "<p>Wonderfully designed > beautifully designed. Any day.</p>\n",
    "date": "2013-06-27T08:34:04",
    "date_gmt": "2013-06-27T16:34:04",
    "date_tz": "Etc/GMT-8",
    "excerpt": "<p>Wonderfully designed > beautifully designed. Any day.</p>\n",
    "featured_image": null,
    "format": "standard",
    "guid": "http://quotesondesign.com/?p=2153",
    "link": "http://quotesondesign.com/daniel-burka-2/",
    "menu_order": 0,
    "meta": {
        /* ...snip some fields... */
    },
    "modified": "2013-06-27T08:34:04",
    "modified_gmt": "2013-06-27T16:34:04",
    "modified_tz": "Etc/GMT-8",
    "parent": null,
    "ping_status": "closed",
    "slug": "daniel-burka-2",
    "status": "publish",
    "sticky": false,
    "terms": {
      /* ...snip some fields... */
    },
    "title": "Daniel Burka",
    "type": "post"
  }
]

每次刷新经过过滤的 URL 时，我们都会得到一条不同的引言。太棒了！

您会注意到，我在最后一个片段中包含了更多 WP API JSON 响应。这里有很多信息 - 即使我隐藏了元数据、作者和术语。

出于我们的目的，我们不需要大多数信息。另外，不包含所有信息更有效率 - 所以让我们把它去掉！

从 JSON 响应中删除字段

一位读者写信说，您不再需要执行此操作，因为现在 API 中有 一个 _filter 参数。

我们需要过滤 API 返回的数据，幸运的是 WP API 为我们提供了我们需要的过滤器，叫做 json_prepare_post。要使用它，我们需要 创建一个新的插件，其中包含以下代码片段

function qod_remove_extra_data( $data, $post, $context ) {
  // We only want to modify the 'view' context, for reading posts
  if ( $context !== 'view' || is_wp_error( $data ) ) {
    return $data;
  }
  
  // Here, we unset any data we don't want to see on the front end:
  unset( $data['author'] );
  unset( $data['status'] );
  // continue unsetting whatever other fields you want

  return $data;
}

add_filter( 'json_prepare_post', 'qod_remove_extra_data', 12, 3 );

激活我们的插件后，我们会得到一个更小的 JSON 响应，其中只包含我们用例所需的 信息

[
  {
    "ID": 686,
    "content": "<p>My secret is being not terrible at a lot of things.  </p>\n",
    "link": "http://quotesondesign.com/moby/",
    "title": "Moby"
  }
]

向 JSON 响应中添加字段

既然我们已经完成了从 JSON 数据中删除不必要的信息，那么为保持平衡，添加一些我们自己的自定义字段也是很合适的。打蜡，打蜡。

一些引言有一个叫做“来源”的自定义元数据字段，Chris 使用它来链接到引言的原始来源（如果它在线上可用）。让我们使用与以前删除数据时相同的 json_prepare_post 过滤器将该元数据添加到 JSON 响应中。在同一个插件中，我们添加以下函数

function qod_add_custom_meta_to_posts( $data, $post, $context ) {
  // We only want to modify the 'view' context, for reading posts
  if ( $context !== 'view' || is_wp_error( $data ) ) {
    return $data;
  }

  $source = get_post_meta( $post['ID'], 'Source', true );

  if ( ! empty( $source ) ) {
    $data['custom_meta'] = array( 'Source' => $source );
  }

  return $data;
}

add_filter( 'json_prepare_post', 'qod_add_custom_meta_to_posts', 10, 3 );

添加了该额外的字段后，以下是 JSON 响应的样子

[
  {
    "ID": 2039,
    "content": "<p>Communication that doesn&#8217;t take a chance doesn&#8217;t stand a chance.</p>\n",
    "custom_meta": {
        "Source": "<a href="http://altpick.com/spot/segura/segura.php">article</a>"
    },
   "link": "http://quotesondesign.com/carlos-segura/",
    "title": "Carlos Segura"
  }
]

现在我们拥有了准确的所需信息，让我们使用 JSON API 通过 AJAX 在主页上加载随机引言。

从 JSON API 中获取和使用数据

在 QoD 的主页上，我们有一个按钮来获取另一个引言

使用 jQuery 事件处理程序和 jQuery.ajax 函数，我们获取一个引言并使用以下代码片段更新 HTML

jQuery( function( $ ) {
  $( '#get-another-quote-button' ).on( 'click', function ( e ) {
    e.preventDefault();
    $.ajax( {
      url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function ( data ) {
        var post = data.shift(); // The data is an array of posts. Grab the first one.
        $( '#quote-title' ).text( post.title );
        $( '#quote-content' ).html( post.content );

        // If the Source is available, use it. Otherwise hide it.
        if ( typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined' ) {
          $( '#quote-source' ).html( 'Source:' + post.custom_meta.Source );
        } else {
          $( '#quote-source' ).text( '' );
        }
      },
      cache: false
    } );
  } );
} );

现在，当按下按钮时，新的随机引言会自动加载。试试看。

在您的网站上使用 API

您可以使用 API 查询 Quotes on Design，以在您自己的网站上显示精美的引言。我们已经更新了 API 页面 以使用新的 WP JSON API。如前所述，WP API 可能会发生变化，因此不要在超重要的网站上依赖此 API。

更多 API 好处即将到来

WP API 的开发正在进行中，人们对看到人们可以用它构建什么感到非常兴奋。我们的示例非常基础，但 JSON API 的想法已经让我们开始思考各种可能性。

查看 Quotes on Design，并在评论中分享您的想法和问题。如果您有想在网站上看到的精彩引言，请 提交！