个性化阅读
专注于IT技术分析

WordPress REST API:下一代CMS功能

本文概述

超过四分之一的网络都在WordPress上运行。考虑到它已经存在了十多年, 这是一个了不起的壮举, 这使其在技术时代已经相当古老了。

WordPress的秘诀是什么?简单-这是管理内容的最简单但可扩展性最高的方法。但是, 一段时间以来, WordPress似乎已经落后了。

随着网络越来越依赖JavaScript来创建沉浸式交互体验, 越来越清楚的是WordPress将需要为用户和开发人员提供与其内容进行交互的新方式。

WordPress REST API:下一代CMS功能1

虽然WordPress建立在(并将继续建立在)PHP上, 但WP REST API试图在PHP WordPress核心的遗产与JavaScript Web应用程序以及本地移动设备的潜力和力量之间建立桥梁。和桌面应用程序。

WordPress REST API将任何WordPress网站的内容带入易于使用的API中, 从而使WordPress可用作存储和检索系统, 以在Web上发布内容。

将REST API引入WordPress

如果你认为WP REST API突然弹出, 那是错误的。

向WordPress添加全新功能并非易事。作为开源软件的本质, WordPress开发依赖于整个社区来取得进步。

API的开发是在几年前作为一个单独的功能插件开始的, 该插件使开发人员可以在受控环境中尝试该项目并做出贡献。

在许多迭代和增强功能以​​及两个完全独立的版本中, REST API背后的贡献者必须测试和评估在数以千万计的网站上提供开放的API访问数据的好处和巨大的后果。

WordPress 4.4(代号为” Clifford”)将项目的初始基础架构带入了WordPress核心, 而端点直到WordPress 4.7(” Vaughan”)才出现。

从本质上讲, 这使开发人员有时间测试支持API的功能, 而无需实际暴露数据本身。

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

缩写:从HTTP到JSON REST API

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

HTTP是我们每天处理的大多数Web流量的基础。如果你在浏览器中键入URL, 则是在发出请求。相应的服务器收到你的请求并提供响应。这项交易几乎是我们在线上所有交易的基础。浏览器发出请求, 服务器提供响应。

我们提出的请求类型可能会影响我们得到的响应类型。在大多数情况下, 我们会发出一个简单的GET请求:”嗨, Google, 请给我你的目标网页。” Google提供了回应。

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

例如, 我们在网站上填写搜索栏:”嘿, Google, 将我的电子邮件地址和密码输入你的登录页面。” Google为我们开始了一个新的会话, 并提供了不同的答复。

该协议是我们建立WordPress网站的基础。

我们使用表单和PHP将数据获取和发布到数据库中。与流行观点相反, WordPress的这一基础不会很快改变。 WordPress现在所要做的就是为开发人员提供一种通过RESTful API与WordPress数据进行交互的新方法。

代表性状态转移(REST)

WordPress开发人员通常应该熟悉API, 例如Shortcode API和Options API。这些API定义了组成WordPress的组件的功能, 因此主题和插件作者可以扩展WordPress的核心功能。但是, WP REST API有所不同。

REST或RESTful API是关于将数据安全地暴露给来自外部源的HTTP请求。这还与设置通用体系结构和一组协议以响应这些请求有关。尽管在这种类型的服务后面有更高级的思想和原则, 但是它们不在本文的讨论范围之内。

WP REST API的存在, 特别是在WordPress 4.7之后, 意味着你网站的所有内容(包括帖子, 页面, 评论和任何公共帖子元)现在都可以作为原始数据直接访问。这也意味着你可以根据需要从传统的wp-admin之外对这些数据进行更改, 也许可以通过移动或桌面应用程序进行。

现在, 你可以将数据以JSON的形式进行序列化访问, 而不必将数据仅视为数据库中的行。

JSON-XML发生了什么?

WordPress兽医对XML有丰富的经验, XML是一种在站点之间共享内容的通用格式。

与XML类似, JSON是一种简单的机制, 它使我们可以通过将数据绑定到特定语法中来轻松传输数据。 JSON实际上是一个字符串, 是JavaScript对象的文本表示形式, 将数据存储在一组键值对中。 WordPress帖子的常见JSON表示可能如下所示:

{ 
    "id": 1, "title": {
        "rendered": "Hello World"
    }, "content": {
        "rendered": "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!"
    } 
}

(如有必要, 你可以使用JSON格式化程序工具来美化JSON响应。)

通过WP REST API的完整JSON响应将包括有关该帖子的其他信息, 包括元数据。通过方便地将此数据绑定为JSON格式, 你可以采用新颖而有趣的方式与WordPress内容进行交互。

JSON与JavaScript最佳搭配并非偶然。随着越来越多的WordPress开发人员开始”深入学习JavaScript”, 我们将看到越来越多的WordPress作为后端使用。

我们如何查找数据:遵循通往终点的路线

通过REST API访问所有站点数据就像编写URL一样简单。

对于任何运行至少4.7版的WordPress网站, 请将以下字符串添加到你网站的网址末尾:/ wp-json / wp / v2(例如, http://example.com/wp-json/wp/v2)。将该URL放入浏览器, 然后看看会发生什么。

除非你安装了清理JSON的浏览器扩展程序, 否则结果可能看起来像是一大堆数据。大量数据是JSON格式的特定WordPress网站的内容和元信息。

通过加载该内容, 你已经定义了一条路线, 并要求浏览器为你获取它。

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

这条路径的终点是终结点, WordPress核心内部的功能可以决定要提供的数据以及如何处理所提供的任何数据。

端点示例可能是” / wp-json / wp / v2 / posts / 1″, 我们在其中添加了路径” / posts”和” / 1″。这个特定的端点告诉我们的网站浏览我们的数据, 提取我们的帖子, 并提取ID为1的帖子。

REST API如此有用的原因在于它具有可扩展性, 这意味着你可以在网站中获取任何数据, 并将其添加为端点。当前(或不久将)支持大多数WordPress核心功能。

但是, 主题和插件开发人员可以开始将其自定义内容和设置添加为端点, 从而允许用户以新方式与其网站进行交互。

如果你对WordPress网站上当前可用的端点感到好奇, 那么诸如Postman之类的浏览器应用程序会提供专门用于浏览API的GUI。

标头和身份验证

在浏览器中键入URL端点看起来很简单, 但实际上它包括一组默认标头以及请求。反过来, 一组头也随响应一起发送回去。这些标头包含许多有用的信息, 但对于我们而言, 最重要的标头与我们发出的请求的类型以及我们是否经过身份验证有关。

如果你跳入浏览器的”开发人员工具”, 则可以检查HTTP标头, 以了解加载到浏览器窗口中的任何资产, 包括HTML文件, CSS样式表, 图像等。

要考虑的第一个标头是Request Method, 它直接对应于我们先前了解的HTTP请求。如果我们只是在查看页面, 则很有可能在这里将GET作为请求方法。

调用你的REST API的应用程序可以选择将标头的”请求方法”更改为POST。

POST方法告诉你的网站输入新数据或更改WordPress数据库中的现有数据。通过POST方法发送信息, 其他应用程序可以更改你的数据, 而无需登录wp-admin。

不过, 不必担心, 因为除非它们还包含提供正确身份验证凭据的标头, 否则你的网站将拒绝它们。

注意:不过, 用于验证对REST API的调用的身份验证方法仍未最终确定, 这使身份验证成为希望与REST API一起添加或更改数据的开发人员进入的最大障碍。

目前, 有可用的选项, 包括来自REST API背后的开发人员的插件。随着围绕身份验证的标准过程进入核心领域, 对于WP REST API的广泛使用, 最后的障碍将显而易见。

WP REST API示例应用程序

WP REST API如此强大的原因在于它的一致性, 因此我们可以从运行WordPress 4.7或更高版本的任何站点获得相同的基本结果。但是, WordPress是一种分布式API, 这意味着不仅有一个地方可以获取所有数据。

每个运行WordPress的网站都是一个唯一的应用程序, 具有唯一的用户和身份验证。尽管通过REST API可能需要不同的授权技术来编辑内容, 但实际上, 我们可以轻松地访问大多数WordPress运行的博客的帖子。

为了演示, 我们将做一个快速的代码笔演示, 从一些与WordPress相关的流行博客中加载最新文章的摘录, 这些博客当然都在WordPress上运行。在此过程中, 我们将包括一个搜索表单, 因此我们实际上可以一次搜索所有这些站点, 并从每个站点中提取相关文章。

最后, 我们将确保在原始网站上包含用于阅读全文的链接。

阶段1:获取最新帖子

我们将从设置一个快速的Vue实例并将其安装到元素开始。我们还将包括Bootstrap, 以便在稍后将要添加的表单元素上具有网格和基本样式。

定义数据时, 我们需要一个位置来存储网站名称(默认响应中不包括该名称), URL和帖子, 一旦我们获得它们。这是一个例子:

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

你会注意到, 我们还将第一个参数添加到URL的末尾per_page。通常, WP REST API将按照与对普通WP_Query循环进行分页相同的规则对结果进行分页。我们将查询限制在前三个帖子中。

接下来, 我们将定义方法loadPosts(), 该方法将循环遍历我们的源列表, 使用vue-resource获取结果, 并使用结果填充每个源的空posts数组。

loadPosts : function(){

  var self = this;

  self.sources.forEach(function(source, index){

    self.$delete(source, 'posts');

    // Get API with vue-resource     
    self.$http.get(source.url).then(function(response)  {

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

    }, function(response) {

      console.log('Error');

    });

  });

}

成功安装Vue实例后, 我们还将包括对loadPosts()的初始调用。

  mounted : function(){
    
    this.$nextTick(function(){

      // Load posts on initial page load
      this.loadPosts();
      
    });
    
  }

随着我们开始多次调用API, 将loadPosts()保留为单独的方法将在将来变得很方便。在我们的HTML中, 我们将使用Vue的简单列表呈现指令和模板语法来输出所有帖子。

有关有效的演示, 请参见嵌入式Pen:

请参阅CodePen上的Brian Coords(@bacoords)的Pen WP REST API搜索示例(第一阶段)。

阶段2:筛选结果

让我们添加一个侧边栏, 并创建一些过滤器以显示/隐藏各种来源。为此, 我们向sources对象添加一个新属性, 即一个布尔值。

在添加过滤器时, 让我们生成一个Vue过滤器, 以帮助我们正确显示日期。 WordPress将帖子的日期和时间存储为Unix时间戳。

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

 filters: {
    
    // Using Moment.js to convert post date to a readable format
    prettyDate: function(value){
      
      // Return if date is empty
      if(!value) return '';
      
      // Convert date to Moment.js
      var date = moment.utc(value);
      
      // Return formatted date
      return date.format("MMM DD, YYYY, ");
      
    }
    
  }, 

请参阅嵌入式笔以获取有效的演示:

请参阅CodePen上的Brian Coords(@bacoords)的Pen WP REST API搜索示例(第一阶段)。

最后阶段:搜索查询

在这里, 我们将一个新参数添加到我们的API请求中。我们已经添加了per_page = 3参数来限制从每个站点获得的结果数量。如果搜索栏中有任何内容, 我们将其添加为附加参数。

这将使我们能够使用每个网站的内置搜索功能, 就像在查询该网站上的搜索栏一样。

我们将添加搜索栏, 并使用Vue的v-model指令将其绑定到变量。

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

generateUrl : function(source){

  var self = this;

  // Add search parameters.
  if(self.searchQuery){

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

  }else{

    return source.url;

  }      

}

请参阅嵌入式笔以获取有效的演示:

请参阅CodePen上的Brian Coords(@bacoords)的Pen WP REST API搜索示例(第一阶段)。

虽然这是WP REST API的一个简单示例, 但我们可以想象WordPress本身内部可能有类似这样的应用程序。例如, 已经有” WordPress新闻”元框。

我们可以轻松地将此演示转换为WordPress插件, 然后将其显示在WordPress仪表板上。现在, 我们已经集成了直接从我们自己的网站上从一些顶级WordPress和Web设计教程站点中搜索帮助的功能。

REST API的未来潜力

尽管上面的示例仅涉及WP REST API功能的表面, 但它应该传达出一些在开始使用数据时开始出现的可能性。无论是用于增强网站本身的用户体验, 还是用于收集和处理来自外部来源的数据, 它都是一种功能强大的工具。

尽管一些行业专家对你的内容”被抓取”并在其他地方显示的可能性表示了担忧, 但重要的是要记住, 此功能类似于RSS提要, 并且对于站点维护者来说, 清楚地控制什么是数据是至关重要的。不公开。

随着WP REST API越来越多地融入WordPress结构中, 我们将开始看到它的效果, 甚至可能没有意识到它。例子从简单(克里斯·科耶尔(Chris Coyier)的《设计上的报价》》到复杂的单页应用程序(古根海姆网站)不等。

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

由于可以通过REST API轻松访问内容, 因此开发人员可以为iOS和Android创建本机应用程序, 而不必创建重复的数据源。

当用户与这些移动应用进行交互时, 他们将能够检索并直接转换原始网站的数据, 而开发人员不必创建任何复杂的基础结构来支持此操作。

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

随着将来WordPress的更新, 我们将开始看到admin-ajax被API取代, 希望可以提高基本功能的速度, 例如编辑菜单或发布帖子。

这可能与WordPress对Customizer和Editor的关注日益密切相关, 这是WordPress新手用户友好的起点。

尽管WP REST API仍然非常有用, 但还有更多工作要做。 API不完整。还有更多功能和端点要添加。

最终, 你甚至无需访问即可与WordPress网站进行交互。尽管许多服务现在都使用自定义API与WordPress进行交互, 但转向一种标准的WordPress REST API意味着可以使用相同的语言互连更多的站点和服务。

WordPress最初是博客平台, 博客作者可以通过这种平台建立联系, 并分享他们的想法和想法。随着WordPress REST API的开发, 我们将开始在幕后看到新的连接和共享水平。这将允许用户以以前从未考虑过的方式建立自己的思想和观念, 从而将WordPress及其用户带入全新的领域。

赞(0)
未经允许不得转载:srcmini » WordPress REST API:下一代CMS功能

评论 抢沙发

评论前必须登录!