了解如何使用 Vue.js 创建无头 WordPress 网站

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

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

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

本指南将详细探讨无头 WordPress，以及它的全部内容、何时以及为何考虑使用它。 最后，我们将探索创建无头 WordPress 环境，使用 Vue.js 构建前端，并使用 Kinsta 部署无头 WordPress。

什么是无头 WordPress？

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

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

无头 WordPress 的优缺点

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

优点

首先，我们将从探索优点开始。

超快速性能

在这个超快速执行应用程序的时代，您的网站加载时间不应超过几秒钟，并避免失去访问者。 由于前端与 WordPress 分离，并且可以使用现代前端工具在考虑到高性能和可扩展性的情况下进行开发，因此采用无头 WordPress 方法对您网站的整体用户体验大有裨益。

粒度控制

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

增加可扩展性

扩展 WordPress 有时会很复杂，因为您无法完全控制支持 WordPress 的所有组件和代码，主要是如果您不是开发人员。 但是通过 WordPress 的解耦，可以毫不费力地单独扩展每个部分，并且您可以轻松检测到哪个部分需要扩展。

更严格的安全性

我们不能过分强调无头 WordPress 的安全优势，因为解耦 WordPress 具有抵御黑客和 DDoS 攻击的高安全优势。 无头 WordPress 方法使黑客难以访问您的敏感后端数据，因为它与您的前端（面向用户的网站）是分开的。

轻量化设计

您将更好地控制前端设计的结构和布局。 此外，您可以在前端工作，更加自由和定制化设计； 借助 REST API 调用，您将能够利用现代 Web 工具并将它们部署在前端。

多渠道内容发布

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

缺点

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

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

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

由于无头 WordPress 是一项令人难以置信的创新，具有很大的好处，因此在决定是否应该使用它时，您需要牢记一些事情。

1. 无头 WordPress 的维护成本非常高。 您将维护一个网站的两个不同实例，从基础架构到多个开发人员。
2. Headless WordPress 不支持 WordPress 的所有功能。 例如，WYSIWYG 编辑器和实时预览等出色的 WordPress 功能在使用单独的前端时将不起作用。
3. 设置无头 WordPress 的成本更高。 因此，请始终牢记其增加的成本。

谁应该使用无头 WordPress？

以下是您可能需要无头 WordPress 的最合适的案例：

1. 如果您的网站安全是您最关心的问题并且对您的公司来说至关重要，那么您应该使用无头 WordPress。
2. 接下来，如果您的网站不需要定期升级和更新，这将是您需要使用无头设置的好兆头。
3. 接下来，如果您想要一个 WordPress 主题无法轻松实现的定制设计，您需要为您的网站前端添加一个独特的设计。 然后，无头 WordPress 是您的下一个选择。
4. 最后，如果您正在构建一个生命周期较短的网站或演示和教程的演示站点，那么您可以尝试无头方法。

谁应该避免使用无头 WordPress

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

1. 当您的网站仅依赖于控制应用程序前端并与之配合使用的特定插件和功能时，您应该坚持使用 WordPress，除非插件提供基于 API 的选项来使用数据。
2. 假设您对编写网站不感兴趣，或者您的网站需要日常维护，并且由于预算不足，您没有聘请专业人员进行日常维护。 在这种情况下，WordPress 是适合您的选择。
3. 如果您不是经验丰富的开发人员并且想单独创建和管理您的网站，那么您应该使用 WordPress。

如何使 WordPress 无头（构建应用程序）

本节将探讨使用无头 WordPress 作为后端和 Vue 3 作为面向用户的前端来构建和开发一个新闻博客。

使用 Devkinsta 设置无头 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链接并输入您在创建新实例时输入的管理员登录凭据来登录管理仪表板。

请注意，我们已经使用 URL http://headless-wordpress-news-blog.local在本地设置了无头 WordPress，前端在本地托管在http://news-blog.local ，我们将在整个过程中使用它教程。

配置我们的无头 WordPress

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

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

转到Plugins > Add new并搜索 Simple Website Redirect，安装并激活它：

接下来，单击插件设置并输入您的基于前端的 URL（例如http://news-blog.local ），单击高级设置选项并添加以下路径 - /wp-admin ， /wp-login.php , 和/wp-json — 到排除路径部分。

最后，通过在Redirect Status下拉菜单中选择Enabled来启用插件：

……就是这样！

此外，如果您在访问http://headless-wordpress-news-blog.local/wp-json时默认未启用 JSON API，您可以通过打开WordPress 设置下的永久链接并选择帖子名称或任何您选择的其他一种，除了Plain ：

现在，当您访问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 } } } ], ...

设置 Vue.js（前端）

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

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

键入这些简单的命令：

 npm init @vitejs/app news-blog cd news-blog npm install npm run dev

如果您的用户名中的空格有问题，请尝试使用：

 npx create-vite-app news-blog

请注意，我们已将 Vue 3 应用程序配置为侦听http://news-blog.local ，但您可以坚持使用默认的http://localhost:3000 。

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

使用 WordPress API

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

显示 App Post 组件

下面的代码片段展示了我们如何使用 Vue 实例实现 WordPress REST API 以显示来自无头 WordPress 的所有帖子：

 <template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>

显示单个帖子组件

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

 <template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>

下面是对后端内容的无头 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 } }, }

使用 Kinsta 部署无头 WordPress

最后，使用 Kinsta 托管服务的 DevKinsta 可以非常轻松地部署无头 WordPress。

要将无头 WordPress 部署到 Kinsta，请单击 DevKinsta 仪表板上的Push to Staging按钮，然后使用您的登录凭据登录到 Kinsta。 您可以创建一个新的 Kinsta 帐户来获取您的登录凭据。

您可以了解如何将更改推送到登台环境，以便通过单击将无头 WordPress 部署到 Kinsta 托管服务。

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

概括

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

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

您对部署无头 WordPress 网站有什么建议？ 请在评论部分分享它们！