如何使用 Vue.js 创建无头 WordPress 网站
介绍 当谈到 WordPress 时,我只能想到一句话,那就是“Veni, Vidi, Vici”,意思是“看到、来到并征服”WordPress 刚刚看到了市场的潜力,因此它有一个愿景和占领了半壁江山。目前有 13 亿个网站,大约 4.55 亿个网站正在使用 WordPress。是的,我没有说谎,它是 455,后面有六个零。 现在在无头 WordPress 的帮助下,您可以保持前端和后端的不同,因
介绍
当谈到 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/)
更多推荐
所有评论(0)