spot_img
HomeWordPress教程它是什么以及如何设置它(+ 提示)

它是什么以及如何设置它(+ 提示)

JasperAI 10000字免费额度试用

无头 WordPress 系统可帮助网页设计师和开发人员更有效地在他们的网站上工作。 但是,如果您是这个概念的新手,您可能很难理解它是如何工作的。 此外,您可能想知道它是否适合您的项目。

这就是我们创建此无头 WordPress 快速指南的原因。 通过深入研究仅后端内容管理系统 (CMS) 的世界,您可以决定无头设置是否适合您的 Web 开发项目。

在这篇文章中,我们将仔细研究无头 WordPress,并讨论其优缺点。 然后,我们将向您展示如何开始使用它,并回顾一些您可以使用的工具。 让我们开始吧!

它是什么以及如何设置它(+ 提示)

无头 WordPress 简介

大多数 CMS 都有前端和后端。 对于 WordPress 站点,后端由管理面板和内容管理工具组成:

WordPress仪表板

同时,前端是访问者到达您的网站时看到的一切。 通常,此内容由您的活动 WordPress 主题呈现:

谷歌SEO优化服务
WordPress 测试站点主页

当您无头运行 WordPress 时,您会从主体(后端)中移除头部(前端)。 这样,您可以继续使用熟悉的仪表板,同时摆脱平台的前端限制。

在无头设置中,WordPress CMS 使用代表性状态传输 (REST) 将您的内容作为数据提供 应用程序编程接口 (API). 您可以通过向 WordPress 的内置 REST API 端点发送网络请求来访问此信息。 这使您可以自由地在自定义前端中呈现所有这些内容。

您甚至可以在独特的上下文中使用您的 WordPress 数据,包括移动应用程序和单页应用程序 (API)。 在下一节中,我们将仔细研究运行无头系统的好处。

为什么您可能想要无头运行 WordPress

在多个平台上重复使用相同的内容并不罕见。 例如,电子商务巨头亚马逊运营着一家在线商店和一款专用移动应用程序。 这两个频道显示相同的内容:

亚马逊商店玩具和游戏页面

使用无头电子商务设置,您可以在多个平台上使用完全相同的数据。 这使得在多个渠道上保持活跃状态​​变得更加容易。

WordPress divi主题

您的无头 WordPress 还充当中央存储库。 这可以确保跨所有平台的一致性。 这也意味着您只需要编辑一次您的内容,然后该更改将被复制到不同的渠道。

由于无头内容是通过 API 交付的,因此您可以自由使用自己喜欢的前端工具。 如果您选择一种您已经熟悉的工具,这可以帮助您减少设计和开发页面所花费的时间。

随着项目的发展,您可能需要采用新工具或改用替代技术。 好消息是,您可以在不影响 CMS 的情况下更改部分无头堆栈或迁移到替代框架。 这使您能够不断调整项目以满足不断变化的需求。

这种灵活性不仅限于后端。 通过删除 WordPress 前端,您还可以消除对主题和插件的依赖。

WordPress 可能拥有庞大的第三方软件生态系统,但主题和插件仍然受到平台前端惯例的限制。 通过消除这些限制,您可以更好地控制内容的外观和站点的功能。

无头 WordPress 的潜在问题

Headless WordPress 为您提供更多的设计和开发自由。 然而,这种灵活性是有代价的。

构建自己的前端可能是一个耗时且令人沮丧的过程。 它还需要大量的技术诀窍,并且可能涉及编写大量代码。

有一些 WordPress 框架和工具可以为您完成大部分繁重的工作。 但是,构建自己的前端比使用 WordPress 的现成工具要复杂一些。

即使您的网站已启动并运行,无头 WordPress 网站通常也需要更多的持续维护。 由于您手动构建了前端,因此您还必须手动实施任何更改。 这包括发布新内容和编辑您网站的设计。

主题和插件是 WordPress 体验的重要组成部分。 通过无头运行这个平台,你会立即失去对所有这些附加软件的访问权限。 如果您想添加新功能或更改您的设计,您需要手动将其编码到您的项目中。

H10的年终大促

除非您开发自己的解决方案,否则无头 WordPress 不提供所见即所得 (WYSIWYG) 编辑器或实时预览选项。 这会使您难以判断您的内容将如何出现在前端。

如何开始使用 Headless WordPress(2 种方法)

我们不会假装构建您自己的前端很简单。 但是,有些工具可以帮助简化此过程。

考虑到这一点,让我们探索两种以最少的麻烦设置无头 WordPress 项目的方法。

方法一:使用像 React 这样的框架

为 WordPress CMS 构建前端可能是一项耗时且复杂的任务。 出于这个原因,许多开发人员选择使用框架。

您可以使用 React JavaScript 库构建自定义 WordPress 前端。 这个受欢迎的资源包含您通过 WordPress REST API 访问存储在 CMS 中的数据所需的一切:

React 主页——用于构建用户界面的 JavaScript 库

React 框架还承诺通过消除重新渲染的需要来增强您的无头项目。 这意味着您的项目的基本代码只加载一次。

如果组件的状态发生变化,React 框架只会重新渲染受影响的内容。 这使得基于 React 的框架在计划构建 SPA 的开发人员中特别受欢迎。

最初是为与 Facebook 一起使用而推出的,许多知名人士现在已经接受了这项流行的技术。 这包括 Airbnb、Dropbox、Netflix 和 Reddit。

有了这么多跨国公司的支持,React 拥有广泛的在线支持也就不足为奇了,包括官方文档和有用的教程:

React 入门页面,包含其文档和相关教程

如果遇到问题,找到相关的答案和解决方案应该没有问题。 对于第一次探索 React 的人,或者对一般框架不熟悉的人来说,这是个好消息。

高质量外链购买

虽然您可以选择使用 React 库,但您也可以使用许多基于 React 的框架。 这包括 Frontity 项目,该项目经过预先配置,可为 WordPress 用户提供最佳体验:

Frontity 主页 – WordPress 的 React 框架

其他流行的基于 React 的框架包括 Gatsby.js 开源项目和 Vercel 的 Next.js。 有这么多可供选择的选项,您可以货比三家,找到最适合您的特定项目的选项。

方法 2:使用插件

使用 WordPress,有一个插件可以帮助您完成几乎所有任务。 在配置无头 WordPress 时,有一些不错的选项可以帮助您入门。

让我们来看看您可以使用的两个强大的插件。

1.WPGraphQL

JasperAI 10000字免费额度试用
WPGraphQL 横幅

WPGraphQL 是一个免费插件,旨在帮助您从无头 WordPress 获取数据。 该插件附带 GraphQL 集成开发环境 (IDE),使您能够浏览项目的 GraphQL 方案并测试查询和变更。

在幕后,WPGraphQL 将您的 WordPress 站点转换为 GraphQL API。 这意味着您可以使用任何能够向 GraphSQL 端点发出 HTTP 请求的客户端与此插件进行交互。

WPGraphQL 旨在与 Apollo Client、Next.js 和 Gatbsy.js 等框架一起使用。 如果您使用的是 Gatsby,则可能需要查看 WordPress 的 Gatsby 源插件。

使用此源插件,您可以执行快速增量构建并预览 CMS 中的内容。 出于这个原因,如果您打算使用 Gatsby.js,您可能希望选择 WPGraphQL。

主要特征:

  • 适用于您的 WordPress 网站的可扩展 GraphQL 架构和 API
  • 访问多个根资源
  • 能够跟踪连接资源之间的引用
  • 广泛的文档

价钱: 您可以免费安装此插件。

2. CoCart——无头电子商务

WordPress 上的 CoCart 横幅

在线购物已经从纯粹在计算机上执行的操作发展而来。 2020 年第三季度,智能手机产生了美国 56% 的在线购物订单。 这就解释了为什么我们看到如此多的在线商店创建移动应用程序。

如果您要跨多个平台开设在线商店,您可能希望使用 WooCommerce 等解决方案作为无头设置的一部分。 但是,默认情况下,WooCommerce 不通过 REST API 提供购物车支持。

这就是 CoCart 的用武之地。这个免费插件提供了一个 API,使您能够访问 WooCommerce 购物车作为无头设置的一部分。 它还支持想要以访客身份结账的客户,并能够执行基本身份验证。

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

如果您是管理员或商店经理,您可以使用此插件查看会话中的购物车,包括客户已添加到其购物篮中的产品。 这使得 CoCart 成为无头电子商务设置的强烈推荐插件。

主要特征:

  • 将简单、可变和分组的产品添加到 WooCommerce 购物车
  • 更新、删除和恢复项目
  • 跨多个域使用该软件
  • 从 100 多个 CoGart 过滤器和操作挂钩中进行选择

价钱: 这个插件是免费的 下载。

无头 WordPress 的最佳实践

无头 WordPress 网站可以提供很多,特别是在灵活性和可重用性方面。 但是,您可以采取一些步骤来充分利用新的无头设置。

传统上,WordPress 网站所有者使用 Yoast SEO 等专用插件管理其网站的搜索引擎优化 (SEO)。

然而,无头…

5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES