介绍

当谈到 WordPress 时,我只能想到一句话,那就是“Veni, Vidi, Vici”,意思是“看到、来到并征服”WordPress 刚刚看到了市场的潜力,因此它有一个愿景和占领了半壁江山。目前有 13 亿个网站,大约 4.55 亿个网站正在使用 WordPress。是的,我没有说谎,它是 455,后面有六个零。

现在在无头 WordPress 的帮助下,您可以保持前端和后端的不同,因此开发人员和编辑都感到满意,因为您可以在前端使用 Angular 或 React 或 Vue 或任何其他框架,而您可以在后端使用 WordPress。这样内容管理员可以根据自己在 WordPress 中的便利性来更改内容,因为它易于使用,而开发人员可以在前端使用代码。

下面我们就来说说如何用Vue.Js搭建一个无头的WordPress网站?你为什么要问 Vue.Js?因为 Facebook、Netflix、Trivago、Grammarly、Gitlab、Behance、BMW、Upwork、Apple 和 9Gag 等大企业都使用 Vue.Js 作为他们的前端开发技术。现在,我需要给你更多为什么选择 VueJ 的理由吗?

那么让我们开始这篇文章吧。

什么是无头 WordPress?

如果您长期从事 CMS 市场,您就会知道 WordPress 被称为“整体式”CMS。这意味着您将拥有一个强大的后端,您可以在其中进行内容创建和组织内容,并且它仍然旨在专注于前端体验。在 WordPress 的帮助下,您还可以使用主题和插件嵌入显示功能,因此前端和后端相互交织。

尽管 WordPress 可以用作出色的内容管理系统,但您可以使用 WordPress 提供的出色功能并有效地执行它,从而留下一个快速、轻量级的无头内容管理系统。您可以利用 WordPress 提供的 REST API 将您的内容管理扩展到您的主题之外。

当您使用 Headless WordPress 时,您将能够使用 WordPress 平台的后端功能,但它将变成一个反应式系统,这意味着内容将自动调整到正在查看网站的屏幕大小,并且它是与当前的 WordPress 明显不同,后者更主动地将内容推送或交付到大多数基于浏览器的站点

现在,这是了解什么是无头 WordPress 的简单方法,让我们以一些技术方式深入研究它。

在 Rest API 的帮助下,只要他们都说 JSON 语言,开发人员就可以与跨技术接口进行交互。借助 Rest API 输出的数据是 JSON 格式,而 JSON 是几乎所有 Web 技术都知道的最受欢迎的格式。 JSON 是 JavaScript 对象的基于文本的表示,其中包含键值对中的数据。

“名称”:[ {“id”:0,“名称”:“John Doe”},{“id”:1,“名称”:“Richard Lindley”},{“id”:2,“名称” :“杰克·摩尔”} ],

查看由 GitHub 托管的 rawexample.json

今天,我将通过将 WordPress Rest API 与 Vue.js 和 WordPress 一起用作我的基本 Web 应用程序的无头 CMS 来展示它的强大功能。

使用无头 WordPress CMS 的好处

WordPress 是一个开源平台这一事实消除了您一半的担忧,因为它为您设计任何类型的网站提供了极大的灵活性。现在,由于 Headless,您可以使用您希望使用的任何 Web 技术创建 Web 应用程序的前端,并使用最受欢迎的 CMS 来管理您网站的内容。

当您的网站开始增长时,您可能会感到创建博客功能的紧迫性,因为您希望人们了解您的产品或您提供的服务,但您的 Web 应用程序是使用 Vue.js 或 React 构建的。您必须进行编码才能构建它,但您可以在此处借助 WordPress Rest API 并管理内容。

如何使用 Vue.js 设置 WordPress 站点

首先,我们要做的是创建一个 WordPress 站点,因为它将是我们的主要来源,因为它将充当我们将使用的任何前端技术的数据源。 Rest API 将默认打开,如果您希望限制 Rest API 访问,那么您可以使用 Basic-Auth 或 Oauth2 身份验证方法。

转到设置→永久链接,然后选择帖子名称或自定义结构。

现在我们正在处理 API 调用,您需要下载 Postman 的 chrome 扩展。现在您已经下载了 Postman 扩展,打开它并以下面给出的格式输入 URL。

https://example.com/wp-json/wp/v2/posts

上面的 URL 将获取您的 WordPress 网站内的帖子数据。

想要开始使用 Vue.js?给你,[https://wpwebinfotech.com/blog/headless-wordpress-vue/

](https://wpwebinfotech.com/blog/headless-wordpress-vue/)