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

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

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

什么是无头 WordPress？

无头 WordPress 网站是主要使用 WordPress 进行内容管理并使用任何其他技术构建前端并将内容显示给网站访问者的网站。

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

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

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

使用无头 WordPress CMS 的好处

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

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

如何为 ReactJS 设置 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 时，将显示此自定义帖子。

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

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

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

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

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

我通过输入示例数据和我的帖子的摘录创建了我的第一本书。

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

现在，URL 应该类似于 https://exampe.com/wp-json/wp/v2/books 。

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

安装并激活这两个插件。

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

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

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

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

React 入门

什么是 ReactJS

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

设置 React 应用程序

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

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

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

 npx 创建反应应用程序前端

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

 npm i axios

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

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

如果一切正常，我们都准备好使用 WordPress 作为无头 CMS 使用 React 构建我们的 Web 应用程序。

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

如何在 ReactJS 上渲染发布数据

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

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

导出类书籍扩展组件 {
   状态 = {
       书籍：[]，
       已加载：假
   }

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


   使成为（） {
      控制台.log(this.state);
       返回 （
           <div>
              
           </div>
       )
   }
}

导出默认图书

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

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

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

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

导出默认应用程序；

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

如何在 ReactJS 上显示帖子数据

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

 使成为（） {
       常量 {books, isLoaded} = this.state;
       返回 （
           <div>
               {books.map（书=>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

我们将创建一个新组件并将其命名为“ BookItems.js ”，而不是在这里显示数据，因为我想让它与父组件分开。

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

 使成为（） {
       常量 {books, isLoaded} = this.state;
       返回 （
           <div>
               {books.map（书=>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

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

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

 从“反应”导入反应，{组件}
从'axios'导入axios；
从 'prop-types' 导入 PropTypes；

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

导出默认 BookItems

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

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

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

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

   状态 = {
       imgUrl: '',
       作者： ''，
       已加载：假
   }

   静态 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 => {

           控制台.log(res);
           这个.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               作者：res[​​1].data.name，
               已加载：真

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

导出默认 BookItems

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

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

包起来！

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