WordPress是最流行的内容管理系统（CMS）之一，有8.1亿人在使用–占整个互联网的41%！它是任何想快速建立网站的人的首选，因为它简单易行，提供广泛的定制选项，也有强大的插件和其他资源！它是任何想快速建立一个网站的人的首选，因为它简单、用户友好，提供各种各样的定制选项，而且还有一个强大的插件和其他资源的生态系统。
让WordPress发挥最大作用的一个方法是采用无头的方式。
无头CMS，也被称为无头系统，是一种只用于管理内容的后台CMS。这有助于你将内容整合到任何系统或网站中，只需调用无头CMS的API。
然而，这使得前端需要单独管理。这就是API的作用。
API允许两个或多个不同的应用程序交换数据。在这种情况下，API被用来将数据从CMS传输到前端网站，提供更多的灵活性和更快的性能。
在这篇文章中，我们将探讨什么是无头CMS，为什么你可能想建立一个，以及如何使用React为WordPress设置一个。
- 什么是无头的WordPress？
- 无头WordPress的优点和缺点
- 什么是WordPress REST API？
- 什么是React？
- 如何用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}
使用React.js的无头WordPress
小结
无头的WordPress为创建具有可扩展架构的快速表现的网站提供了一个很好的方法。随着React和WordPress REST API的使用，以WordPress为内容管理系统创建动态和互动的网站比以往任何时候都容易。
上述教程主要讲述的是利用React来创建无头WordPress，但如果你希望使用Vue来实现，可以考虑我们另外一篇教程。
内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家
阿里云企业补贴进行中： 马上申请
腾讯云限时活动1折起，即将结束： 马上收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折，更有现金返利:同意关联，立享优惠本文来自投稿，不代表新手站长_郑州云淘科技有限公司立场，如若转载，请注明出处：https://www.cnzhanzhang.com/1555.html
赞 (0)在WordPress中重写URL的一些提示和插件__wordpress教程上一篇 2023年12月14日 下午4:32使用不同的方法获取WordPress文章和页面ID__wordpress教程下一篇 2023年12月14日 下午4:32
