什么是无头 WordPress？ 如何创建一个？ [教程]

WordPress 无头 CMS 的优点和缺点是什么？

Headless WordPress 有很多优点和缺点，每个优点和缺点都会影响您在不同场景下的工作。 为了清楚地了解，让我们以比较表的形式比较其优缺点。

无头 WordPress 好用吗？

如果您忽略我们之前提到的限制，在某些情况下使用无头 WordPress 可能会对您有利。

• 如果您的网站安全是重中之重，并且数据处理非常敏感或关键。
• 如果您喜欢定制设计和无限的可能性，而不受 WordPress 有限主题选项的限制，并且您正在寻求独特的前端设计，那么请选择 Headless WordPress。
• 如果您想让您的网站与 WordPress 的频繁更新和升级隔离。
• 如果您想让您的网站或应用程序面向未来并适应新技术、趋势和用户行为，而无需彻底检修整个基础设施，请考虑无头 WordPress。
• 如果您正在寻找演示网站、小型或短期项目或教程，无头设置可能是一个不错的选择。

无头 WordPress 是如何工作的？

在谈论标准 WordPress 时，它具有用户友好的界面和易于使用的管理面板，通过它您可以轻松编辑、创建和删除内容以及管理网站。

对于前端，它提供了数千个主题选项，结合内置主题以及第三方主题，在屏幕上制作一个具有视觉吸引力的网站。

但是，当您解耦 WordPress 时，您可以享受两全其美的好处。 为此，WordPress 有一个名为 WordPress REST API 的 API。

它是一个编程接口，允许开发人员使用标准 HTTP 方法访问 WordPress 网站数据并与之交互。

它允许开发人员远程检索、创建、更新和删除 WordPress 内容，这使得更容易将 WordPress 与其他应用程序平台或其他前端技术（如 React.js、Angular.js 等）集成以创建自定义网站。

如何让 WordPress 无头？ （无头 WordPress 教程）

您可以通过多种方式解耦标准 WordPress，具体取决于您要使用的技术、资源、首选语言和框架。 无论使用哪种方法，您都应该熟悉前端语言以及 WordPress Rest API。

但现在，我们将选择最简单的方法，因为大多数人都是初学者。 查看下面给出的步骤：

第 1 步：设置 WordPress

您需要做的第一件事是创建一个 WordPress 网站，就像您通常在服务器上创建的网站一样。 这意味着该网站应该是实时的，有自己的域名和适当的网络托管帐户。

但选择合适的 WordPress 托管平台本身就是一项非常困难的任务，甚至是设置 WordPress 和创建无头 CMS 时非常关键的一步。

它非常重要，因为即使前端和后端解耦，后端仍然需要驻留在需要托管的服务器上。

服务器不仅提供了存储所有网站内容的场所，而且无论使用哪种技术，其性能、安全性和可靠性对于将网站内容顺利交付到前端也非常关键。

因此，选择一台提供极速服务器性能和严格安全性的主机变得至关重要。

考虑到这一点，您可以选择 WPOven，它是最快、领先的完全托管 WordPress 托管公司之一，提供速度、企业级安全性和礼宾支持，确保您的无头 WordPress 之旅更加顺利。

• 具体来说， WPOven在顶级云提供商Linode上提供托管托管，确保高速性能和可扩展性。
• 该平台提供 WordPress 预安装，使 WordPress 和其他工具的设置变得轻松。
• 此外，借助内置的高级缓存系统和 Cloudflare 的内容交付网络 (CDN)，无论用户位于何处，您的内容都可以更快地交付。
• 此外，WPOven 通过内置 Web 保护防火墙和 SSL 安装确保企业级强大的安全性，帮助保护您的后端数据和交互。
• 自动备份和轻松恢复选项提供了额外的数据保护层，让您高枕无忧。
• 此外，WPOven 的 24/7 客户支持和广泛的知识库可确保快速解决任何问题，使您能够专注于构建和管理无头 CMS，而无需担心托管相关的麻烦。

第 2 步：启用 REST API

接下来，您需要做的是确保 WordPress REST API 已启用。 默认情况下，它在所有新安装的 WordPress 上启用。

但是，您仍然需要验证它是否在您的网站上启用。 您只需在浏览器中输入以下 URL 发出 API 请求即可做到这一点：

https://example.com/wp-json/wp/v2/

将“example.com”更改为您的实际域名，如果启用了 API，它将显示一个 JSON 响应，其中包含有关您网站帖子的一些信息。

或者，您可以借助插件，例如 WP REST API 插件。

阅读： WordPress REST API：入门指南

第3步：通过API获取帖子数据

如果您想获取发布数据，请按照下列步骤操作：

• 打开 WordPress 仪表板 > 设置 > 永久链接，然后选择帖子名称。

• 之后，您需要下载Postman API测试工具。
• 现在，在 Postman API 工具中输入以下格式的 URL。

https://mydomain.com/wp-json/wp/v2/posts

这将获取您的 WordPress 网站内的帖子数据。

第 6 步：设置 React 应用程序

现在我们已经完成了后端的工作，是时候开始前端的工作了。 首先，我们通过在终端中执行下面给出的代码来创建一个 React 应用程序。

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

此命令将使用 Vite 创建一个新的 React 应用程序，并安装必要的外部库或包。

另外，您还需要包含 Axios 来处理 HTTP 请求。 为此，运行以下命令来安装它。

npm install axios

现在，您可以通过在终端或命令提示符中运行命令npm run dev来启动应用程序的本地开发服务器。

当您运行此命令时，它将在您的本地计算机上启动一个服务器，并使您的应用程序可以通过 URL https://127.0.0.1:5173访问。

接下来您需要做的就是在代码编辑器（无论您喜欢什么，Visual Studio Code、Subkline Text、Atom 等）中打开项目，并删除不必要的文件，例如 index.css、app.css 等。

第 7 步：从 WordPress 检索帖子

在App.jsx文件的顶部，从 React 库导入useState挂钩。 这允许您在功能组件中使用状态。

import React, { useState } from 'react';

在你的功能组件App中，使用useState钩子初始化一个名为posts的状态。 该州将担任一系列职位。 useState([])使用空数组作为初始值来初始化posts 。

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

使用useState([])使用空数组初始化posts状态后，您需要添加代码以从 WordPress REST API 获取帖子。 这涉及到向提供帖子数据的 API 端点发出 HTTP 请求。

您需要在状态声明之后添加获取帖子数据所需的代码。 此代码通常涉及使用fetch()等方法或 Axios 等库向提供帖子数据的 WordPress API 端点发出 HTTP GET 请求。

接下来，在状态声明后添加以下代码，以从 WordPress REST API 检索帖子数据并相应地更新帖子。

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

此代码在组件安装时从 WordPress 网站的 REST API 获取帖子，并使用useState挂钩的setPosts函数使用获取的数据更新组件的状态。

第 8 步：创建博客组件并渲染它

现在在src文件夹内创建一个名为“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 (
<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>
);
}

该组件获取并显示作为道具传递的博客文章的标题、日期、摘录和特色图像。

之后将以下样式添加到 blog.css 文件中，

@import url("https://fonts.googleapis.com/css?display=swap&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语句中插入以下代码片段。 您可以在此处使用 JSX 语法定义组件 UI 的结构。

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

Here's the final version of your "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("https://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>
)
}

保存文件并刷新浏览器。 现在您将能够在屏幕上看到渲染的博客文章。

无头 WordPress 示例

为了供您参考并建立信心，我们在这里为您提供了一些 Headless WordPress 示例：

1.Techcrunch

如果你是一名科技爱好者，那么你一定对 TechCrunch 很熟悉。 这是一家领先的科技媒体和新闻网站。 他们重新设计了网站的前端，以提供无缝的用户体验。

为了实现这一目标，他们采用了 Headless WordPress 方法，并使用 React 应用程序创建前端和后端 WordPress。

2.Facebook品牌资源中心

Facebook 现在俗称 Meta，是一家社交媒体巨头，在其品牌资源中心网站中使用这种无头 WordPress 方法作为其品牌资产的风格指南。

该网站采用独特而优雅的网页设计与流畅的用户体验的独特融合。 如果 Facebook/Meta 像大型科技巨头一样可以的话。 相信无头 WordPress，你也可以。

结论

总之，除了它的某些限制、缺点或缺点之外。 如果实施得当，无头方法可以创造奇迹。 特别是对于喜欢创建无头 Web 应用程序的开发人员或内容创建者来说，它非常有利。

毫无疑问，解耦标准 WordPress 可以打开一个充满可能性的世界，例如获得使用 React 设计网站 UI 的自由以及使用 WordPress 管理内容的自由。

该技术使您能够享受每种技术的完整功能以及灵活性、可扩展性和 SEO 优化的优势。

在整个博客中，我们尝试解决有关无头 WordPress 的所有一般查询，并为您提供了一些有关如何创建无头 WordPress 的步骤供您参考。 （但是，可以有多种方法来解耦 WordPress，因此请遵循您认为最简单的方法）。

经常问的问题

拉胡尔

Rahul Kumar 是一位网络爱好者和内容策略师，专门从事 WordPress 和网络托管。 凭借多年的经验和对了解最新行业趋势的承诺，他制定了有效的在线策略来增加流量、提高参与度并提高转化率。 拉胡尔对细节的关注以及制作引人入胜的内容的能力使他成为任何希望提高其在线形象的品牌的宝贵资产。