作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Brian Coords
Verified Expert in Engineering

Brian喜欢用WordPress解决问题. 在他之前的职业生涯中,他是一名高中和大学英语教师.

PREVIOUSLY AT

盖西-杰克逊慈善基金会
Share

超过四分之一的网站运行在WordPress上. 这是一个相当了不起的壮举,考虑到它已经存在了 more than a decade在科技领域,这是相当古老的.

WordPress的秘诀是什么? 简单-这是最简单但最可扩展的方式来管理您的内容. 然而,有一段时间,WordPress似乎已经落后了.

随着web越来越依赖于JavaScript来创建沉浸式的内容, 互动体验, 越来越明显的是,WordPress需要为用户和开发人员提供与他们的内容交互的新方法.

虽然WordPress是建立在——并且将继续建立在——PHP之上的,但是 WP REST API 是否试图在PHP WordPress核心的遗产和JavaScript web应用程序的潜力和力量之间建立一座桥梁, 以及本地移动和桌面应用程序.

WordPress REST API将任何WordPress网站的内容带入一个易于使用的API, 允许WordPress作为在网络上发布内容的存储和检索系统.

将REST引入WordPress API

如果你认为WordPress REST API是突然出现的,那你就错了.

给WordPress添加一个全新的特性并不是一件简单的事. 因为它是开源软件, WordPress的发展很大程度上依赖于社区的进步.

该API的开发始于几年前,作为一个独立的特性插件, 这允许开发人员进行实验, and contribute to, 在受控环境下进行项目.

经过多次迭代和增强, 还有两个完全不同的版本, REST API背后的贡献者必须测试和评估其好处, 以及巨大的后果, 提供开放的API访问数千万个网站的数据.

WordPress 4.4, codename “Clifford,将项目的初始基础设施带入WordPress核心, 而端点直到 WordPress 4.7, “Vaughan.”

Essentially, 这使得开发人员有时间测试支持API的功能,而无需实际暴露数据本身.

现在,初始内容端点已经合并到所有当前版本的WordPress中, 插件开发人员和主题作者可以尝试令人兴奋的新检索方法, view, 并更改传统wp-admin体验之外的数据.

分解缩写:从HTTP到JSON REST API

了解WP REST API的重要性, 它可能有助于理解我们如何在网上共享数据的基础,以及互联网可能走向何方.

HTTP是我们每天处理的大多数网络流量的基础. 如果你在浏览器中输入一个URL,你就是在做一个 request. 相应的服务器接收您的请求并提供一个 response. 这种交易是我们在网上做的几乎所有事情的基础. 浏览器发出请求,服务器提供响应.

我们发出的请求类型会影响我们得到的响应类型. 大多数时候,我们做的是一个简单的 GET 请求:“嘿,谷歌,给我你的登陆页面.谷歌给出了回应.

随着网络的交互性越来越强,我们开始利用其他HTTP请求,包括 PUT, POST, and DELETE.

For example, 我们在网站上填写一个搜索栏:“嘿,谷歌, POST我的电子邮件地址和密码到您的登录页面.“谷歌为我们开启了一个新的会话,并提供了不同的回应.

这个协议是我们建立WordPress网站的基础.

我们使用表单和PHP将数据GET和POST到数据库中. Contrary to popular opinion,这个WordPress的底层基础短期内不会改变. WordPress现在所做的就是为开发人员提供一种通过RESTful API与WordPress数据交互的新方法.

具象状态转移(REST)

WordPress的开发者 应该熟悉一般的api,例如 Shortcode API and the Options API. 这些api定义了组成WordPress的组件的功能, 所以主题和插件作者可以扩展WordPress的核心功能. 然而,WordPress REST API有点不同.

A REST或RESTful API是关于将数据安全地暴露给来自外部源的HTTP请求. 它还涉及建立一个通用的体系结构和一组协议来响应这些请求. 虽然在这种类型的服务背后有更先进的思想和原则, 这些都超出了本文的讨论范围.

WP REST API的存在,特别是在WordPress 4之后.7, 意味着你网站的所有内容, including posts, pages, comments, 以及任何公共帖子元, 现在可以作为原始数据直接访问吗. 这也意味着如果您愿意,可以从传统的wp-admin之外对这些数据进行更改, 也许是通过手机或桌面应用程序.

而不是将数据简单地视为数据库中的行, 现在可以以JSON的形式对它进行序列化访问.

JSON——XML怎么了?

WordPress老手在XML方面有很多经验,XML是一种用于在站点之间共享内容的通用格式.

Similar to XML, JSON只是一种机制,它允许我们通过将数据捆绑到特定的语法中来轻松地传输数据. JSON实际上是一个字符串, JavaScript对象的文本表示形式, 将数据存储在一组键值对中. WordPress帖子的常见JSON表示可能是这样的:

{ 
    “id”: 1, 
    “title”: {
        " rendering ": " Hello World "
    },
    “content”: {
        “渲染”:“欢迎来到WordPress. 这是你的第一篇文章. 编辑或删除它,然后开始写博客!”
    } 
}

(You can use a JSON格式化工具 在必要时美化JSON响应.)

通过WP REST API的完整JSON响应将包含有关该帖子的其他信息, including metadata. 通过方便地将这些数据捆绑成JSON格式, 你可以用新的和令人兴奋的方式与你的WordPress内容互动.

JSON最好与JavaScript搭配,这并非巧合. 随着越来越多的WordPress开发者开始深入学习JavaScript,我们将看到越来越多的高级使用WordPress作为后端.

我们如何找到数据:遵循路径到WordPress API端点

使用WordPress,从API获取数据就像编写URL一样简单.

对于任何运行版本4以上的WordPress站点.7、将以下字符串添加到网站url的末尾: /wp-json/wp/v2 (e.g., http://example.com/wp-json/wp/v2). 把这个URL放到浏览器中,看看会出现什么.

结果可能看起来像一大堆数据,除非您安装了浏览器 extension 清理JSON. 这些大数据是JSON格式的特定WordPress站点的内容和元信息.

通过加载该内容,您就定义了 route 并要求浏览器为您获取它.

路由是一个映射到特定方法的URL. WordPress核心读取该路由,每个斜杠' / '代表一个特定的 path,或参数,应该遵循.

这条路到a为止 endpoint, WordPress核心内部的功能可以决定提供什么数据以及如何处理所提供的数据.

一个示例端点可能是' /wp-json/wp/v2/posts/1 ',我们在其中添加了' /posts '和' /1 '路径。. 这个特定的端点告诉我们的站点浏览我们的数据, pull up our posts, 并拉起ID为1的柱子.

WordPress中的REST API之所以如此有用,是因为它是可扩展的, 这意味着你可以在你的网站中获取任何数据, 把它作为端点. 大多数WordPress核心功能目前(或即将)得到支持.

However, 主题和插件开发者可以开始添加他们的自定义内容和设置作为端点, 允许用户以新的方式与他们的网站互动.

如果你对你的WordPress站点上目前可用的端点感到好奇, 像这样的浏览器应用程序 Postman 提供了专门用于探索api的GUI.

报头和身份验证

在浏览器中键入URL端点看起来很简单,但实际上它包含一组默认值 headers 伴随着请求. 反过来,一组报头也会随响应一起发送回来. 这些头文件包含了很多有用的信息, 但对于我们的目的来说,最重要的是与我们发出的请求的类型以及我们是否经过身份验证有关.

如果您进入浏览器的“开发人员工具”,,您可以检查HTTP头的任何资产加载到浏览器窗口, 包括HTML文件, CSS stylesheets, images, and more.

要考虑的第一个标头是 Request Method,它直接对应于我们之前了解的那些HTTP请求. 这里你很可能会看到 GET 作为请求方法,如果我们只是查看一个页面.

调用REST API的应用程序可能会选择将报头的请求方法更改为POST.

POST方法告诉您的网站在WordPress数据库中输入新数据或更改现有数据. 通过POST方法发送信息, 其他应用程序有能力更改您的数据, 不需要登录到wp-admin.

No need to worry, however, 因为除非它们还包含提供适当凭证的头文件 authentication,你的网站会拒绝他们.

NOTE: 但是,对REST API调用进行身份验证的方法仍然没有最终确定,这使得 authentication 对于想要使用REST API添加或更改数据的开发人员来说,这是进入的最大障碍.

目前,有可用的选项,包括 plugin 来自REST API背后的开发人员. 随着围绕身份验证的标准过程逐渐进入核心, 对于广泛使用WP REST API来说,最后的障碍将会变得清晰.

WordPress REST API示例应用程序

使WP REST API如此强大的原因是它的一致性, 所以我们可以期待在任何运行WordPress 4的网站上得到相同的基本结果.7 or higher. 然而,WordPress是一个分布式API,这意味着不只有一个地方可以获得所有的数据.

每个运行WordPress的网站都是一个独特的应用程序,拥有独特的用户和身份验证. 虽然通过REST API编辑内容可能需要不同的授权技术, 实际上,我们可以很容易地访问大多数wordpress博客的帖子.

To demonstrate, 我们将做一个快速的相互依赖的演示,从一些流行的与wordpress相关的博客中加载最新的文章摘录, of course, 都在WordPress上运行. While we’re at it, 我们将包括一个搜索表单, 所以我们可以一次搜索所有这些网站, 然后调出相关的文章.

最后,我们将确保在原始网站上提供阅读全文的链接.

第一阶段:获取最近的帖子

我们先建立一个快速 Vue 实例并将其挂载到元素. 我们还会包括 Bootstrap 所以我们可以有一个网格和基本样式的表单元素,我们将在稍后添加.

当我们定义数据时, 我们需要一个地方来存储站点的名称(它不包含在默认响应中), the URL, 一旦我们拿到了邮件. Here’s an example:

{
    “name”: “wordpress.org”,
    :“url http://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”,
    “posts”: []
}

你会注意到我们还在URL的末尾包含了第一个参数, per_page. Typically, WP REST API将按照与普通WP_Query循环分页相同的规则对结果进行分页. 我们将把查询限制在前三篇文章.

接下来,我们将定义 method loadPosts(),它将循环遍历源列表,并使用 vue-resource,填补空白 posts 每个源的数组和结果.

loadPosts:函数(){

  var self = this;

  self.sources.forEach(函数(来源、索引){

    self.删除美元(来源,“文章”);

    //使用vue-resource获取API     
    self.$http.get(source.url).然后(函数(响应){

      self.$set(source, 'posts', response.data);

    },函数(响应){

      console.log('Error');

    });

  });

}

我们还会给 loadPosts() 当我们的Vue实例成功挂载时.

  已挂载:function(){
    
    this.nextTick美元(函数(){

      //在初始页面加载时加载帖子
      this.loadPosts();
      
    });
    
  }

Keeping loadPosts() 作为一个单独的方法将在将来我们开始对API进行多次调用时派上用场. 在我们的HTML中,我们将使用Vue的simple list rendering directives and template syntax 输出我们所有的帖子.

请参阅嵌入式Pen的工作演示:

See the Pen WP REST API搜索示例(第一阶段) by Brian Coords (@bacoords) on CodePen.

阶段2:筛选结果

让我们添加一个侧边栏,并创建一些过滤器来显示/隐藏各种来源. 要做到这一点,我们添加一个新属性到 sources 对象,一个布尔值 on.

在添加过滤器的同时,让我们生成一个Vue过滤器来帮助我们正确地显示日期. WordPress将文章的日期和时间存储为Unix时间戳.

我们将使用第三方库 Moment.js 将日期转换为更可读的格式.

 filters: {
    
    // Using Moment.Js将post date转换为可读格式
    prettyDate:功能(价值){
      
      //如果date为空则返回
      if(!value) return '';
      
      //将日期转换为时刻.js
      var date = moment.utc(value);
      
      //返回格式化日期
      return date.format("MMM DD, YYYY,");
      
    }
    
  },

请参阅嵌入式笔的工作演示:

See the Pen WP REST API搜索示例(第一阶段) by Brian Coords (@bacoords) on CodePen.

最后阶段:搜索查询

这里,我们将向API请求添加一个新参数. 我们已经加了 per_page=3 参数来限制我们从每个站点获得的结果数量. 如果在搜索栏中写入了任何内容,我们将把它作为附加参数添加进去.

这将允许我们使用每个站点的内置搜索功能,就像我们一样 查询搜索栏 on that website.

我们将添加一个搜索栏,并使用Vue 's将其绑定到一个变量 v-model directive.

而不是立即调用所有的api, 当用户开始输入时, 我们将添加一个按钮并将事件绑定到表单提交. 然后,我们将向Vue实例添加一个方法,该方法将添加搜索参数(URL编码), (当然)到URL.

generateUrl:函数(源){

  var self = this;

  //添加搜索参数.
  if(self.searchQuery){

    return source.url + '&搜索=' + encodeURI(self.searchQuery);

  }else{

    return source.url;

  }      

}

请参阅嵌入式笔的工作演示:

See the Pen WP REST API搜索示例(第一阶段) by Brian Coords (@bacoords) on CodePen.

这是一个简单的WordPress REST API的例子, 我们可以想象在WordPress内部有一个类似的潜在应用. 例如,已经有了“WordPress新闻”metabox.

我们可以很容易地把这个演示变成 a WordPress plugin,将其显示在WordPress仪表板上. 现在,我们已经整合了从一些顶级WordPress和网页设计教程网站搜索帮助的功能,就在我们自己的网站上.

WordPress REST API的未来潜力

尽管上面的例子只触及了WP REST API功能的表面, 它应该传达了当您开始处理数据时开始出现的一些可能性. 是否用于增强网站本身的用户体验, 或者从外部源收集和操作数据, 这是一个强大的工具.

虽然一些行业专家对你的内容可能被“刮掉”并在其他地方展示的可能性表示担忧, 重要的是要记住,这个功能类似于RSS提要, 对于站点维护人员来说,明确控制哪些数据是公开的,哪些数据不是公开的是至关重要的.

随着WP REST API越来越深入到WordPress的结构中, 我们将开始看到它的效果, 也许自己都没有意识到. Examples 从简单的(克里斯·科耶的 Quotes on Design),到复杂的单页应用程序(Guggenheim site).

WP REST API的另一个流行用例是移动应用程序开发.

因为内容可以通过REST访问 API, 开发者可以为iOS和Android开发原生应用, 避免创建重复的数据源.

当用户与这些移动应用程序交互时, 他们能找回来, 并直接转换原始网站的数据, 无需开发人员创建任何复杂的基础设施来支持这一点.

这些面向访问者的REST API应用程序仅仅是个开始, however, 因为真正的含义要深刻得多. 核心开发团队的目标之一是开始在整个wp-admin界面中使用它.

在未来的WordPress更新中,我们将开始看到admin-ajax replaced 支持API, 希望能提高基本函数的速度, 比如编辑菜单或发布帖子.

这可能会与WordPress携手并进。 increased focus 在定制器和编辑器作为WordPress新手的用户友好的起点.

虽然WP REST API非常有用,但还有更多的工作要做. API不完整. 还有更多的特性和端点需要添加.

最终,你将能够与你的WordPress网站互动,甚至不访问它. 虽然现在许多服务使用自定义api与WordPress交互, 转向一个标准的WordPress REST API意味着更多的站点和服务可以相互连接, 说同一种语言.

WordPress最初是一个博客平台, 这是博主们相互联系的一种方式, 分享他们的想法和想法. 随着WordPress REST API的开发, 我们将在幕后看到一个新的层次的联系和分享. 这将允许用户以以前从未考虑过的方式构建他们的想法和想法, 把WordPress和它的用户带到一个全新的领域.

聘请Toptal这方面的专家.
Hire Now
Brian Coords

Brian Coords

Verified Expert in Engineering

Aliso Viejo,加州,美国

2016年11月28日成为会员

About the author

Brian喜欢用WordPress解决问题. 在他之前的职业生涯中,他是一名高中和大学英语教师.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

PREVIOUSLY AT

盖西-杰克逊慈善基金会

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 privacy policy.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 privacy policy.

Toptal Developers

Join the Toptal® community.