Headless WordPress 综合指南：您需要知道的一切

已发表: 2022-04-07

WordPress 是地球上最流行的内容管理系统 (CMS)。 截至 2022 年 3 月，它以一种或另一种方式为 43.3% 的所有网站提供支持。 它的受欢迎程度似乎每天都在增长。

尽管非常流行、用户友好且安全，但 WordPress 确实有一些缺点。 开发人员最大的担忧是它对特定于平台的插件、主题和工具的限制。 如果你想走出这个领域，那是行不通的。

随着每个月都有新的内容渠道进入市场，传统的 WordPress 可以阻止您扩大内容范围。 这就是无头 WordPress 的用武之地。它具有多渠道方法、更高的性能和更好的灵活性。

在本指南中，我们将讨论：

A. 什么是无头 WordPress？
B. 无头 WordPress 如何工作？
C. 如何设置无头 WordPress？
D. 无头 WordPress 的最佳框架选项
E. 无头 WordPress 的好处
F. Headless WordPress 的缺点
G. 无头 WordPress 的 SEO 基础知识
H. 什么时候不应该使用 Headless WordPress？
一、Headless WordPress 的未来展望

兴奋地了解无头 WordPress？ 让我们潜入水中！

A. 什么是无头 WordPress？

在一个网站中，有两个界面，前端和后端。 前端由我们访问网站时看到的显示器或网页组成。 后端是脚本和内容数据库存储在服务器上的位置。 您必须访问后端才能创建、删除和管理内容，以及其他网站功能。

在传统的 WordPress CMS 中，前端和后端都是连接或耦合的。 大多数人喜欢使用传统的内容管理系统，因为它相对更容易管理，更不用说成本竞争力了。

无头 CMS 或无头 WordPress 与其传统对应物不同。 在这里，前端和后端都是独立的或解耦的。 无头的名称来自前端或Head独立于后端或Body工作的事实。

B. 无头 WordPress 如何工作？

现在您已经了解了无头 WordPress 的含义，让我们看看它是如何工作的。 当您从传统版本迁移到无头 WordPress 时，您可以继续上传、编辑和管理内容。 不同之处在于内容的显示方式。

在无头 WP 中，不是直接将内容发送到前端，而是通过 REST API 进行路由。 换句话说，WordPress REST API 保留了内容管理功能，但无需使用主题和插件来显示您的内容。

自然，无头 WordPress 无法控制您的内容的显示方式。 但它使您可以自由地在多个渠道上发布您的内容，而不受传统系统的限制。 您必须使用特定于频道的前端应用程序来查看您的内容的外观。 这就是无头 WordPress CMS 的工作方式。

C. 如何设置无头 WordPress？

如果您已经拥有 WordPress CMS，则可以将其转换为无头 CMS。 您可以手动进行无头 WordPress 开发（如果您喜欢这种事情）或使用插件。

让我们看看如何。

1. 手动设置

由于 AWS 是最受欢迎的托管服务提供商之一，让我们谈谈使用 AWS 设置无头 WordPress。

  • 创建 AWS 账户

    首先，如果您还没有 AWS 账户，您将需要一个 AWS 账户。 这是一个简单的过程。 但是，请记住获得适用于您的无头 CMS 的合适计划，最好是 Amazon S3 层。

  • 创建您网站的静态副本

    在此步骤中，您需要安装 WordPress 以将其用作网站的后端。 您可以稍后在需要时自定义前端。 理想情况下，您应该将后端托管到不同的主机提供商。

    但是，如果您不想为其他网络托管服务提供商付费，则可以进行本地安装。 这可以通过使用诸如 XAMPP 或 Flywheel 的 Local 等工具来完成。

    后端安装到位后，以您想要的方式自定义您的网站。 准备好创建静态副本。 您可以使用 WP2Static 插件来创建相同的。 如果需要，请随意使用其他插件。

    如果您使用的是 WP2Static，请从仪表板中的 WP2Static 选项卡访问网站设置。 它会直接提示您到“部署静态网站”选项卡。

    选项卡打开后：

    • 将网站 URL 添加到目标 URL 框中
    • 从最顶部的下拉菜单中选择 Amazon S3（您将在哪里托管您网站的优化版本？）

  • 自动部署静态页面

    选择 Amazon S3 选项后，您将看到一个包含多个选项的新窗口。 将您的访问密钥 ID 和秘密访问密钥放在手边，因为您将需要此信息来部署您的静态网站。

    • 在合适的字段中输入密钥
    • 选择创建 AWS 存储桶的区域
    • 滚动到页面底部
    • 单击开始静态站点导出按钮

    这可能需要一段时间，具体取决于您网站的大小和互联网速度。 部署完成后，您可以看到 WP 站点的实时静态版本。

2. 使用插件进行设置

您拥有的第二个选项是使用插件。 插件肯定可以让你的工作更轻松。 但是，根据您网站的大小和您想要包含的功能，您可能需要使用多个插件。 最好考虑与经验丰富的 WordPress 开发机构合作，让您轻松完成这项工作。

我们最喜欢的三个插件是：

  • WPGraphQL

    WPGraphQL是一个免费的开源 WordPress 插件。 它将您的 CMS 与您的表示层分开。 您可以使用它为任何 WordPress 站点提供可扩展的 GraphQL 架构和 API。

  • 浮士德

    您需要将FaustWP插件与 Faust.js 结合使用。 他们一起创建了一个分离的前端，通过 GraphQL 突变和 REST API 端点对 WordPress 进行身份验证。 将其视为 Faust.js 驱动的前端应用程序和 WordPress 后端之间的连接链接。

  • WPGraphQL Yoast SEO 插件

    WPGraphQL Yoast SEO 插件为 WPGraphQL 启用 Yoast SEO 支持。 您将获得 WPGraphQL 插件的 SEO 支持。

虽然这些是我们经常使用并深受喜爱的插件，但仍有一些不错的选择。 他们两个是：

  • WP盖茨比

    WP Gatsby是一个开源的 WordPress 插件。 您可以使用它来优化您的 WordPress 网站，使其成为Gatsby的数据源。

  • 无头模式

    无头模式为尝试访问您网站的所有用户设置重定向。 只有 REST API 和 WP GraphQL API 请求会通过。 您可以继续使用标准的帖子编辑器。

D. 无头 WordPress 的最佳框架选项

无头 WordPress 前端的成功取决于选择合适的框架。 这可能是无头 WordPress 开发最关键的方面。 以下是您的无头 WordPress 可以使用的一些框架。

1.反应JS

由 Facebook 提供的 React.js 是一个流行的框架。 您可以使用 React JS 创建具有视觉吸引力的交互式数字体验。 想想渐进式互联网程序 (PWA) 和单页软件 (SPA)。

2.浮士德JS

Faust.js 是一个无头 WordPress 框架。 它具有静态站点生成、服务器端渲染、TypeScript、数据获取、帖子和页面预览等功能。

3.盖茨比JS

我们个人最喜欢的 Gatsby.js 是一个基于 React 的开源框架，它提供了卓越的性能、可扩展性和安全性。 它是一个静态网页和网站生成器。

4.Vue JS

另一个多功能框架 Vue.js 在开发人员中很受欢迎，尤其是在无头 WordPress 方面。 您可以使用 Vue.js 作为前端，使用 Headless WordPress 作为后端来构建快速、健壮且适应性强的 Web 应用程序或网站。

5.下一个JS

Next.js 是一个构建在 Node.js 之上的开源简约框架。 它具有服务器端渲染和生成静态网站等功能。

6. 角度 JS

由 Google 维护，Angular.js 是 React 的绝佳替代品。 它更适合创建单页的 Web 应用程序。 它目前处于长期支持模式。

7. 基础

Foundation 是目前最先进和响应最灵敏的前端框架之一。 它带有模板和网格，可帮助您构建基于 HTML 和 CSS 的前端。

8. jQuery

jQuery 不是一个框架，而是一个快速、小型且功能丰富的 JavaScript 库。 它是最受欢迎的 JS 库之一。 但是，对于无头 WP，您只需要 jQuery UI 库。

E. 无头 WordPress 的好处

无头 WordPress CMS 确实提供了一些独特的好处，尤其是对于中型到大型 WP 网站。 这是它提供的。

1. 更好的前端灵活性

前端灵活性可能是无头 WordPress 系统最受赞誉的好处。 使用无头 WP，您可以：

  • 玩不同的编程语言
  • 使用各种工具或应用程序
  • 在不更改内容的情况下自定义设计
  • 使用 React、Faust、Next 等前端框架。
  • 轻松扩展前端

2. 增强的安全性

如今，像 DDoS 这样的网络攻击太常见了。 2021 年上半年发生了 540 万次 DDoS 攻击，与 2020 年上半年相比增长了 11%。降低此类攻击的风险和损害非常具有挑战性。

由于前端和后端分离，无头 WordPress 不太容易受到 DDoS 攻击。 缺乏活动的 Web 服务器和可访问的数据库意味着攻击面要小得多。 因此，您的网站仍然不太可能受到这些网络攻击的破坏。

3. 更好的性能

动态页面呈现是传统 WordPress 的核心。 用技术术语来说，WordPress 依赖 PHP 来生成网页。 此外，它必须从数据库中获取所有资源并将它们放在一个文件中。 这需要时间并减慢您的网站速度。

但是，REST API 呈现内容的速度比 PHP 进程快得多。 此外，没有插件和主题会影响您的整个系统。 这就是为什么无头 WordPress 往往更流畅、更快、响应速度更快的原因。

4. 增加可扩展性

传统的 WordPress 开发允许您为计算机和移动设备构建出色的网站。 就是这样。 在 WordPress 领域之外添加功能或用户体验是不可能的。

您无法将内容扩展到其他渠道，例如物联网设备、智能扬声器、数字显示器和智能电视等。 预计到 2030 年，活跃物联网设备的数量将达到 254 亿，多渠道发布不再是奢侈品，而是必需品。

这就是无头 WordPress 让一切变得更容易的原因。 它使您能够无缝、快速地接入新的内容渠道。 这就是当今不断增长的数字环境中的可扩展性 101。

5. 多样化的技术技能

在传统的 WordPress 中，您的技术技能仍然仅限于特定于平台的技术。 当然，它使您成为专家，但没有自由探索可能提供的比看上去更多的新技术。

使用无头 WP，您可以自由探索新技术。 您可以使用所需的技术或提供更好的功能和灵活性。 天空才是极限。

F. Headless WordPress 的缺点

尽管无头 WordPress 对您来说是一个绝妙的发现，但它确实有一些缺点。 在尝试之前，您应该考虑以下不足。

1.没有所见即所得的编辑器

对于许多人来说，这可能是一个重大的转折点，尤其是那些不那么精通技术的人。 使用无头 WordPress，您将失去实时预览，即所见即所得的编辑器。 这导致对开发人员的依赖增加。 不仅仅是主要或次要问题，您还需要开发人员进行内容管理。 这会大大降低您的内容敏捷性。

2. 日益复杂的结构

是的，无头 WordPress 非常灵活。

但是，灵活性带来了复杂性。

每当您添加新的前端体验时，您的结构复杂性也会增加。 从本质上讲，您还有一个系统需要照顾——更新、维护以及介于两者之间的所有内容。 换句话说，聘请具有专业知识的 WordPress 开发人员至关重要。

3. 越来越贵

灵活性也是有代价的。 您必须从头开始构建前端体验。 对于每一种新的数字体验，您都必须在创建、集成、部署和维护上花费更多的金钱、时间和资源。 这可能会严重影响您的整体预算。

G. 无头 WordPress 的 SEO 基础会发生变化吗？

搜索引擎优化并没有真正改变那么多。 但是您可能必须从头开始打好基础。 为了加强基础，请务必考虑以下最佳实践。

1. Schema.org 结构化数据

使用 Schema.org 结构化数据标记模式，因为它有助于提高搜索引擎的可见性。 它还增加了您的指导内容（例如指南和教程）显示为特色片段的可能性。

2.元标签

它们可能是您的 SEO 中最关键的部分。 使用元标记时，请保留：

  • 标题标签少于 70 个字符
  • 160 个字符以下的元描述和相关
  • 标题和描述关键字优化

3. 搜索引擎优化审计

使用 Google Analytics 或 SemRush 等工具进行定期 SEO 审核可以大大帮助您保持 SEO 的重点。 WPGraphQL Yoast SEO Addon 之类的插件也可以帮助改善您的 SEO。

4.静态站点生成器

Gatsby、Hugo 和 Pelican 等许多静态站点生成器 (SSG) 都内置了 SEO。 只需单击几下，您就可以解决大多数技术 SEO 挑战。

5. 使用 CDN

Cloudflare、StackPath 和 Sucuri 等内容交付网络有助于优化页面速度。 您可能已经知道，它是关键的 SEO 因素之一。

6.优化图片

改善 SEO 的另一种方法是优化图像和媒体。 你应该：

  • 对图像和视频使用延迟加载
  • 使用 SVG 或 WebP 格式的图像
  • 为所有图像添加相关的 Alt 标签
  • 为图像添加 Open Graph 元标记

7. HTTPS 无处不在

随着用户越来越关心他们的安全，为您的网站添加额外的安全层永远不会受到伤害。 所以，到处使用 HTTPS。

根据您网站的大小、添加新鲜内容的频率以及您的多渠道存在，您可能需要采取额外的 SEO 步骤。 此外，搜索引擎优化不是一劳永逸的事情。 随着搜索引擎和在线趋势的发展，您必须不断更新它。 最好咨询 SEO 机构来规划您的长期 SEO。

H. 什么时候不应该使用 Headless WordPress？

是的，无头 WordPress 是一项出色的技术。 但它确实涉及很多工作。 所以，问题是，是否值得投入时间、精力和金钱？

简短的回答是：

无头 WordPress 并不适合所有人。

在开枪之前，请务必考虑以下因素。

1. 更高的技能组合

尽管您可以享受更大的灵活性和定制化，但除了 WordPress 开发之外，它还需要多种技能。 您使用的前端技术越多，您需要的技能就越多。 如果您要自己处理您的网站，那么构建和维护无头 CMS 可能会具有挑战性。

对于初学者来说，教程只能让你到目前为止。 此外，学习一门新的编程语言或前端框架需要时间。 这将延迟您的内容交付。

2. 非开发者面临的挑战

并非所有参与处理网站的人都像您的开发人员一样精通技术。 由于缺少所见即所得编辑器和实时预览的功能，作家、编辑和营销人员等非技术团队成员将难以更新无头 WordPress 中的内容。

也就是说，在分裂的环境中工作也需要练习和适应的意愿。 换句话说，新开发人员也可能会发现使用无头 WordPress 具有挑战性。

3.双倍维护

拥有单独的前端和后端意味着服务器数量增加一倍，维护工作量增加一倍。 它还会使您的头痛增加两倍。 如果您物有所值，那么让自己经历所有这些考验是值得的。 否则，只需坚持您当前的 WordPress CMS。

4. 缺乏实时预览

如前所述，缺少实时预览和所见即所得编辑器可能会让人大失所望，尤其是对于非技术团队成员而言。 此外，当您添加新的前端渠道时，您的无头 CMS 一开始甚至将来都可能无法正常工作。 这意味着您将花费大量时间修复错误等。

5.昂贵

这是一个重要的考虑因素。 编写自定义前端代码不仅耗时而且成本高昂。 每次您利用新的数字体验时，您都需要进行额外的长期维护。 您需要雇佣更多的开发人员，并在托管和安全等方面花费更多的钱。

一、Headless WordPress 的未来展望

总而言之，无头 WordPress 将继续存在。 与任何新技术一样，用户需要一些时间来理解和利用它。 但是，我们将看到它的受欢迎程度在未来只会上升。

这就是为什么：

  • 如果有的话，随着新插件和解决方案进入市场，分离前端和后端变得越来越容易。 随着切换到无头 WordPress 变得毫不费力，越来越多的人会考虑无头。
  • 物联网设备和其他数字渠道的日益普及将为无头 WordPress 创造更多需求。 目前，它似乎是应对这一新兴趋势的最佳答案。
  • 这是一个实验的好地方。 开发人员，尤其是那些喜欢定制的开发人员，可以使用他们选择的库和框架或编程语言。 这就是为什么即使在未来，开发人员也可能会欢迎无头 WordPress 开发的原因之一。
  • 最后，它提供了两全其美。 您将获得灵活性和出色的 WordPress 后端。 对许多人来说，尽管有一些明显的缺点，但这是一个问题。

结论

也许您以前从未听说过无头 WordPress，或者您听说过，并且您正在考虑使用无头 WordPress。 无论哪种情况，您都需要了解这个新的内容管理系统是什么、它是如何工作的、它的优点和缺点以及是否应该考虑对其进行投资。 为此，这份简短的指南应该很有帮助。

如果您想从传统 WordPress 迁移到无头 WordPress 或需要更多信息，请随时与我们联系。 我们的专家将从头到尾为您提供帮助。