如何用React.js创建一个无头的WordPress网站

WordPress是最流行的内容管理系统（CMS）之一，有8.1亿人在使用–占整个互联网的41%！它是任何想快速建立网站的人的首选，因为它简单易行，提供广泛的定制选项，也有强大的插件和其他资源！它是任何想快速建立一个网站的人的首选，因为它简单、用户友好，提供各种各样的定制选项，而且还有一个强大的插件和其他资源的生态系统。

让WordPress发挥最大作用的一个方法是采用无头的方式。

无头CMS，也被称为无头系统，是一种只用于管理内容的后台CMS。这有助于你将内容整合到任何系统或网站中，只需调用无头CMS的API。

然而，这使得前端需要单独管理。这就是API的作用。

API允许两个或多个不同的应用程序交换数据。在这种情况下，API被用来将数据从CMS传输到前端网站，提供更多的灵活性和更快的性能。

在这篇文章中，我们将探讨什么是无头CMS，为什么你可能想建立一个，以及如何使用React为WordPress设置一个。

1. 什么是无头的WordPress？
2. 无头WordPress的优点和缺点
3. 什么是WordPress REST API？
4. 什么是React？
5. 如何用React创建一个无头的WordPress网站

什么是无头的WordPress？

无头WordPress网站是一种主要使用WordPress作为CMS，即内容管理系统，并在前端使用其他前端技术，如React或Vue。

JavaScript库和框架是用来显示网站内容的。因此，无头的WordPress有一个独立的前端和后端，并使用API进行通信。

更简单地说，无头架构意味着CMS只用于存储和管理你的内容，它并不关心网站的前端。

另一方面，前端的主要工作是显示内容，而它又不关心内容是在哪里存储或管理的，只要它能到达。

一个无头的WordPress有更好的性能，因为前端的请求是由更快的技术（如React）处理的，而只有后端是由WordPress管理的。前台和后台的分离使得独立扩展组件成为可能。

无头WordPress的优点和缺点

与所有的开发选项一样，使用无头的WordPress解决方案既有好处也有坏处。在做出决定之前，了解这两点是很重要的。

无头WordPress的优点

无头WordPress实施的一些主要好处包括以下几点：

• 灵活性：无头WordPress允许开发人员创建自定义的前端体验，而不受传统WordPress主题系统的限制。这意味着你可以为特定需求创建独特的用户界面和体验。
• 性能：将WordPress网站的前端和后端分开，可以使你的网站加载更快，提高网站的性能，因为服务器只是通过API传递数据，而不是为每个请求渲染HTML。
• 安全性：通过分离前端和后端，无头WordPress可以通过限制对底层WordPress代码库和数据库的访问，提供额外的安全层。

无头WordPress的缺点

无头WordPress的缺点可能包括：

• 缺少主题：由于无头的WordPress不依赖预建的主题，你将需要创建你自己的自定义主题。这可能很耗时，而且可能需要额外的资源。
• 成本：开发一个无头WordPress网站可能比传统的WordPress网站更昂贵，因为它需要更多的技术专长和资源来设置和维护。
• 插件限制：一些WordPress插件可能无法在无头WordPress中使用，因为它们需要依靠WordPress主题才能正常运行。

什么是WordPress REST API？

WordPress REST API被用作后台和前台之间的接口。通过API，可以轻松地从网站上发送或检索数据，因为API对网站的数据有控制权限。它还确保只有授权用户可以与之互动。

API可以支持广泛的数据格式，包括JSON，这使得与系统的互动变得很容易。

WordPress REST API是开发人员创建、更新或删除数据的强大工具，此外还可以为网站创建自定义功能或与其他服务集成。此外，还有一些插件可以扩展API的功能，如集成额外的认证方法。

什么是React？

React是一个用于构建用户界面的JavaScript库。它是一个开源的、可重用的基于组件的前端库，允许开发者使用声明式语法构建用户界面（UI）组件。

React创建了一个交互式UI，并在数据变化时渲染组件。该库在希望创建复杂的、可重复使用的组件的开发者中非常流行；有效地管理状态；并容易实时更新用户界面。

React强大的开发者社区创造了一系列工具、库和资源，以增强该库的功能。许多组织和企业正在采用React作为他们的技术来构建复杂、动态和快速性能的网络应用。

使用React.js的热门公司  (source: inexture.com)

为什么使用React？

React提供了许多好处，使其成为开发复杂和动态网络应用的绝佳选择。

以下是使用React的一些关键优势：

• 声明式语法：React使用声明式的方法来构建UI组件，使得创建可重用和高效的组件变得容易。
• 大型社区和生态系统：React有一个庞大而活跃的开发者社区，这导致了一系列工具和库的产生，以增强其功能。
• 虚拟DOM：React使用虚拟DOM来实时更新UI。这意味着当状态改变时，它只更新需要改变的组件，而不是重新渲染整个页面。
• 可重用性：React.js提供了可重复使用的组件，可以在不同的应用程序中使用，这大大减少了开发时间和精力。

如何用React创建一个无头的WordPress网站

现在是时候让我们动手了，学习如何用React创建和部署一个无头WordPress网站。

请继续阅读，深入了解。

前提条件

在你开始学习本教程之前，请确保你有：

• 对React有良好的了解
• 在你的机器上安装了Node.js v14或更高版本。

Step 1. 设置一个WordPress网站

让我们从设置WordPress网站开始，因为这将作为React应用程序的数据源。如果你已经设置了一个WordPress网站，你可以跳过这一部分；否则，就跟着做吧。

在本教程中，我们将使用DevKinsta，一个广泛使用的快速、可靠的本地开发环境，用于创建、开发和部署WordPress网站。它的使用是完全免费的–只需从官方网站下载并安装在你的系统上。

安装完成后，打开DevKinsta仪表板，点击New WordPress site，创建一个新的WordPress网站。

填写所需的此类输入，然后按Create site按钮继续。

DevKinsta网站创建页面

这可能需要几分钟的时间，但一旦你的网站创建完毕，你就可以分别点击 “Open site” 或WP Admin选项来访问它和它的管理面板。

接下来，为了启用JSON API，你需要更新你网站的permalinks。

在WordPress的管理面板上，点击设置，然后是固定链接。选择文章名称选项并点击保存更改。

WordPress固定链接设置

你还可以使用Postman等工具来轻松地测试和发送对WordPress REST API的请求。

Step 2: 设置一个React应用程序

现在我们已经建立了WordPress网站，我们可以开始在前台工作了。如上所述，在本教程中，我们将使用React作为我们应用程序的前端。

为了开始工作，在你的终端运行下面的代码来创建一个React应用程序。

npm create vite@latest my-blog-app 
cd my-blog-app 
npm install

上述命令将创建一个React应用程序，并安装所需的依赖项。

我们还需要安装Axios，一个用于发出HTTP请求的JavaScript库。运行下面的命令来安装它。

npm install axios

现在，为了启动开发服务器，你可以在终端运行 npm run dev 。然后服务器应该在http://127.0.0.1:5173，初始化你的应用程序。

Vite + React登陆页面

接下来，在你喜欢的代码编辑器中打开你的项目，删除任何你不需要的不必要的文件，如assets文件夹、index.css和app.css。

你也可以用以下代码替换main.jsx和App.jsx里面的代码：

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
,
)

// App.jsx
import React from 'react'
export default function App() {
return (

)
}

Step 3: 从WordPress取回文章

现在是时候从我们的WordPress网站上获取文章了。

在App.jsx中，添加以下状态并从React导入 useState ：

const [posts, setPosts] = useState([])

useState 是React中的一个内置钩子，用来给组件添加状态，一个状态指的是数据或属性。

posts 用于从状态中获取数据， setPosts 用于向post添加新数据。我们也默认给state传递了一个空数组。

接下来，在state后面添加以下代码，从WordPress REST API中获取文章：

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

上面的代码是在页面加载时运行 fetchPosts() 函数。在 fetchPosts() 函数中，我们使用Axios向WordPress API发送一个 GET 请求，以检索文章，然后保存到我们先前声明的状态。

Step 4: 创建一个博客组件

在根目录中，创建一个名为components的新文件夹，并在其中创建两个新文件：blog.jsx和blog.css。

首先，在blog.jsx中添加以下代码：

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedimage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedimage(response.data.source_url);
});
};
useEffect(() => {
getImage();
}, []);
return (



{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}

{post.title.rendered}



);
}

在上面的代码中，我们创建了一个卡片组件，从WordPress的API中获取包含博文信息的 post 属性。

在 getImage() 函数中，我们使用Axios来获取特色图片的URL，然后将该信息保存为状态。

然后，我们添加了一个 useEffect 钩子，一旦组件安装完毕就调用 getImage() 函数。我们还添加了返回语句，在该语句中我们要渲染文章数据、标题、摘录和图片。

接下来，将下面的样式添加到blog.css文件中：

@import url("https://fonts.googleapis.com/css?family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}
.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}
.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

然后，在App.jsx文件中，在 return 语句中添加以下代码，以渲染博客组件：

{posts.map((item) => (

))}
;

最后，这就是你的App.jsx应该有的样子：

import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("http://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}
useEffect(() => {
fetchPosts()
}, [])
return (

{posts.map((item) => (

))}

)
}

保存文件并刷新你的浏览器标签。现在你应该能够看到你的博客文章在页面上呈现。

使用React.js的无头WordPress

小结

无头的WordPress为创建具有可扩展架构的快速表现的网站提供了一个很好的方法。随着React和WordPress REST API的使用，以WordPress为内容管理系统创建动态和互动的网站比以往任何时候都容易。

上述教程主要讲述的是利用React来创建无头WordPress，但如果你希望使用Vue来实现，可以考虑我们另外一篇教程。