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折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折,更有现金返利:同意关联,立享优惠本文来自投稿,不代表新手站长_郑州云淘科技有限公司立场,如若转载,请注明出处:http://www.cnzhanzhang.com/1555.html
赞 (0)在WordPress中重写URL的一些提示和插件__wordpress教程上一篇 2023年12月14日 下午4:32使用不同的方法获取WordPress文章和页面ID__wordpress教程下一篇 2023年12月14日 下午4:32