如何使用Vue创建无头WordPress网站

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

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

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

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

本指南将详细探讨无头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）多渠道内容发布-由于无头WordPress使用基于API的系统将您的内容传送到前端，因此您可以在任何位置和任何平台上显示您的内容，包括桌面、网站、移动应用程序和触摸屏信息亭。还可以充分利用增强现实、虚拟现实和物联网设备来显示和呈现来自基于API的系统的内容。

缺点

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

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

何时无头WordPress可能不是最好的选择

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

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

谁应该使用无头WordPress

以下是您可能需要无头WordPress的最佳情况：

如果你的网站的安全性是你最关心的，也是对你的公司最重要的，那么你应该使用无头WordPress。
接下来，如果您的网站不需要定期升级和更新，这将是一个很好的迹象，表明您需要使用无头设置。
接下来，如果你想有一个WordPress主题不容易实现的定制设计，你需要用一个独特的设计来增加网站前端的趣味。那么，无头WordPress是你的下一个选择。
最后，如果你正在为演示和教程建立一个寿命很短的网站或演示网站，那么你可以尝试无头方法。

谁应该避免使用无头WordPress

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

当你的网站仅仅依赖于特定的插件和功能来控制应用程序的前端并与之协同工作时，你应该坚持使用WordPress，除非插件提供基于API的选项来使用数据。
假设您对编写网站代码不感兴趣，或者您的网站需要日常维护，并且由于预算较低，您没有雇佣专业人员进行日常维护。在这种情况下，WordPress是一个适合您的选项。
如果你不是一个经验丰富的开发人员，想单独创建和管理你的网站，你应该使用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实例提供一个名称、管理员用户名和密码，然后单击Create并复制详细信息，同时DevKinsta在本地计算机中创建一个新的WordPress实例。

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

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

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

配置我们的无头WordPress

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

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

转到Plugins > 安装插件并搜索Simple Website Redirect，安装并启用：

WordPress插件安装

接下来，单击插件Settings并输入基于前端的URL (e.g. http://news-blog.local),，单击Advanced setting options并将以下路径 — /wp-admin, /wp-login.php和/wp-json 添加到Exclude Paths。

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

Simple Website Redirect插件设置

此外，如果在默认情况下访问 http://headless-wordpress-news-blog.local/wp-json 时未启用JSON API，您可以通过在WordPress设置下打开固定链接并选择文章名Post Name或您选择的任何其他选项来启用该功能（但朴素Plain除外）：

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
            }
          }
        }
      ],
...

设置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代码库。我们将使用VSCode，下面让我们继续努力码字。

使用WordPress API

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

显示文章列表组成部分

下面的代码片段显示了我们如何使用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 REST API和无头WordPress检索一篇文章，并将其显示在我们的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
    }
  },
 }

使用服务器部署无头WordPress

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

要将您的无头WordPress部署到Kinsta，请单击DevKinsta仪表盘上的Push to Staging按钮，然后使用登录凭据登录到Kinsta。

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

小结

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

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

如何使用Vue创建无头WordPress网站

什么是无头WordPress

无头WordPress的利弊

优点

缺点

何时无头WordPress可能不是最好的选择

谁应该使用无头WordPress

谁应该避免使用无头WordPress

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

使用Devkinsta设置无头WordPress

配置我们的无头WordPress

设置Vue.js（前端）

使用WordPress API

使用服务器部署无头WordPress

小结

评论留言

取消回复

文章目录

如何使用Vue创建无头WordPress网站

什么是无头WordPress

无头WordPress的利弊

优点

缺点

何时无头WordPress可能不是最好的选择

谁应该使用无头WordPress

谁应该避免使用无头WordPress

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

使用Devkinsta设置无头WordPress

配置我们的无头WordPress

设置Vue.js（前端）

使用WordPress API

使用服务器部署无头WordPress

小结

相关的

评论留言

取消回复

文章目录