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

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

通过headless方法，企业可以更精细地控制内容管理的后端。他们还可以自由使用他们选择的任何前端，包括React、Vue、Angular等。

本指南将详细探讨headless WordPress，以及它到底是什么，何时以及为什么你应该考虑使用它。最后，我们将探索创建一个无头WordPress环境，使用Vue.js构建前端，并部署无头WordPress。

什么是无头WordPress？

无头WordPress的优点和缺点

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

谁应该使用无头WordPress？

谁应该避免使用无头WordPress？

如何构建无头WordPress(构建应用程序)

什么是无头WordPress？

WordPress是一个集成的应用，后端和前端部分紧密交织在一起。后端是管理的地方，您可以在这里创建、编辑、添加和删除内容，包括更改外观配置。相反，前端负责向用户显示内容。

无头WordPress是一个用来描述解耦WordPress的术语。后端(管理)部分与WordPress CMS的前端部分是分开的。您可以使用任何您选择的前端框架作为独立的应用程序开发和管理前端。

无头WordPress的优点和缺点

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

优势

(1)超高速性能——在这个应用程序速度极快的时代，你的网站加载时间不要超过几秒钟，以免失去访客。因为前端是从WordPress中分离出来的，并且可以使用现代前端工具开发高性能和可扩展性，所以采用无头WordPress的方法对网站的整体用户体验非常有利。

(2)粒度控制——选择无头架构可以让你更好地控制设计布局、内容呈现以及用户如何与应用前端交互。它还允许从一个中心位置保护和访问后端内容。

(3)增强的可扩展性——扩展WordPress有时会很复杂，因为你无法完全控制驱动WordPress的所有组件和代码，主要是如果你不是开发者的话。但是有了WordPress的解耦，可以很容易的单独缩放每个部分，你可以很容易的检测出需要缩放的部分。

(4)更严密的安全性——我们不能完全强调无头WordPress的安全优势，因为去耦WordPress在抵御黑客和DDoS攻击方面具有很高的安全优势。无头WordPress方法由于与你的前端(面向用户的网站)分离，黑客很难访问你的敏感后端数据。

(5)轻量化设计——你将能够更好地控制前端设计的结构和布局。另外，可以在前端更自由的定制设计；由于RESTAPI调用，您将能够利用现代web工具并在前端部署它们。

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

劣势

我们将更深入地探讨无头的缺点，但它的主要缺点是:

在管理不同的网站实例时，分离后端和前端会给你带来额外的负担。

实现起来可能会很昂贵，因为它需要团队中额外的成员和额外的资金来运行不同的实例。

如果内容在所有平台上呈现不一致，那么在不同平台上提供内容可能会导致不一致的用户体验。

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

由于headless WordPress是一个具有巨大优势的令人难以置信的创新，当你决定是否使用它时，你需要记住一些事情。

维护无头WordPress是非常昂贵的。从基础设施到多个开发人员，您将维护一个网站的两个不同实例。

Headless WordPress不支持WordPress的所有功能。比如WordPress的强大功能，比如所见即所得编辑器和实时预览，在使用单独的前端时就无法工作。

设置无头WordPress的成本更高。因此，永远记住它增加的成本。

谁应该使用无头WordPress？

以下是你可能需要无头WordPress的最佳情况:

如果你的网站的安全性是你最关心的，对你的公司来说也是最重要的，那么你应该使用无头WordPress。

接下来，如果你的网站不需要定期升级和更新，那么你需要使用无头设置将是一个好兆头。

接下来，如果你想有一个不容易实现的WordPress主题的自定义设计，你需要用独特的设计给你的网站前端增加趣味性。那么，无头WordPress就是你的下一个选择。

最后，如果你正在建立一个短命的网站或者演示网站，用于演示和教程，那么你可以尝试无头方法。

谁应该避免使用无头WordPress？

在以下情况下，使用无头WordPress不是一个好的选择:

当你的网站仅仅依靠特定的插件和功能来控制应用程序的前端并与之协同工作时，你应该坚持使用WordPress，除非插件提供了基于API的选项来使用数据。

假设你对写网站代码不感兴趣，或者你的网站需要日常维护，又因为你预算低，所以没有聘请专业人士进行日常维护。在这种情况下，WordPress是你的一个选择。

如果你不是一个有经验的开发者，想独自创建和管理你的网站，你应该使用WordPress。

如何构建无头WordPress(构建应用程序)

这一节将探讨如何用后端的headless WordPress和前端的Vue 3构建和开发一个新闻博客。

用Devkinsta设置headless WordPress

我们将使用DevKinsta来开发headless WordPress。DevKinsta是一个流行的WordPress本地开发环境，用于设计、开发和部署WordPress站点，使您的本地机器更加舒适。

DevKinsta永远是免费的，它为你开发和构建WordPress提供了巨大的好处和舒适。

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

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

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

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

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

最后，您可以访问http://headless-wordpress-news-blog.local/wp-admin链接，并键入您在创建新实例时输入的管理员登录凭据。

请注意，我们已经使用URL http://Headless-WordPress-news-blog . local在本地主机http://news-blog.local中设置了Headless WordPress。

配置我们的无头WordPress

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

我们将在本教程中完全禁用该主题，通过安装一个简单的网站重定向插件并进行设置，仅通过基于WordPress REST API的端点访问内容。

转到插件>安装插件并搜索简单网站重定向、安装和启用:

WordPress插件安装

接下来点击插件设置，输入基于前端的URL(如http://news-blog.local)，点击高级设置选项，添加以下路径-/wp-admin、/wp-login.php和/wp-json排除路径。

最后，通过在重定向状态下拉列表中选择启用来启用插件:

简单网站重定向插件的设置

此外，如果访问http://headless-wordpress-news-blog.local/wp-json时默认不启用JSON API，你可以通过打开WordPress设置下的固定链接，选择帖子名称或你选择的任何其他选项来启用此功能(除了普通):

WordPress固定链接

现在，当您访问您的http://headless-wordpress-news-blog.local/wp-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” ], “authentication”: [ ], “routes”: { “/”: { “namespace”: “”, “methods”: [ “GET” ], “endpoints”: [ { “methods”: [ “GET” ], “args”: { “context”: { “default”: “view”, “required”: false } } } ],…

Set Vue.js(前端)

我们将使用Vite web开发工具创建Vue 3应用程序来连接headless WordPress。可以阅读更多关于Vue 3和Vite开发工具的内容。

在本文中，我们将构建一个新闻博客。这个项目的所有后端内容管理将由我们的headless WordPress使用Devkinsta开发和托管。

键入以下简单的命令:

npm init @vitejs/app news-blogcd news-blognpm installnpm run dev

如果您的用户名存在空大小写问题，请尝试使用:

npx create-vite-app news-blog

最后，使用您选择的任何代码编辑器打开Vue 3代码库。我们将使用VSCode。我们继续码字吧。

使用WordPress API

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

显示文章列表组件。

下面的代码片段显示了我们如何使用Vue实例实现WordPress REST API来显示来自Headless WordPress的所有文章:

最新的后端开发。文章

最新的后端开发。社区每天整理的文章。

More Articles import { mapState } from ‘vuex’export default { computed: { …mapState({ posts: (state) => { return […state.post.posts].slice(0, 22) }, }), },}

显示单个文章组件。

代码片段显示了我们如何使用WordPress REST API和Headless WordPress来检索一篇文章，并将其显示在我们的Vue实例中:

{{ post.title || ” }}

{{ post.author.name }} {{ $moment(post.date).format(‘MMMM Do YYYY’) }} {{ category.title }} import Vue from ‘vue’export default { name: ‘SinglePost’, props: { post: { type: [Object, Array], default: () => {}, }, },}

以下是后端内容对WordPress API的API调用的存储:

export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit(‘setPosts’, data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit(‘setPost’, data) } return data } }, }

使用服务器部署Headless WordPress

最后，使用托管服务来部署你的无头WordPress是非常容易的。

要将您的headless WordPress部署到Kinsta，单击DevKinsta仪表板上的Push to Staging按钮，然后使用您的登录凭证登录到Kinsta。

最后，您可以部署Vue的实例。js到任何你选择的云主机提供商。确保相应地更新你的无头WordPress端点，以便在真实的生产环境中测试你的应用程序。

总结

无头WordPress和它的好处还会持续一段时间。随着越来越多的开发者和网站所有者开始理解headless scheme的好处，它的受欢迎程度将会继续增长。

在本指南中，我们向您介绍了无头WordPress的特点、优点和缺点，并向您展示了如何使用DevKinsta构建和部署第一个无头WordPress。现在你成功地实现了无头WordPress。