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

如何用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的热门公司

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

为什么使用React?

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

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

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

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

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

请继续阅读,深入了解。

前提条件

在你开始学习本教程之前,请确保你有:

Step 1. 设置一个WordPress网站

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

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

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

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

DevKinsta网站创建页面

DevKinsta网站创建页面

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

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

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

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登陆页面

Vite + React登陆页面

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

你也可以用以下代码替换main.jsxApp.jsx里面的代码:

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
// App.jsx
import React from 'react'
export default function App() {
return (
<App />
)
}

Step 3: 从WordPress取回文章

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

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

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

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

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.jsxblog.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 (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

在上面的代码中,我们创建了一个卡片组件,从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 语句中添加以下代码,以渲染博客组件:

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

最后,这就是你的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 (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

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

使用React.js的无头WordPress

使用React.js的无头WordPress

小结

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

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

评论留言