一份很棒的 WordPress-Gatsby 资源列表。

WordPress 源 V4 和主题 Epic #19292

这是我创建的一个列表，旨在收集所有关于如何将 Gatsby 与 WordPress 结合使用的有用资源。如果有人有好的建议，我很乐意添加新的资源。欢迎随时贡献 :)

henrikwirth / awesome-wordpress-gatsby

关于 WordPress 与 Gatsby 结合使用的无头 CMS 的精彩资源列表

关于 WordPress 作为无头 CMS 和 Gatsby 作为静态站点生成器 (SSG) 的资源精选列表

无头 CMS是一种仅包含后端的内容管理系统 (CMS)。其目的是提供内容并通过 API（例如 REST 或 GraphQL）访问。

静态网站生成器 (SSG)是一个框架或设置，可帮助您生成静态网站 (HTML/CSS/JS)。数据源可以是任何格式，从本地文件（例如文本文件或 Markdown）到 API（例如 REST、GraphQL）。

为什么选择 Gatsby 和 WordPress？

WordPress 是全球使用最广泛的 CMS之一，因此许多人已经知道如何使用它。在性能至关重要的环境中，使用基于 PHP 模板的典型前端方法越来越成问题。将 WordPress 用作无头 CMS 并通过 JavaScript 进行常规 API 调用的方法已经存在，但是……

在 GitHub 上查看

清单

日期：2021年3月7日

无头 CMS是一种仅包含后端的内容管理系统 (CMS)。其目的是提供内容并通过 API（例如 REST 或 GraphQL）访问。

为什么选择 Gatsby 和 WordPress？

WordPress 是世界上使用最广泛的 CMS之一，因此许多人已经知道如何使用它。在性能至关重要的环境中，使用基于 PHP 模板的典型前端方法越来越成问题。将 WordPress 用作无头 CMS 并通过 JavaScript 进行常规 API 调用的方法已经存在，但也存在必须向服务器发出请求并根据响应进行渲染的缺点。这会增加加载时间。而 Gatsby 在编译时预渲染整个站点，因此用户在第一次请求时就可以获得一个完全准备好的静态站点，这使其成为性能最佳的方法之一。另一个巨大的好处是安全性，因为您的 WordPress 实例可以位于任何地方，甚至是本地，您无需向用户公开任何内容。因此，静态 Gatsby 站点无法被黑客入侵。在下面的资源中找到更多优缺点的论据。

社区

如果您需要任何帮助，这里有一些非常活跃的社区。

WPGraphQL

盖茨比

文章和演讲

详细阐述一般技术堆栈的文章和演讲列表。

2021.02：宣布 Gatsby 与 WordPress 的新集成
2021.02：WPGraphQL 在 Web 操作系统中的作用的 Jason Bahl
2021.02：Torque 新闻发布：Jason Bahl 和 WPGraphQL
2021.02：Gatsby 推出新的 WordPress 集成，扩展对无头架构的支持
2020.11：发布 WPGraphQL v1.0
2020.07：我通往解耦 WordPress Gatsby 网站的漫长旅程
2019.06：JAMstack 上的现代 Web 开发- Netlify 关于 JAMStack 上的现代 Web 开发的报告，由 O'REILLY 发布。

插件

一些实用插件列表，方便 WordPress 和 Gatsby 协同工作。按字母顺序排列。

WordPress

必备插件

WPGraphQL -文档- WPGraphQL 将 GraphQL 的强大功能带入您的 WordPress 网站。
WPGatsby - 此插件将您的 WordPress 网站配置为 Gatsby 的优化源。

WPGraphQL 扩展

WPGraphQL Cors - 这个来自@kidunot89和 @byfunkhaus的免费插件声称可以通过允许您设置 GraphQL 将接受的 CORS 标头来启用 WPGraphQL 身份验证“正常工作”，这意味着可以接受 WordPress 默认身份验证 cookie。
WPGraphQL 的总计数- 这个来自 @builtbycactus 的免费插件向 WPGraphQL 模式中的连接公开了总计数。
WPGraphQL Gutenberg - 将 Gutenberg 块暴露给 WPGraphQL API。
WPGraphQL JWT 身份验证- 扩展 WPGraphQL 插件以使用 JWT（JSON Web 令牌）提供身份验证。
WPGraphQL Lock - 通过实现持久化的 GraphQL 查询来启用 WPGraphQL 的查询锁定。
WPGraphQL Meta - 这个来自@robertorourke 的免费插件将通过 WordPress register_meta API 注册的元数据公开给 WPGraphQL。
WPGraphQL Meta Query - 为 WPGraphQL 插件添加 Meta_Query 支持，用于 postObject 查询参数。
WPGraphQL 持久查询- 这个来自 @qz 的免费插件增加了使用 WPGraphQL 持久查询的能力。
WPGraphQL 偏移分页- 这个来自@enshrined 的免费插件添加了基本的偏移分页，而不是 WPGraphQL 附带的标准基于游标的分页。
WPGraphQL 发送电子邮件- 这款来自 @Ash_Hitchcock 的免费插件允许您通过简单的修改发送电子邮件。它还支持限制发送到受信任来源。

使用其他插件和 WPGraphQL 的扩展

QL Search - 将 SearchWP 集成到 WPGraphQL 的扩展。
WPGraphQL 内容块- 这个来自 QZ.com 的免费插件公开了一种将 WordPress 帖子和页面中的 HTML 内容作为“块”（与 Gutenberg 无关）进行查询的方法，从而为您查询的内容带来更多结构。
WPGraphQL 启用所有帖子类型（DalkMania） - 这个来自@DalkMania 的免费插件会自动将所有注册的帖子类型添加到 WPGraphQL 模式中。
WPGraphQL 启用所有帖子类型（TylerBarnes） - 这个来自@tylbar 的免费插件会自动将所有注册的帖子类型添加到 WPGraphQL 模式中。
WPGraphQL Google Schema - 这款来自@izzygld261 的免费插件为 WPGraphQL 添加了 Google Schema 支持。
WPGraphQL Gutenberg ACF - 通过 GraphQL 公开 ACF 块
WPGraphQL MB（MetaBox） ——@DalkMania 的这个免费插件将所有使用metabox.io的注册元框添加到 WPGraphQL Schema。
WPGraphQL MetaBox Relationships - 这个来自@hsimah的免费插件为WPGraphQL 添加了对metabox.io Relationships 字段的支持（当也使用他的 wp-graphql-metabox 插件时）。
WPGraphQL Polls - 这个来自@andrenosouza 的免费插件允许您通过 GraphQL 查询和变异与来自 WP-Polls 插件的数据进行交互。
WPGraphQL Polylang 扩展- 使用来自 Polylang 插件的语言数据扩展 WPGraphQL 模式。
WPGraphQL 税务查询- 为 WPGraphQL 插件添加 Tax_Query 支持，用于 postObject 查询参数（WP_Query）。
WPGraphQL WPML - 这款来自 @rburgst 的免费插件，使用 WPML 插件中的语言数据扩展了 WPGraphQL 架构。此外，它还关闭了 WPML 默认过滤器，以便能够迭代所有帖子，无论其语言为何。
WPGraphQL 用于高级自定义字段- 将高级自定义字段公开给 WPGraphQL 模式。
WPGraphQL for BuddyPress - 这个来自@RenatoNascAlves 的免费插件将 BuddyPress 数据公开给 WPGraphQL。
用于 Carbon Fields 的 WPGraphQL - 来自@matepaiva的这个免费插件将使用 Carbon Fields 注册的字段公开给 WPGraphQL Schema。
WPGraphQL 用于自定义帖子类型 UI - 这个免费插件为自定义帖子类型 UI 添加了设置，允许您设置由 CPTUI 注册的哪些帖子类型和分类法应该显示在 WPGraphQL 模式中。
FacetWP 的 WPGraphQL - 这个来自@hsimah的免费插件在 WPGraphQL 查询上公开了过滤器，以允许使用 FacetWP 进行分面搜索。
WPGraphQL for Gravity Forms - 这个来自@kellenmace of @harness_up的免费插件将 @gravityforms 数据公开给 WPGraphQL，允许您查询表单、字段、条目等。
WPGraphQL for Metabox - 这个来自@hsimah的免费插件将使用流行的http://MetaBox.io注册的字段公开给 WPGraphQL Schema。
Ninja Forms 的 WPGraphQL - 这个免费插件将 Ninja Forms 插件创建的表单公开给 WPGraphQL Schema，并允许通过 GraphQL Mutations 提交表单。
WPGraphQL for Posts 2 Posts - 这个来自@kellenmace of @harness_up的免费插件会自动为您的所有 Posts 2 Posts 连接创建 GraphQL 连接。
WPGraphQL for SEOPress - 这个来自@moon_meister 的免费插件将 SEOPress 管理的数据公开给 WPGraphQL Schema，从而允许在无头应用程序中使用 SEO 数据。
WooCommerce 的 WPGraphQL - 这个免费插件将 WooCommerce 数据公开给 WPGraphQL，让您可以通过 GraphQL 查询和变异与商店的数据进行交互。
WPGraphQl Yoast SEO 插件- 将 Yoast SEO 数据公开给 WPGraphQL 插件。

其他有用的插件

高级自定义字段- ACF PRO
无头模式- 无头模式会为所有尝试访问网站的用户设置重定向。只有尝试访问 REST API、WP GraphQL API 或任何已登录用户访问无头模式以编辑或创建帖子的请求才会被允许访问。
Polylang
WP JAMstack Deployments - 用于在 Netlify（和其他平台）上进行 JAMstack 部署的 WordPress 插件。

Gatsby 插件

免费教程/课程

注意：自从 gatsby-source-wordpress V4 发布以来，它比 gatsby-source-graphql 更受欢迎，因此我将只列出与该方法相关的教程。

书面教程

2019.11：Gatsby WordPress Starter Advanced 指南（包含预览、i18n 等） ——本教程系列从使用 WPGraphQL 的 WordPress 和 Gatsby 的基本设置开始，然后深入更高级的主题，如部署、预览、i18n 和带有 ACF 灵活内容字段的页面构建器设置。
2019.08：使用 WordPress 和 Gatsby 进行实时预览- 教程展示如何使用主题的高阶组件来促进 WordPress 帖子和自定义帖子类型的预览。
2019.08：Gatsby 与 WPGraphQL、ACF 和 Gatbsy-Image - 指南，展示如何实现 gatsby-image，以便它可以用于 WordPress 媒体文件。
2018.08：无头 WordPress + Gatsby + Netlify 持续部署- 指南展示如何通过几个简单的步骤创建 WordPress + Gatsby + Netlify 设置。

视频教程

2019.11：25+ 个视频 - Gatsby + WordPress (2019) 完整课程- 本系列课程重点介绍如何将 WordPress 用作无头 CMS，并使用 GraphQL 模式进行交互。在设置好 WordPress 网站和主题后，我们将学习 Gatsby，并了解如何使用新的模式为 Gatsby 网站生成内容，以及如何以编程方式生成页面，将 Gutenberg 块转换为 React 组件，最后以 Gatsby 中的 SEO 为重点结束本章。
2019.07：Gatsby + WordPress 与 WPGraphQL（与 Jason Bahl 合作）— 与 Jason 一起学习- 在此流中，Jason Bahl 教您如何使用带有高级自定义字段和 WPGraphQL 的 WordPress 来创建强大、灵活的管理仪表板，然后在 Gatsby 网站中查询和显示该数据。
2019.07：速成课程：使用 WPGraphQL、ACF 和 React 的无头 WordPress - 在此视频中，Alex Young (WPCasts) 介绍了如何使用 WPGraphQL 和 React 获得简单的无头 WordPress 设置。
2019.06：将 WordPress 与 WPGraphQL 结合使用- 在本视频中，您将学习如何使用名为 WPGraphQL 的超棒插件以及一些额外的酷东西（如 GraphQL + 高级自定义字段）将 GraphQL 与 WordPress 结合使用。
2019.04：WPGraphQL for ACF - Jason Bahl 展示了如何使用 WPGraphQL 实现高级自定义字段。
2018.07：GraphQL 与 WordPress 和 Gutenberg - Jason Bahl - 2018 年 WordPress JavaScript 大会- 在 2018 年 WordPress JavaScript 大会的这次演讲中，WP GraphQL 插件的开发人员 Jason Bahl 提供了如何将 GraphQL 与 WordPress 和 Gutenberg 结合使用的最新示例。

付费教程/课程

付费课程列表。

请贡献使用当前堆栈的最新版本的已知资源。

开胃菜

项目启动者列表，您可以克隆并开始构建。

Gatsby Starter - WordPress Twenty Twenty - 使用新的gatsby-source-wordpress@v4将 WordPress Twenty Twenty 主题移植到 Gatsby 。
Gatsby + WPGraphQL 博客示例- 演示如何使用 WPGraphQL 作为 Gatsby 网站的来源。
Gatsby + Headless WordPress + Netlify Starter - 用于持续部署到 Netlify 的 Gatsby + WordPress 启动器。
Gatsby WordPress Starter Advanced - 一款高级 Gatsby + WordPress 入门程序，它是根据教程系列构建的，并与 ACF 灵活内容字段一起使用来创建内容块/布局。
Gatsby Starter Blog - 具有足够功能、可立即投入生产的博客启动器。

主题

以 WordPress 为源的 gatsby 主题列表，您可以在 Gatsby 设置中使用它。

Twenty Nineteen Gatsby 主题- Twenty Nineteen WordPress 主题移植到 Gatsby。
Gatsby WordPress Publisher 主题- Gatsby Publisher 主题允许您创建一个无头（或解耦）的 WordPress 网站。此主题将在基于 React 和 Gatsby 构建的静态前端中显示您的所有页面和文章。

文章来源：https://dev.to/nevernull/an-awesome-list-of-wordpress-gatsby-resources-36nl

一份很棒的 WordPress-Gatsby 资源清单。WordPress 源代码 V4 和主题 Epic #19292