使用 WordPress 和 React 为您的 Web 应用程序创建无头 CMS

WordPress Rest API 是 WordPress 提供的众多强大功能之一。 它使开发人员能够创建引人入胜的插件和主题，并允许他们使用 WordPress CMS 为第三方应用程序提供支持。

在现代 Web 应用程序中，还开发了内容管理系统来管理网站的内容。 这会给开发人员增加额外的工作量。 由于Rest API提供了如此多的可能性，人们还可以将 WordPress 与 React 结合使用，作为基于 JavaScript 的 Web 应用程序的无头 CMS。

那么无头 WordPress 到底是什么？

成为“无头”绝对不意味着 CMS 缺少标题部分。 这意味着您可以将 CMS 用作通用内容管理系统，而不管用于构建前端的技术如何。

只要使用相同的 JSON 语言，Rest API 就允许开发人员与跨技术接口交互。 WordPress Rest API 以 JSON 格式输出数据，这可以被大量 Web 技术理解。 JSON 是 JavaScript 对象的基于文本的表示形式，其中包含键值对中的数据。

 “朋友们”： [
      {
        “身份证”：0，
        “名称”：“哈丽特·斯坦利”
      },
      {
        “身份证”：1，
        "name": "本顿奥多姆"
      },
      {
        “身份证”：2，
        “姓名”：“杰基·爱德华兹”
      }
    ],

今天，我将展示WordPress Rest API的强大功能，将其与 React 和WordPress一起用作我的基本 Web 应用程序的无头 CMS。

使用 Headless WordPress CMS 的好处

作为一个开源平台； WordPress 为创建任何类型的网站提供了极大的灵活性。 将 WordPress 用作无头 CMS，您可以使用任何 Web 技术创建 Web 应用程序的前端，并使用最流行的 CMS 之一管理其内容。

您可能会遇到需要在使用 React 或 Angular 构建的现有 Web 应用程序中添加博客功能的情况。 而不是在原生框架中编写成熟的内容管理系统； 使用无头 WordPress CMS 使用 Rest API 管理内容。

设置 WordPress 网站

让我们从设置 WordPress 站点开始，因为这将充当我们前端 React 应用程序的数据源。

从 git 下载WP-Rest API插件的 zip 文件，并将 zip 文件夹上传到您的 WordPress 插件文件夹中。 文件上传后，激活插件。 这将在您的 WordPress 网站内启用 WordPress Rest API。

现在，转到设置 → 固定链接，然后选择帖子名称或自定义结构。

由于我们正在处理 API 调用，因此请下载Postman的 chrome 扩展。 在 Postman 中，按以下格式输入 URL：

https://example.com/wp-json/wp/v2/posts

上面的 URL 将获取您的 WordPress 站点内的帖子数据。

下载用于创建自定义帖子类型的自定义帖子类型 UI插件。 当我们在下一步中将 WordPress 与 React 结合使用时，将显示此自定义帖子。

安装并激活插件并继续添加新的帖子类型。 在本教程中，我将为图书创建自定义帖子类型。

在 Post Type Slug 中，键入自定义帖子的名称。

确保在 REST API中显示复选框设置为true并且还设置了 REST API base slug。 如果您希望将 WordPress 用作无头 CMS，这是强制性的。

选中您希望从 REST API 获取的信息的所有框。

保存更改后，您会注意到侧栏中填充了一个新选项。 单击它以在您的自定义帖子类型中添加新书。

我通过放入示例数据以及我的帖子摘录来创建我的第一本书。

要通过 API 验证数据是否可用，请继续点击 Postman 中的 URL。

现在，URL看起来应该像https://exampe.com/wp-json/wp/v2/书

我们还可以使用ACF和ACF 向 RestAPI插件添加更多字段，例如 Publisher。

安装并激活这两个插件。

默认情况下，ACF 不与 WordPress Rest API 对话，因此，我们还需要下载ACF REST API插件。

通过使用自定义字段插件，我将为我的图书添加 Publisher 字段。

确保从列表中选择所需的帖子类型。 之后点击“发布”。

在我的自定义帖子类型中填充了一个新字段，我可以在其中定义我的书的出版商。 这就是我们设置 WordPress 以将数据发送到 ReactJS Web 应用程序所需要做的全部工作。

React 入门

什么是 ReactJS

React 是一个由 Facebook 和开发者社区维护的网络 JavaScript 库。 JavaScript 是一个强大的 Web 开发工具，有几个用 JavaScript 编写的库可以增强网站的功能。 ReactJS 主要用于开发快速、健壮和动态的单页应用程序。

设置 React 应用程序

要使用 React 构建应用程序，您需要在您的计算机上安装以下依赖项。

• NodeJS 和 NPM。
• 文本编辑器，例如 Sublime 或 Visual Studio Code。
• 用于版本控制的 Git（可选）

环境搭建好后，打开命令行，运行以下代码，使用ReactJS创建项目。

 npx create-react-app 前端

创建应用程序后， cd（更改目录）到应用程序文件夹并键入以下命令以安装用于 API 调用的Axios包。

 npm 和 axios

现在，打开您最喜欢的文本编辑器中的文件夹。 我正在使用 Visual Studio 代码。

通过运行命令 npm start 启动应用程序。

如果一切正常，我们就可以使用 WordPress 作为无头 CMS 使用 React 构建我们的 Web 应用程序。

在src文件夹中创建一个新文件夹 ' components '，并在 ' components ' 文件夹中创建一个新文件 ' Books.js '。

在 ReactJS 上渲染 Post 数据

在Book.js文件中，我们将从 WordPress Rest API 获取数据。 下面是请求 Rest API 端点的代码——在我的例子中是“ /books ”——并以 JSON 格式显示数据。

 从“反应”导入反应，{ 组件}
从 'axios' 导入 axios；

导出类书籍扩展组件{
   状态 = {
       书籍：[]，
       isLoaded: 假
   }

 组件DidMount（）{
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           书籍：res.data，
           isLoaded: 真
       }))
       .catch(err => console.log(err))
   }


   使成为（） {
      控制台日志（这个状态）；
       返回 （
           <div>
              
           </div>
       )
   }
}

导出默认图书

上面的代码将在控制台中显示数据数组，然后在渲染块内使用。

现在，在App.js文件中调用Books组件，如下所示。

 从“反应”导入反应；
导入'./App.css';
从“./components/Books”导入书籍；

功能应用（）{
 返回 （
   <div className="应用程序">
    <书籍/>
   </div>
 );
}

导出默认应用程序；

App.js是我们 Web 应用程序的入口点，因此，引用此文件中的“Books”组件很重要。

在 ReactJS 上显示发布数据

可以通过在render 方法中添加代码来显示数据。

 使成为（） {
       const {books, isLoaded} = this.state;
       返回 （
           <div>
               {书。地图（书=>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

我们将创建一个新组件并将其命名为“ BookItems.js ”，而不是在此处显示数据，因为我希望将其与父组件分开。

将Bookk.js 中的 render 方法更改为：

 使成为（） {
       const {books, isLoaded} = this.state;
       返回 （
           <div>
               {书。地图（书=>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

现在，我们需要渲染 BookItems 组件。

在BookItems.js 中添加以下代码：

 导入 React, { Component } from 'react'
从 'axios' 导入 axios；
从 'prop-types' 导入 PropTypes；

导出类 BookItems 扩展组件 {
 
   使成为（） {
       const { title } = this.props.book;
       返回 （
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

导出默认 BookItems

在上面的代码中，我引用了 book 属性来获取标题和其他信息。

注意：确保引用“Books”组件中的BookItems组件。

我的BookItems.js最终版本如下所示：

 从“反应”导入反应，{ 组件}
从 'prop-types' 导入 PropTypes；
从 'axios' 导入 axios；
导出类 BookItems 扩展组件 {

   状态 = {
       imgUrl: '',
       作者： ''，
       isLoaded: 假
   }

   静态 propTypes = {
       书：PropTypes.object.isRequired
   }

   组件DidMount（）{
       const {featured_media, author} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all([getImageUrl, getAuthor]).then(res => {

           控制台日志（res）；
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               作者： res[1].data.name,
               isLoaded: 真

           });
       });
    }
 
   使成为（） {
       const { 标题，摘录} = this.props.book;
       const {author, imgUrl, isLoaded} = this.state;
       返回 （
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{作者}</strong><br/>
              <div risklySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

导出默认 BookItems

浏览器中的输出如下所示：

不是最漂亮的吧？ 嗯，那是因为样式超出了本教程的范围。

包起来！

今天，我向您展示了如何将 WordPress 与 React 一起用作 Web 应用程序的无头 CMS。 你也可以在 Git 上下载 React 代码。 但是，它不仅限于 React。 您还可以尝试使用 VueJS、Angular 或任何 JavaScript 框架。 您可以使用 WordPress Rest API 做很多事情。 天无绝人之路，所以继续为您的下一个 Web 项目使用 WordPress。