人工智能、改进的开发工具和现代托管环境正在让无头 WordPress 在设计师和开发人员之间获得新一轮关注。这种演变正在塑造分布式数字体验的设计、构建和部署方式。
在本教程中，我们将探索如何使用 Lovable（一个由 AI 驱动的前端构建器）创建一个由无头 WordPress 后端驱动的现代网站。
我们今天所看到的让你得以一窥 WordPress 的未来，无论是无头模式还是传统模式：一种更开放、协作和 AI 辅助的方式来创建融合内容管理与创意设计自由的数字体验。
了解无头 WordPress
设置无头 WordPress 环境比听起来更简单。把它想象成将 WordPress 分成两部分：
- 后端 – WordPress 继续像往常一样管理你的内容、媒体和数据。
- 前端 – 一个独立的应用负责处理所有内容的外观和行为。
通过分离两者，你既保留了 WordPress 可靠的内容管理，又获得了使用 React 或 Vue 等现代前端框架进行设计和构建的自由。这就是取 WordPress 之长，并将其扩展到传统设置无法企及的领域。
另一种理解方式：WordPress 处理结构（你的内容），而你的前端处理样式（如何呈现内容）。
为什么选择 Lovable？
无头 WordPress 真的有必要吗？这取决于你的目标。对于许多项目来说，标准的 WordPress 设置仍然是最简单、最高效的路径。然而，如果你想要更多灵活性、更快的迭代，或者构建超越传统主题和插件的现代 Web 应用的方式，无头 WordPress 就会开始大放异彩。
对于这个项目，我们使用了 Lovable，这是一个 AI 驱动的开发平台，可以帮助你生成、编辑和管理前端代码。它使用 React、Tailwind CSS 和 Vite 等现代工具构建，并使用 AI 提示来处理布局、样式和组件逻辑。
换句话说，Lovable 不是前端本身。它是创建和维护前端的环境。
以下是它适合我们实验的原因：
- 版本控制灵活性：轻松与 GitHub、GitLab 或 Bitbucket 进行双向同步。
- 跨平台设计：从单一 WordPress 后端为 Web、移动或 kiosk 显示屏进行构建。
- 即时迭代：使用 AI 提示在几秒内更新布局、样式或组件。
- 分离式安全：前端侧不直接暴露数据库。
- 支持静态构建：轻松部署为静态 HTML、CSS 和 JavaScript，以获得更好的性能和可靠性。
当然，无头设置并非没有取舍。维护多层堆栈会使调试更加复杂，而在前端渲染内容的插件可能需要自定义 API 桥接。不过，对于静态或内容驱动的站点，将 WordPress 与 Lovable 配对提供了一种快速、现代的方式来探索无头的可能性。
开始之前
在构建之前，让我们设置堆栈的两个主要部分：Lovable 用于前端，WordPress 用于后端。
步骤 1：创建 Lovable 项目
访问 lovable.dev 并创建一个免费账户。进入仪表板后，通过输入简短的提示来启动新项目。
聊天界面让你感觉像是在和队友交谈。你可以自然地打字，就像在真实对话中一样。例如，你可以从一个简单的问题开始：
How do we start building a frontend with WordPress on the backend?
Lovable 会给出清晰的指导，引导你了解各种选择：
使用 React 构建前端，并让 WordPress 作为无头 CMS 是个不错的方案。
你可以使用内置的 WordPress REST API，或者安装 WPGraphQL 来处理更复杂的数据查询。
这第一次互动为整个过程定下了基调。它快速概述了可能实现的功能，帮助你了解 WordPress 如何与你的前端集成。
然后你可以通过提示 AI 保持简单来完善这个想法：
我们想简单一点。只是想搭建一个演示博客站点，以及一个页面作为动态样式指南。
Lovable 会立即进行调整，创建一个干净的演示站点，并设置一个样式指南页面，你以后可以用它来进行全局设计更新。
从现在开始，对话自然地进行。你和 Lovable 来来回回地完善细节，明确需要什么才能继续前进。在某个时刻，Lovable 可能会向你询问一些必要的设置细节，例如：
2. WordPress REST API 是否公开可访问？
3. 哪些 WordPress 内容应该映射到你的博客？（文章、页面或自定义文章类型？）
4. 你想获取自定义字段吗？（例如阅读时间或特色标记）
一旦你提供这些信息，Lovable 就可以自动生成集成逻辑，将你的前端与 WordPress 后端连接起来。
步骤 2：设置 WordPress
在 Lovable 能拉取真实内容之前，你需要一个正常运行的 WordPress 站点作为后端。你的所有文章、页面和媒体都存放在这里。
为了顺利设置，请使用可靠的 WordPress 托管服务商，比如 Kinsta，它建立在强大的云基础设施上，确保性能和正常运行时间不是问题。在 Kinsta 注册并创建一个新的 WordPress 站点，你会自动获得一个临时子域名，例如：
https://your-site.kinsta.cloud/
站点创建后，检查 REST API 是否公开可用。打开一个新的浏览器标签页，访问：
https://your-site.kinsta.cloud/wp-json/wp/v2/posts
如果看到显示文章数据的 JSON 提要，你的后端就准备好了。
步骤 3：将 WordPress 连接到 Lovable
一旦你的 WordPress 站点上线并且 REST API 正常工作，就该将后端连接到你的 Lovable 项目了。这是内容和设计最终结合的地方。
在 Lovable 的聊天中，你可以直接问：
好的，我们如何将前端连接到我们的 WordPress CMS？
Lovable 会回复一个清晰的计划，解释需要什么：
你将使用 WordPress 的 REST API 连接到你的 WordPress 后端。
你需要：
1. WordPress REST API（内置的，可在 yoursite.com/wp-json/wp/v2/posts 访问）
2. 如果你的前端在不同的域上，需要一个 CORS 插件
3.（可选）ACF 或自定义字段用于额外数据
它还会给你一个两边的概述：
- 在 WordPress 端： 确保 REST API 已启用（通常默认是启用的）。
- 在端： 用对 WordPress 的 API 调用替换任何静态博客数据，创建一个服务来获取数据，并处理加载状态。
你看到 Lovable 清晰地列出这些，有时甚至会向你展示一个这样的示例：
const { data: posts } = useQuery({
queryKey: ['posts'],
queryFn: async () => {
const response = await fetch('https://your-site.kinsta.cloud/wp-json/wp/v2/posts');
return response.json();
}
});
接下来，Lovable 会根据你提供的 WordPress URL 创建一个前端站点，显示你的 WordPress 文章。
就是这么快。集成已上线，连接已验证，您的无头站点现在已具备从 WordPress 到 Lovable 的完整内容流。
样式和设计系统
WordPress 连接上线后，您可以开始优化网站的外观和体验。此时，您看到的所有内容都由 Tailwind CSS 和浏览器默认设置进行样式处理。这为您提供了一个干净的起点，但现在 是时候让它成为您自己的了。
您可以直接向 Lovable 提问：
Is all styling currently provided by TailwindCSS and the User Agent?
Lovable 解释道：
Yes. All styling is currently provided by TailwindCSS (via index.css and tailwind.config.ts) and the User Agent's default styles. The App.css file exists but isn't imported anywhere.
考虑到这一点，您可以开始自定义站点的结构和导航。例如，您可以提示：
Connect to all pages, posts, and media, and set up a header navigation as follows:
Home
Style Guide
Blog
Trip To Santa Fe
Hello World
Make the Home page the root of the site.
Lovable 会重新组织您的路由，并在 Blog 下拉菜单中动态链接您的 WordPress 帖子。导航现在可以在各个页面之间正常工作：Home、Blog，以及您的 Dynamic Style Guide，后者成为您进行全局设计更改的中心。
使用动态样式指南
此页面用于定义和控制整个站点的全局样式。您在此处进行的任何更改都会即时更新所有页面。
您可以先设置基础配色方案和字体排版：
Set page background color to #7B3F00.
Set all text color to #eee.
Heading 1 = 2rem
Heading 2 = 1.5rem
Heading 3 = 1.25rem
Heading 4 = 0.84375rem
All other text = 1rem
Lovable 快速应用新的设计系统，为您的站点提供温暖的棕色背景、柔和的灰色文字和一致的字体层次结构。
从这里开始，您可以继续优化您的方法。例如：
Double the size of all headings.
Add 10% left and right margin to the page.
Create a 2x2 image gallery with 20px spacing, rounded corners (20px radius), and a 2px solid white border.
Lovable 会实时调整布局，您会立即看到图片画廊形成。
全局字体和间距调整
您可以通过应用一致的字体和间距规则来进一步提升您的设计：
Align the page title to the left.
Use the Cowboy (Rye) font for all headings and Roboto for all other text.
Double the line height for all paragraphs and quote elements.
Add 5% top/bottom and 10% left/right margins to the quote block.
Lovable 会更新您的字体排版、行高和边距。
如果看起来不太对，例如标题实际上没有左对齐，您可以要求 Lovable 检查：
The page title isn't aligned left. Why?
它会解释：
The container has mx-auto, which centers it. I'll remove that for true left alignment.
定义全局按钮样式
接下来，您可以为您的按钮带来视觉一致性。在您的动态样式指南中，提示 Lovable 创建三种按钮尺寸，并配备清晰的悬停状态：
1. 按钮应为矩形。
2. 使用黑色背景配白色文字，悬停时反转颜色。
3. 中号按钮宽度为小号的 125%；大号为 150%。
4. 添加 20px 圆角。
如果看不到按钮，Lovable 可以添加一个展示区来预览它们。显示后，它将应用您的自定义样式。
以下是一个生成的 CSS 示例，您也可以在 WordPress 中使用：
.wp-button {
background: #000;
color: #fff;
border-radius: 20px;
padding: 0.5rem 0.9375rem;
transition: all 0.3s ease;
}
.wp-button:hover {
background: #fff;
color: #000;
}
.wp-button-sm { width: 100%; }
.wp-button-md { width: 125%; }
.wp-button-lg { width: 150%; }
Lovable 还解释了如何将这些样式导入您的 WordPress 主题，只需将变量复制到主题的 CSS 中，然后在块编辑器或模板中应用 .wp-button 类即可。
部署
连接并样式化您的无头站点后，最后一步是部署，即将其上线。
Lovable 的代码库是可移植的，这意味着您可以将前端推送到任何基于 Git 的平台并从那里进行部署。在本指南中，我们将使用 Sevalla，这是一个由 Kinsta 团队构建的平台，将强大的云托管与开发者友好的自动化相结合。
Sevalla 提供免费静态站点托管，具有全球边缘分发和 Git 推送时自动部署功能。代码同步到 GitHub、GitLab 或 Bitbucket 后，只需点击几下即可将存储库连接到 Sevalla。
上线方法如下：
- 在您的 Sevalla 仪表板中，转到静态站点并点击添加站点。
- 选择您的 Git 提供商和存储库。
- 确认您的默认分支并启用提交时自动部署。
- Sevalla 会自动检测您的框架（本例中为 React + Vite）。
- 点击创建站点，构建立即开始。
几分钟后，您的站点将可以使用免费临时域名访问。
有用的提示和其他注意事项
在使用 Lovable 进行无头构建时，有几点值得注意，可以让过程更顺畅、更容易理解。
- 免费和付费计划： Lovable 同时提供两者。免费计划为您提供充足的实验空间，而付费层提供更长的提示会话和更快的处理速度。
- 无需频繁刷新： 在大多数情况下，当您从 WordPress 更改或发布内容时，Lovable 的界面会自动更新。实时同步快速且可靠。
- 直接文件编辑： 与 GitHub 一样，Lovable 允许您直接在平台内编辑文件。这对于快速调整或在外部编辑器中调试小问题非常方便。
- REST API 与 WPGraphQL： 对于大多数简单项目，内置的 WordPress REST API 就足够了。但是，如果您需要更复杂的查询或关系，WPGraphQL 插件提供了更强大和结构化的选项。
- 常见设置问题： 如果遇到连接问题，通常与 CORS（跨域资源共享）或 REST API 访问权限有关。Lovable 的 AI 代理可以帮助您快速解决这些问题。
- 缓存注意事项： 由于您的前端是静态的，在开发过程中更改可能不会立即显示。进行重大更新时，请清除缓存或重新构建。
总结
无头 WordPress 开辟了一个设计和开发几乎不受限制的空间。通过将 WordPress 作为可靠的内容后端与 Lovable 的 AI 驱动前端创建相结合，您可以比以往更快地从概念到上线部署。
随着AI持续重塑工作流程，无头WordPress作为一种灵活、面向未来的方法应运而生，为创作者提供速度、控制力和自由度。
如果您准备好探索无头WordPress能为您的下一个项目做什么，那就从一个为性能和可靠性而构建的托管平台开始。探索Kinsta的托管计划，这是WordPress、无头或混合构建的理想基础。
