人工智能、改进的开发工具和现代化的托管环境，正让无头 WordPress 再次受到设计师和开发者的关注。这种演变正在重塑分布式数字体验的设计、构建和部署方式。
在本教程中，我们将探索如何使用 Loveble（一款人工智能驱动的前端构建器）来创建一个由无头 WordPress 后端驱动的现代化网站。
我们今天所看到的，预示着 WordPress 的未来发展方向，无论采用无头还是传统方式：一种更加开放、协作且人工智能辅助的数字体验创建方法，将内容管理与创意设计自由完美融合。
了解无头WordPress
搭建无头 WordPress 环境比想象中要简单。您可以将其理解为将 WordPress 分成两部分：
- 后端 – WordPress 继续像往常一样管理您的内容、媒体和数据。
- 前端 – 一个独立的应用程序负责处理所有内容的外观和行为。
通过将两者分离，您既可以保留 WordPress 可靠的内容管理功能，又能自由地使用 React 或 Vue 等现代前端框架进行设计和构建。这相当于将 WordPress 的优势发挥到极致，并超越传统架构的局限。
换句话说：WordPress 负责结构（您的内容），而前端负责样式（内容的呈现方式）。
为什么选择Lovable？
无头 WordPress 真的有必要吗？这取决于您的目标。对于许多项目而言，标准的 WordPress 架构仍然是最简单高效的选择。但是，如果您需要更高的灵活性、更快的迭代速度，或者想要构建超越传统主题和插件的现代 Web 应用，那么无头 WordPress 的优势就显现出来了。
在这个项目中，我们使用了 Lovable，这是一个由人工智能驱动的开发平台，可以帮助您生成、编辑和管理前端代码。它使用 React、Tailwind CSS 和 Vite 等现代工具进行构建，并利用人工智能提示来处理布局、样式和组件逻辑。
换句话说，Lovable 本身并不是前端，而是创建和维护前端的环境。
以下几点使其成为我们实验的理想之选：
- 版本控制的灵活性：可轻松与 GitHub、GitLab 或 Bitbucket 进行双向同步。
- 跨平台设计：可从单个 WordPress 后端构建适用于 Web、移动设备或自助服务终端显示屏的内容。
- 即时迭代：使用 AI 提示，可在几秒钟内更新布局、样式或组件。
- 解耦式安全性：前端无需直接访问数据库。
- 支持静态构建：可轻松部署为静态 HTML、CSS 和 JavaScript，从而获得更佳的性能和可靠性。
当然，无头架构并非完美无缺。维护多层堆栈可能会使调试更加复杂，并且在前端渲染内容的插件可能需要自定义 API 桥接。不过，对于静态网站或内容驱动型网站而言，将 WordPress 与 Lovable 结合使用，可以快速、现代地探索无头架构的强大功能。
入门指南
在构建项目之前，让我们先设置技术栈的两个主要部分：前端使用 Lovable，后端使用 WordPress。
步骤 1：创建Lovable项目
访问 loveable.dev 并创建一个免费帐户。进入控制面板后，输入简短提示即可开始一个新项目。
Lovable 的聊天界面
聊天界面让您感觉就像在和队友聊天一样。您可以像在真实对话中一样自然地输入文字。例如，您可以先问一个简单的问题：
How do we start building a frontend with WordPress on the backend? #译文： 我们如何开始使用 WordPress 作为后端来构建前端？
Lovable 会提供清晰的指导，引导您了解各种选择：
Building a React frontend with WordPress as a headless CMS is a solid approach. You can use the built-in WordPress REST API or install WPGraphQL for more complex data queries. #译文 使用 WordPress 作为无头 CMS 构建 React 前端是一个可靠的方法。您可以使用 WordPress 内置的 REST API，也可以安装 WPGraphQL 来进行更复杂的数据查询。
第一次交流为整个流程定下了基调。它快速概览了各种可能性，并帮助您了解 WordPress 将如何与您的前端集成。
之后，您可以提示 AI 尽量简化操作，从而完善您的想法：
Let's keep it simple. We just want to build a demo blog site and have a page to serve as a dynamic style guide. #译文： 简单点说，我们只想搭建一个演示博客网站，并创建一个页面作为动态样式指南。
Lovable 会立即进行调整，创建一个简洁的演示网站，并设置一个样式指南页面，供您日后进行全局设计更新时使用。
接下来，沟通将自然而然地展开。您和 Lovable 会反复沟通，完善细节，明确下一步所需的事项。在某个阶段，Lovable 可能会向您询问一些必要的设置信息，例如：
1. Do you have a WordPress site URL? (e.g., https://yoursite.com) 2. Is the WordPress REST API publicly accessible? 3. What WordPress content should map to your blog? (posts, pages, or custom post types?) 4. Are there custom fields you’d like to fetch? (e.g., read time or featured flag) #译文 1. 您有 WordPress 网站 URL 吗？（例如：https://yoursite.com） 2. WordPress REST API 是否公开可访问？ 3. 哪些 WordPress 内容应该映射到您的博客？（文章、页面还是自定义文章类型？） 4. 您是否希望获取某些自定义字段？（例如：阅读时间或特色标记）
提供这些信息后，Lovable 即可自动生成集成逻辑，将您的前端与 WordPress 后端连接起来。
步骤 2：设置WordPress
在 Lovable 能够导入实际内容之前，您需要一个可正常运行的 WordPress 网站作为后端。您的所有文章、页面和媒体文件都将存储在这里。
为了顺利完成设置，请使用可靠的 WordPress 主机。比如您创建新的 WordPress 网站的临时子域名，例如：
https://your-site.domain.com/
网站创建完成后，请检查 REST API 是否公开可用。打开一个新的浏览器标签页并访问：
https://your-site.domain.com/wp-json/wp/v2/posts
如果看到显示帖子数据的 JSON 数据流，说明后端已准备就绪。
步骤 3：将WordPress连接到Lovable
WordPress 网站上线且 REST API 运行正常后，就可以将后端连接到 Lovable 项目了。此时，内容和设计终于可以完美融合。
在 Lovable 的聊天窗口中，您可以直接提问：
Ok, how do we connect your frontend to our WordPress CMS? #译文 好的，我们如何将您的前端连接到我们的 WordPress CMS？
Lovable 会回复您一个清晰的方案，解释所需的一切：
You’ll connect to your WordPress backend using its REST API. What you’ll need: 1. WordPress REST API (built-in, available at yoursite.com/wp-json/wp/v2/posts) 2. A CORS plugin if your frontend is on a different domain 3. (Optional) ACF or custom fields for extra data #译文 您将使用 WordPress 的 REST API 连接到后端。 您需要准备： 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.domain.com/wp-json/wp/v2/posts');
return response.json();
}
});
接下来，Lovable 会根据您的命令，使用您提供的 WordPress URL 并设置一个前端网站来显示您的 WordPress 文章。
这是一个无头 WordPress 博客的示例。
就是这么快。集成已上线，连接已验证，您的无头网站现在拥有从 WordPress 到 Lovable 的完整内容流。
样式和设计系统
WordPress 连接上线后，您就可以开始完善网站的外观和风格了。目前，您看到的所有内容都由 Tailwind CSS 和浏览器的默认设置进行样式设置。这为您提供了一个简洁的基础，现在是时候让它真正属于您了。
您可以直接问 Lovable：
Is all styling currently provided by TailwindCSS and the User Agent? #译文 目前所有样式都由 TailwindCSS 和用户代理提供吗？
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. #译文 是的。目前所有样式均由 TailwindCSS（通过 index.css 和 tailwind.config.ts）以及用户代理的默认样式提供。App.css 文件存在，但未被导入。
了解了这一点后，您可以开始自定义网站的结构和导航。例如，您可以这样设置：
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. #译文 连接到所有页面、文章和媒体，并按如下方式设置页眉导航： 首页 样式指南 博客 Trip To Santa Fe Hello World 将首页设为网站的根页面。
Lovable 会重新组织您的路由，并将 WordPress 文章动态链接到“博客”下拉菜单中。现在，导航可以跨页面正常工作：首页、博客以及您的动态样式指南，后者将成为您进行全局设计更改的中心。
调整网站用户界面。
使用动态样式指南
您可以在此页面定义和控制整个网站的全局样式。您在此处所做的任何更改都会立即更新所有页面。
您可以先设置基本调色板和字体：
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. #译文 将所有标题的字号加倍。页面左右边距各增加 10%。创建一个 2x2 的图片库，图片间距为 20 像素，圆角半径为 20 像素，并添加 2 像素的白色实线边框。
Lovable 会实时调整布局，您可以立即看到图片库表单。
向无头 WordPress 项目添加图片。
全局字体和间距调整
您可以通过在全站范围内应用一致的字体和间距规则，进一步优化您的设计：
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. #译文 将页面标题左对齐。 所有标题使用 Cowboy (Rye) 字体，所有其他文本使用 Roboto 字体。 将所有段落和引用元素的行高加倍。 为引用块添加 5% 的上/下边距和 10% 的左/右边距。
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. #译文 容器设置了 mx-auto，使其居中。我会移除该属性以实现真正的左对齐。
定义全局按钮样式
接下来，您可以为按钮设置视觉一致性。在动态样式指南中，指示 Lovable 创建三种不同尺寸的按钮，并设置清晰的悬停状态：
1. Buttons should be rectangular. 2. Use a black background with white text, and invert on hover. 3. The medium button is 125% the width of the small one; the large is 150%. 4. Add 20px border radius. #译文 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，它将强大的云托管功能与对开发者友好的自动化功能相结合。
Sevalla 提供免费的静态网站托管服务，支持全球边缘交付，并在 Git 推送时自动部署。代码同步到 GitHub、GitLab 或 Bitbucket 后，只需点击几下即可将您的代码库连接到 Sevalla。
以下是上线步骤：
- 在 Sevalla 控制面板中，转到“Static Sites”，然后点击“Add site”。
- 选择您的 Git 提供商和代码仓库。
- 确认您的默认分支并启用提交时自动部署。
- Sevalla 会自动检测您的框架（本例中为 React + Vite）。
- 点击“Create site”，构建过程将立即开始。
几分钟内，您的网站即可上线，并拥有一个免费的临时域名。
实用技巧和其他注意事项
在使用 Lovable 进行无头构建时，以下几点尤为突出，它们使整个过程更加流畅易懂。
- 免费和付费方案：Lovable 提供免费和付费方案。免费方案为您提供了充足的实验空间，而付费方案则提供更长的响应时间和更快的处理速度。
- 无需频繁刷新：在大多数情况下，当您在 WordPress 中更改或发布内容时，Lovable 的界面会自动更新。实时同步快速可靠。
- 直接文件编辑：与 GitHub 类似，Lovable 允许您直接在平台内编辑文件。这便于快速调整或调试小问题，无需切换到外部编辑器。
- REST API 与 WPGraphQL：对于大多数简单的项目，WordPress 内置的 REST API 就足够了。但是，如果您需要更复杂的查询或关系，WPGraphQL 插件提供了一个更强大、更结构化的选择。
- 常见设置问题：如果您遇到连接问题，通常与 CORS（跨域资源共享）或 REST API 访问权限有关。Lovable 的 AI 代理可以帮助您快速解决这些问题。
- 缓存注意事项：由于您的前端是静态的，因此在开发过程中，更改可能不会立即生效。进行重大更新时，请清除缓存或重新构建。
小结
无头 WordPress 开辟了一个设计和开发几乎不受限制的全新空间。通过将 WordPress 作为可靠的内容后端与 Lovable 的 AI 驱动的前端创建功能相结合，您可以比以往任何时候都更快地从概念过渡到线上部署。
随着人工智能不断重塑工作流程，无头 WordPress 应运而生，成为一种灵活且面向未来的解决方案，能够满足创作者对速度、控制和自由度三者兼顾的需求。
评论留言