使用WordPress和Frontity打造高性能无头博客

Frontity 是一款创新的服务器端框架，专为利用 WordPress 和 React 快速构建现代化网站而设计。它通过 REST API 从 WordPress 获取数据，再借助 React 生成浏览器端最终呈现的 HTML。用户可以继续沿用 WordPress 内容管理系统，无需额外切换平台。任何 WordPress 内的修改都会即时热重载到 Frontity 网站，确保前端实时同步更新。本文将详细指导你如何将 Frontity 与无头 WordPress 网站无缝集成，并逐步演示如何在服务器上部署由 Frontity 驱动的网站。

### 前提条件

在开始本教程前，请确保你已具备以下技能和资源：

– 熟练掌握 HTML、CSS 和 JavaScript 基础
– 深入理解 React 框架
– 在开发环境中成功安装 Node.js 和 npm
– 对无头 WordPress 概念有基本认知

### 传统 WordPress 与无头 WordPress 的对比

传统 WordPress 将内容管理与显示整合于单一平台。通过 WordPress 后台面板添加内容，再借助主题或插件进行展示。尽管这种方法便捷高效，但也存在明显局限：

– 主题选择受限，可能无法满足个性化需求
– 缺乏跨网站内容迁移的本地支持
– 过度依赖插件实现额外功能，可能影响网站性能

无头 WordPress 通过将内容管理系统与表现层分离，有效解决了上述问题。在这种架构下，WordPress 作为后台内容管理核心，前端则通过 REST API 或 WPGraphQL 获取数据，并利用 Frontity 等工具构建。这种方法带来三大核心优势：

– **速度优化**：采用现代网络技术提升加载性能
– **弹性扩展**：可独立扩展内容管理系统和前端，从容应对流量高峰
– **高度灵活**：不受主题和插件限制，自由创建定制化动态体验

### 设置开发环境

开始使用 Frontity 前，首先需要配置一个可运行的 WordPress 环境。Frontity 会为每个新项目自动生成 WordPress 演示站，但这里我们以 DevKinsta 为例配置本地环境：

1. 访问 DevKinsta 下载页面，选择适配你操作系统的安装包
2. 下载完成后运行安装程序，按照提示完成设置
3. 首次使用时，点击 “New WordPress site” 创建新站；已有账户则点击右上角 “Add site” 并选择新建选项
4. 填写网站名称、管理员用户名和密码，点击 “Create Site”
5. 在网站仪表板中，点击 “WP Admin” 打开 WordPress 管理面板，或点击 “Open Site” 查看实时网站

为确保 Frontity 正常运行，必须启用漂亮永久链接：

1. 进入 WordPress 后台 “设置” > “固定链接”
2. 选择 “文章名” 模式保存设置

此时，你的 WordPress 已包含 REST API。在网站 URL 后追加 /wp-json，即可查看 JSON 数据：

“`json
{
“version”: “5.9”,
“namespace”: “wp/v2”,
“rest_base”: “/wp/v2”,
“routes”: {
“”: {
“methods”: [“GET”],
“callback”: [“WP_HealthCheck::rest_get_index”]
},
“health-check”: {
“methods”: [“GET”],
“callback”: [“WP_HealthCheck::rest_get_health_check”]
},
“health-check/alive”: {
“methods”: [“GET”],
“callback”: [“WP_HealthCheck::rest_get_alive”]
},
“health-check/ready”: {
“methods”: [“GET”],
“callback”: [“WP_HealthCheck::rest_get_ready”]
},
“users”: {
“methods”: [“GET”, “POST”],
“callback”: [“WP_REST_Users_Controller”],
“args”: {
“context”: [
“view”,
“edit”,
“update”,
“create”
]
}
},
“users/(?P\d+):{
“methods”: [“GET”, “POST”, “PUT”, “PATCH”, “DELETE”],
“callback”: [“WP_REST_Users_Controller”],
“args”: {
“id”: {
“description”: “Unique identifier for the object.”,
“type”: “integer”,
“required”: true,
“validate_callback”: “rest_validate_request_arg”
},
“context”: [
“view”,
“edit”,
“update”,
“create”
]
}
}
}
}
“`

这是 Frontity 网站将依赖的数据源 API。

### 将 Frontity 与 WordPress 和 React 集成

按照以下步骤完成集成：

1. 打开终端，进入目标项目目录，执行：
“`
npx frontity create my-app
“`
可根据需要替换 my-app 为自定义项目名称

2. 选择主题：
Frontity 提供两种主题可选：
– mars-theme（推荐）
– twentytwenty-theme
按提示完成项目初始化

3. 进入新创建的目录，运行：
“`
npm frontity dev
“`
这将启动开发服务器，监听 3000 端口。访问 http://localhost:3000 即可看到预填充的演示页面。

默认情况下，`frontity.settings.js` 文件中的 `state.source.url` 指向测试网站。你需要将其修改为你的 WordPress 网站地址：

“`javascript
const settings = {
// 其他配置…
state: {
frontity: {
url: “http://your-site-url.com”,
// 其他设置…
},
packages: [
// 其他包配置…
{
name: “@frontity/wp-source”,
state: {
source: {
// 修改为你的 WordPress 网站地址
api: “http://your-site-url.com/wp-json”,
// 其他设置…
}
}
}
]
}
}
“`

注意：由于热重载不适用于 `frontity.settings.js` 的修改，需要重启开发服务器。此时除菜单外，其他内容应正常显示，因为菜单项仍指向未创建的页面。

### 使用 Frontity、WordPress 和 React 构建无头博客

#### 1. 重命名博客

修改 `frontity.settings.js` 文件中的博客配置：

“`javascript
const settings = {
name: “我的旅行博客”,
state: {
frontity: {
url: “http://your-site-url.com”,
title: “我的旅行博客”,
description: “探索世界，记录精彩”
}
}
}
“`

重启服务器即可查看更新效果。

#### 2. 为网站添加页面

当前网站包含自然、旅游、日本和关于页面的链接，但实际页面不存在。假设你只需要”关于我们”页面：

1. 在 WordPress 后台点击左侧菜单的 “页面”
2. 点击 “添加新页面”
3. 输入标题”关于我们”，使用区块编辑器添加内容
4. 点击发布

接下来配置菜单。由于 `mars-theme` 在 `frontity.settings.js` 中硬编码了菜单项，你需要：

1. 打开 `packages/mars-theme/src/index.js` 文件
2. 删除自然、旅游和日本页面的链接
3. 保留”关于我们”页面链接

“`javascript
const settings = {
// 其他配置…
packages: [
{
name: “@frontity/mars-theme”,
state: {
theme: {
menu: [
[“首页”, “/”],
[“关于我们”, “/about-us/”]
],
featured: {
showOnList: false,
showOnPost: false
}
}
}
}
]
}
“`

现在菜单应显示为：
– 首页
– 关于我们

你可以添加任意数量的页面，甚至支持分类或标签页面。

#### 3. 自定义主题

`mars-theme` 位于 `packages/mars-theme` 目录中，包含 `src/components` 文件夹。要自定义主题，可以修改或扩展这些组件。

例如，更改标题背景色：

1. 打开 `src/components/index.js`
2. 找到 `HeadContainer` 组件
3. 添加样式：

“`javascript
const HeadContainer = styled.div`
display: flex;
align-items: center;
flex-direction: column;
background-color: #4CAF50; /* 绿色背景 */
`;

// 保存后重启 Frontity 即可看到效果
“`

你也可以添加动画效果、调整布局或创建新组件。Frontity 提供了极大的自定义空间。

### 将 Frontity 网站部署到服务器

在将网站部署到生产环境前，需要将 DevKinsta 网站迁移到 Kinsta WP 托管：

1. 按照 DevKinsta 文档将网站迁移到 Kinsta WP
2. 获取新的托管网站 URL，更新 `frontity.settings.js`：

“`javascript
const settings = {
// 其他配置…
packages: [
{
name: “@frontity/wp-source”,
state: {
source: {
api: “https://your-hosted-site-url.com/wp-json”
}
}
}
]
}
“`

3. 将代码推送到 Git 仓库（Bitbucket、GitHub 或 GitLab）
4. 在 Kinsta 控制面板：
– 授权你选择的 Git 提供商
– 在左侧菜单选择 “Applications”，点击 “Add application”
– 选择版本库和分支
– 为应用命名并选择数据中心位置
– 选择 Standard build machine 配置和推荐 Nixpacks 选项
– 添加计费信息，点击 “Create application”

部署过程约需一分钟。完成后，Kinsta 会提供网站访问 URL，点击 “Visit App” 即可查看托管版本。

### 总结

传统 WordPress 适合快速搭建博客，但若想创建不受主题和插件限制的定制化博客，Frontity 是理想选择。通过本文的指导，你已掌握将 Frontity 与无头 WordPress 集成的完整流程，从开发环境配置到生产环境部署。现在，你可以开始构建真正属于你的现代化网站，充分发挥 React 和 WordPress 的强大组合优势。