WordPress 一直是开发人员和非开发人员快速构建和创建令人惊叹的网站的内容管理系统。

通过将内容管理后端与前端分离的微服务架构，您可以最大限度地控制两个“端”。这种分离问题正是无头内容管理系统（包括无头 WordPress 解决方案）试图解决的问题。

通过无头方法，公司可以更精细地控制其内容管理后端。他们还可以自由使用自己选择的任何前端，包括 React、Vue、Angular 等。 。最后，我们将探索创建无头 WordPress 环境、使用 Vue.js 构建前端以及部署无头 WordPress。

什么是Headless WordPress

WordPress 是一个后端和前端部分紧密连接的整体应用程序。后端是进行管理的地方，您可以在其中创建、编辑、添加和删除内容，包括更改外观配置。相反，前端负责向用户显示内容。

Headless WordPress 是一个用于描述解耦 WordPress 的术语。后端（管理）部分与 WordPress CMS 的前端部分是分开的。您可以使用您选择的任何前端框架将前端作为独立应用程序进行开发和管理。

Headless WordPress 的优点和缺点

接下来，我们将探讨 Headless WordPress 的优点和缺点，让您更好地理解这个概念。

优点

（1）超高速​​​​​性能 - 在这个应用程序运行速度极快的时代，您的网站加载时间不应该超过几秒钟，否则会失去访问者。由于 WordPress 的前端是独立的，并且可以使用现代前端工具开发高性能和可扩展性，因此无头 WordPress 方法对于网站的整体用户体验非常有益。

(2) 精细控制 - 选择无头架构可以让您更好地控制设计布局、内容呈现以及用户与应用程序前端的交互方式。它还允许从中央位置保护和访问后端内容。

(3) 增强的可扩展性 - 扩展 WordPress 有时可能很棘手，因为您无法完全控制 WordPress 运行的所有组件和代码，特别是如果您不是开发人员。但通过 WordPress 的解耦，可以很容易地独立缩放每个部分，并且您可以轻松识别哪些部分需要缩放。

(4) 更严格的安全性 - 我们怎么强调无头 WordPress 的安全优势都不过分，因为解耦的 WordPress 在防范黑客和 DDoS 攻击方面具有很高的安全优势。无头 WordPress 方法使黑客很难访问您的敏感后端数据，因为它与您的前端（面向用户的网站）是分开的。

(5) 轻量级设计 - 您将可以更好地控制前端设计的结构和布局。此外，您将有更多的自由度来定制前端的设计；借助 REST API 调用，您可以使用现代 Web 工具并将其部署在前端。

(6) 多渠道内容发布 - 由于无头 WordPress 使用基于 API 的系统将您的内容传送到前端，因此您可以在任何地方、任何平台上显示您的内容，包括桌面、网站、移动设备应用程序和触摸屏信息亭。还可以充分利用增强现实、虚拟现实和物联网设备来显示和呈现来自基于 API 的系统的内容。

缺点

我们更深入地探讨了无头的缺点，但主要缺点是：

1. 后端和前端的分离在管理多个网站实例时给您带来了额外的负担。
2. 实施起来可能会很昂贵，因为它需要团队中的更多成员和额外的资金来运行不同的实例。
3. 如果内容在所有平台上呈现不一致，则在不同平台上提供内容可能会导致不一致的用户体验。

当无头 WordPress 可能不是最佳选择时

由于无头 WordPress 是一项令人难以置信的创新，具有巨大的优势，因此在决定是否使用它时，您需要记住一些事项。

• 无头 WordPress 的维护成本非常昂贵。从基础设施到多个开发人员，您将维护网站的两个不同实例。
• Headless WordPress 不支持 WordPress 的所有功能。例如，如果您使用单独的前端，WordPress 的强大功能（例如所见即所得编辑器和实时预览）将无法工作。
• 设置无头 WordPress 的成本更高。因此，请始终牢记其额外费用。

谁应该使用 Headless WordPress

以下是您需要 Headless WordPress 的最佳情况：

1. 如果您网站的安全性是您最关心的问题，并且对您的公司来说最重要，那么您应该使用 Headless WordPress。
2. 接下来，如果您的网站不需要定期升级和更新，这将是您需要使用无头设置的好兆头。
3. 接下来，如果您想要拥有 WordPress 主题不容易实现的自定义设计，您需要使用独特的设计来自定义网站的前端。那么无头 WordPress 就是您的下一个选择。
4. 最后，如果您正在构建一个短期网站或用于演示和教程的演示网站，您可以尝试无头方法。

谁应该避免使用 Headless WordPress

有几种情况使用 Headless WordPress 不是一个好的选择：

1. 如果您的网站仅依赖于应用程序前端检查的特定插件和功能以及何时使用它时，您应该继续使用 WordPress，除非该插件提供基于 API 的数据处理选项。
2. 假设您对网站编码不感兴趣，或者您的网站需要日常维护，而您由于预算较低而没有聘请专业人员进行日常维护。在这种情况下，WordPress 是您的一个选择。
3. 如果您不是经验丰富的开发人员并想自己创建和管理您的网站，您应该使用 WordPress。

如何构建 Headless WordPress（构建应用程序）

本节将探讨如何在后端使用 Headless WordPress 并在前端使用 Vue 3 构建和开发新闻博客。

使用 Devkinsta 设置 Headless WordPress

我们将使用 DevKinsta 开发无头 WordPress，DevKinsta 是一个流行的 WordPress 本地开发环境，用于在本地计算机上舒适地设计、开发和部署 WordPress 网站。

DevKinsta 始终免费，为您开发和构建 WordPress 提供巨大的好处和便利。

您可以从官方网站下载并安装DevKinsta，并按照文档中的说明开始使用。

由于我们已经安装了 DevKinsta，我们将打开它并按照以下步骤设置我们的第一个无头 WordPress。

在 DevKinsta 仪表板中，使用 Nginx、MySQL 和任何可用的 WordPress 版本创建一个新的 WordPress 网站。此外，您可以导入现有的 WordPress 实例或从仪表板创建自定义 WordPress 实例。

接下来，为新创建的 WordPress 实例指定名称、管理员用户名和密码，然后单击创建 并复制详细信息，同时 DevKinsta 在本地计算机上创建新的 WordPress 实例。

接下来，单击“打开站点”以在默认浏览器上打开新创建的 WordPress 实例。

最后，您可以通过访问 http://headless-wordpress-news-blog.local/wp-admin 链接并输入您在创建新博客时输入的管理员登录凭据来完成此操作实例。

请注意，我们已经在 localhost http://news-blog.local 上设置了 headless，其 URL 为 http://headless-wordpress-news-blog.local ，我们使用整个教程。

配置我们的 Headless WordPress

接下来，成功登录 WordPress 仪表板后，您可以继续安装您选择的任何插件和配置。

我们将通过安装一个简单的站点重定向插件并将其设置为仅通过基于 WordPress REST API 的端点提供内容来完全禁用本教程的主题。

前往插件>安装插件并搜索简单网站重定向，安装并激活：

WordPress插件安装接下来，点击插件并输入基于前端 URL（例如 http://news-blog.local），点击 高级设置选项 并更改以下路径 - -ad/

最后，通过在重定向状态中选择已启用来启用插件：（如果默认可访问）http://headless-wordpress-news-blog。 local/wp-json 不启用 JSON API，您可以在 WordPress 设置下打开永久链接并选择 帖子名称 或您选择的任何其他选项来启用该功能（ Plain 除外） ）：

WordPress 永久链接

现在，当您访问您的http://headless-wordpress 时。 -json，它应该为您提供如下 JSON 数据：{"name": "Headless WordPress News Blog","description": "Just another WordPress site","url ": "http://headless- wordpress -news-blog.local","home": "http://headless-wordpress-news-blog.local","gmt_offset": "0","timezone_string": "","namespaces": [" oembed /1.0","wp/v2","wp-site-health/v1"],"身份验证": [],"路线": {"/": {"命名空间": "","方法": [ "GET"],"endpoints": [{"methods": ["GET"],"args": {"context": {"default": "view"," required": false}}}], . ..

构建 Vue.js（前端）

我们正在使用 Vite Web 开发工具创建一个 Vue 3 应用程序，以连接无头 WordPress。您可以阅读有关 Vue 3 和 Vite 开发工具的更多信息。

在本文中，我们将建立一个新闻博客。该项目的所有后端内容管理均由我们的无头 WordPress 和 Devkinsta 开发和托管。

键入以下简单命令：npm init @vitejs/app news-blogcd news-blognpm install npm run dev

如果用户名中存在空格问题，请尝试使用：npx create-vite-app news -blog

最后，使用您选择的代码编辑器打开 Vue 3 代码库。我们将使用 VSCode，所以让我们继续编码。

使用 WordPress API

我们已经开始开发 Vue 应用程序的其余部分以节省您的阅读时间，但您可以继续从我的 GitHub 克隆存储库。

显示帖子列表组件

下面的代码片段展示了如何使用视图实例实现 WordPress REST API，以显示无头 WordPress 的所有帖子：

更多文章

import {mapState } from 'vuex'export default {计算：{ .. .mapState({ posts: (state) => {return [...state.post.posts].slice(0, 22)},}),},}

显示单个帖子组件

代码片段展示了我们如何在无头 WordPress 中使用 WordPress REST API 检索帖子，并将其显示在我们的视图实例中：

{{帖子.标题 || '' }}

{{ post.author.name }}

{{ $moment(post.date).format('MMMM Do YYYY') }}

<div class="tagsabsolut"> {{category.title }}

从 'vue' 导入视图导出默认值 { name: 'SinglePost', props: { post: {类型：[Object, Array],默认：() => {},},},}

以下是不使用WordPress API时对后端内容的API调用的存储：export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = wait fetch(`http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts ` ) const data = wait response.json()if (data) {commit('setPosts', data)}返回数据}},async getPost({ commit }, id) { try {const response = wait fetch(`http : //headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}`)const data =等待response.json() if (data) { commit('setPost', data ) } 返回数据}},}

使用服务器部署无头 WordPress

最后，使用托管服务部署无头 WordPress 非常简单

要在 Kinsta 上部署 Headless WordPress，请单击 DevKinsta 仪表板上的 推送到暂存 按钮，然后使用您的登录凭据登录 Kinsta。

最后，您可以将 Vue .js 实例部署到您选择的任何云托管提供商。请务必相应地更新您的无头 WordPress 端点，以便在实时生产环境中测试您的应用程序。

总结

Headless WordPress 及其带来的好处将持续一段时间。随着越来越多的开发人员和网站所有者开始了解无头解决方案的好处，其受欢迎程度将继续增长。

在本指南中，我们向您介绍无头 WordPress 的功能、优点和缺点，并向您展示如何使用 DevKinsta 构建和部署您的第一个无头 WordPress。您现在已经开始实施无头 WordPress。