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

如何用React.js创建一个无头的WordPress网站__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创建一个无头的WordPress网站__wordpress教程

使用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按钮继续。

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

DevKinsta网站创建页面

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

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

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

如何用React.js创建一个无头的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,初始化你的应用程序。

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

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(


,
)
// 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.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 (

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

{post.title.rendered}

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

使用React.js的无头WordPress

小结

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

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

内容没看懂? 不太想学习?想快速解决? 有偿解决: 联系专家

阿里云企业补贴进行中: 马上申请

腾讯云限时活动1折起,即将结束: 马上收藏

同尘科技为腾讯云授权服务中心。

购买腾讯云产品享受折上折,更有现金返利:同意关联,立享优惠

本文来自投稿,不代表新手站长_郑州云淘科技有限公司立场,如若转载,请注明出处:https://www.cnzhanzhang.com/1555.html

(0)
匿名
上一篇 2023年12月14日 下午4:32
下一篇 2023年12月14日 下午4:32

相关推荐

新手站长从“心”出发,感谢16年您始终不离不弃。