使用新的gatsby源wordpress插件

在上一篇文章中，我讨论了如何使用Gatsby Source WPGraphQL插件来创建一个解耦WordPress驱动的盖茨比网站。该项目是在正在进行的WPGRAPHQL正在进行的开发版本和Henrik Wirth的出色教程之后完成的。尽管当时在某些生产地点使用了WPGRAPHQL，但仍有许多迭代引入了破坏变化。自去年11月WPGRAPHQL V1.0发布以来，该插件稳定，可通过WordPress插件目录获得。

WPGRAPHQL插件可用于创建使用WordPress进行内容管理的站点，但具有由Gatsby驱动的前端。我们将其称为“脱钩”或“无头” CMS，因为该站点的后端和前端是单独的实体，它们仍然通过API互相交谈，而前端的组件会消耗来自CMS的数据。

WPGRAPHQL插件网站具有可靠的逐步文档以开始入门，并且发布公告帖子列出了使用该插件的九个示例。

从真正的意义上讲，“脱钩”或“无头”站点，WPGRAPHQL可用于将WordPress数据端口到其他框架，例如Next.js，vue.js等。对于Gatsby Framework，建议使用Gatsby Source WordPress插件，并利用WPGRAPHQL从WordPress来源数据。

让我们一起设置所有内容并参观插件。

先决条件

在我的上一篇文章中，我们介绍了设置WordPress和Gatsby网站所需的先决条件，并将后端WordPress数据移植到具有站点部署的盖茨比驱动的前端站点。我在这里跳过了很多细节，因为本文的基本概念是相同的，除了WordPress数据由Gatsby Source WordPress插件获取。

如果您是盖茨比（Gatsby）的新手，并且刚刚跳入盖茨比（Gatsby）生成的静态站点生成器潮流，我建议您阅读React Expert David Cramer和Jared Palmer的“ React Expert David Cramer和Gatsby vs Next.js”的“诚实评论”。我们将要涵盖的不是每个人，这些文章可能会对自己评估是否适合您和您的项目。

WPGRAPHQL或GRAPHQL是Gatsby框架中使用的主要查询语言API。 GraphQL中经常进行更新，通常需要专家知识并留意破坏变化。毕竟，GraphQL是由React专家为其他React专家设计的。也就是说，有一些故障排除说明和WPGraphQL松弛，其中WPGraphQL和Gatsby Source WordPress插件作者都积极参与并帮助回答问题。

本文不是有关如何使用Gatsby Source WordPress插件的分步指南。同样，盖茨比的文档已经可以使用。相反，如果您碰巧是React，JavaScript，Node.js或GraphQl的专家，那么我们在这里涵盖的内容可能是您已经知道的东西。本文是根据我的个人经验的意见文章，我希望这对具有有关该主题的基本工作知识的普通WordPress用户很有用。

而且，在开始之前，值得一提的是，盖茨比源WordPress插件已在版本4中完全重写，并使用WPGRAPHQL作为数据源。以前的版本3版是用REST API作为数据源构建的。由于该插件的稳定版本最近发布了，因此支持其的起动主题和演示的数量是有限的。

首先，我们需要WordPress

对于这个项目，我使用Flywheel的Local设立了一个新的WordPress网站，该网站使用默认的20个主题。如WordPress法典所述，我导入页面和帖子的主题单元测试数据。虽然这是我正在使用的基线，但这很容易成为现有的WordPress站点，该网站要么在远程服务器或本地安装上。

现在我们已经建立了基线，我们可以登录WordPress管理员，并安装我们需要并激活它们的WPGRAPHQL和WPGATSBY插件。

正如我们在上一篇文章中所介绍的那样，这是在WordPress Admin中揭示GraphQL和WPGraphiQl API，从而允许GraphIQL API创建一个基于WordPress数据测试GraphQl查询的“游乐场”。

现在我们需要盖茨比前端

盖茨比（Gatsby）以良好的文档和固体起动模板而闻名。为了创建一个新的WordPress驱动的网站，Gatsby教程建议使用启动器或从头开始使用，这对我们正在做的事情就可以了。

盖茨比还为围绕特定技术构建的基本用例提供了示例网站库。当前恰好有一种使用WordPress，并且将WordPress与高级自定义字段插件一起使用。请注意，库中的示例站点仍然使用gatsby-source-wordpress插件3，并且在撰写本文时尚未更新到版本4。

根据Gatsby教程，创建以WordPress为动力的Gatsby网站有三个选择。让我们看看每个人。

选项1：使用盖茨比起动器

这些文档有一个有关如何设置WordPress-Gatsby网站的分步指南，但这是要点。

在命令行中运行以下内容，以从GitHub存储库中获取启动器，并将其克隆到My-Wpstarter项目文件夹中：

 ＃！克隆起动器存储库
盖茨比新的my-wpstarter https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

然后，安装NPM软件包

＃！ NPM
NPM安装

＃！或纱
纱线安装

现在，将启动器克隆起来，让我们在代码编辑器中打开gatsby-config.js文件，然后更新其URL选项以从我们的WordPress端点获取数据（请参见上文）。

 // gatsby-config.js
{
  解决：盖茨比词法，
    选项： {
     // WordPress是GraphQl URL。
     URL：process.env.wpgraphql_url || https://wpgatsbydemo.wpengine.com/graphql，
  }，，
}，，

现在，我们将用我们自己的WordPress网站URL替换启动器的数据源端点URL：

 // gatsby-config.js文件
{
  解决：“盖茨比 - 苏格尔”，
  选项： {
    URL：`http：// gatsbywpv4.local/graphql`，
  }，，
}，，

让我们确保我们在My-Wpstarter项目目录中。从项目文件夹中，我们将运行gatsby开发命令，以从WordPress数据源端点构建我们的新盖茨比网站。在终端中，我们应该能够看到盖茨比源字插件的获取数据，包括沿途错误和成功的站点流程。

如果我们在末尾看到成功的构建开发捆绑包消息，那意味着盖茨比站点构建过程已经完成，并且可以在http：// localhost：8000上查看该站点。

这是一个带有基本文件和一些组件的小型入门博客。它的文件结构与Gatsby-Starter-Blog非常相似，只是该文件具有一个模板文件夹，其中包括Blog-post.js和Blog-post-achive.js模板文件。

当我们在http：// localhost：8000/___ graphql上查看GraphIQL API资源管理器时，我们可以看到WPGRAPHQL公开的WordPress的所有数据，以及从UI中查询和检索特定数据。

你明白了！盖茨比（Gatsby）认为其余的要由我们构建，使用盖茨比组件将WordPress数据吸入演示文稿。

选项2：从头开始建造

Gatsby的文档提供了有关如何使用Gatsby的默认入门主题从头开始创建新的WordPress-Gatsby网站的详细分步指南。

我们将从命令行旋转一个新项目：

 ＃！创建一个新的盖茨比网站
盖茨比新的wpgatsby-from-scratch-demo

这为我们提供了一个包括入门主题的wpgatsby-from-scratch-demo文件夹。从这里，我们将CD到该文件夹​​并开始开发：

 cd wpgatsby-from-scratch-demo
盖茨比发展

现在，我们可以在浏览器中打开http：// localhost：8000，并获取欢迎页面。

现在，我们很高兴开始从WordPress网站开始获取数据。让我们安装盖茨比源插件：

 ＃！使用RPM安装
NPM安装gatsby-source-wordpress

＃！使用纱线安装
纱线添加盖茨比源字

如果我们现在检查浏览器，您会发现什么也不会发生 - 我们仍然受到同样的欢迎。要获取我们的WordPress网站数据，我们需要将插件添加到gatsby-config.js文件中。打开文件并插入以下内容：

 // gatsby-config.js
Module.exports = {
  sitemetadata：{
    // ...
  }，，
  插件：[
  //添加gatsby-source-wordpress插件
  {
      解决：“盖茨比 - 苏格尔”，
      选项： {
        /*
         * WordPress网站的GraphQl API的完整URL。
         *示例：'https：//www.example-site.com/graphql'
         */
        URL：`http：// gatsbywpv4.local/graphql`，
       }，，
     }，，
    // Gatsby-Source-Wordpress不需要以下插件。
  ]，，
}

就像上次一样，我们需要将WordPress数据端点源更改为WordPress站点的URL。让我们在终端中开发盖茨比以开始工作。

但是，当我们在浏览器中打开http：// localhost：8000时，似乎什么都没有发生。我们仍然看到相同的欢迎屏幕。但是，如果我们在浏览器中检查GraphIQL（在http：// localhost：8000/___ graphql），那么我们会看到所有WordPress数据暴露于我们的盖茨比站点，我们可以根据需要查询和显示。

让我们测试以下查询，我在Graphiql Explorer中直接从Gatsby的教程中拉出：

询问 {
  allwppost {
    节点{
      ID
      标题
      摘抄
      sl
      日期（格式化：“ mmmm dd，yyyy”）
    }
  }
}

当我们运行上述查询时，我们将看到allwppost.nodes属性值，具有ID，标题，摘录等的子属性。

现在，让我们打开我们的src/components/pegages/index.js组件文件，然后用以下方式替换代码：

 // src/components/pages/index.js
从“反应”导入反应
从“ gatsby”导入{graphql}
从“ ../components/layout”导入布局
从“ ../components/seo”导入SEO

导出默认函数home（{data}）{
  返回 （
    
      <seo title="“" home></seo>
      <h1 id="我的WordPress博客">我的WordPress博客</h1>
      <h4 id="帖子">帖子</h4>
      {data.allwppost.nodes.map（node =>）
        <div>
          <p> {node.title} </p>
          <div divallyseinnerhtml="{{{__html：node.excerpt}}}"></div>
        </div>
      ）}}
    
  ）
}

导出const pagequery = graphql`
  询问 {
    allwppost（sort：{fields：[date]}）{
      节点{
        标题
        摘抄
        sl
      }
    }
  }
`

保存它，通过开发盖茨比的开发重新启动服务器，然后刷新页面。如果构建成功，那么我们网站的主页应显示WordPress的分类博客文章列表！

教程之后，让我们为每个博客文章创建页面，然后将帖子标题从列表链接到帖子页面。在盖茨比基础教程的第7部分中详细描述了使用降价数据创建页面的过程，我们也将在此处遵循。

如教程中所述，Gatsby使用CreatePages API或所谓的“ Workhorse” API，以从数据（从Markdown或WordPress）编程中创建页面。与Markdown数据不同，我们不需要在此处创建一个slug，因为每个WordPress帖子都有其自己的独特sl，可以从WordPress数据终点获取。

为每个帖子创建页面

Gatsby使用位于我们项目根源的Gatsby-Node.js文件来编程创建博客文章。让我们在文本编辑器中打开gatsby-node.js文件，从教程中添加以下代码。

 // gatsby-node.js 
const路径= require（`路径）

exports.CreatePages =（{graphQl，action}）=> {
  const {createpage} =动作
  返回GraphQl（`
    {
      allwppost（sort：{fields：[date]}）{
        节点{
          标题
          摘抄
          内容
          sl
        }
      }
    }
  `）。然后（结果=> {
    console.log（json.stringify（结果，null，4））
    process.exit（）
  }））
}

如Gatsby第7部分教程中指出的那样，上述代码是从WordPress数据源创建我们的POST页面的第一部分。遵循指南，让我们重新启动我们的服务器，并随着Gatsby开发开发我们的网站。

在构建页面时，我们应该在终端中看到Console.Log输出）。但是，我们的主页看起来仍然一样。要创建单个帖子，盖茨比（Gatsby）需要模板来构建页面，我们将在下一步中创建。

创建博客文章模板

让我们在SRC/Directory中创建一个SRC/组件/模板文件夹，并通过从教程中粘贴以下代码段来创建Blog-post.js文件：

 // src/templates/blog-post.js
从“反应”导入反应
从“ ../components/layout”导入布局
从“ gatsby”导入{graphql}

导出默认函数blogpost（{data}）{
  const post = data.allwppost.nodes [0]
  console.log（帖子）
  返回 （
    
      <div>
        <h1 id="post-title"> {post.title} </h1>
        <div divand drangeslysetinnerhtml="{{__html：post.content}}"></div>
      </div>
    
  ）
}
导出const查询= graphql`
  查询（$ slug：string！）{
    allwppost（filter：{slug：{eq：$ slug}}}）{
      节点{
        标题
        内容
      }
    }
  }
`

如教程中所述，上面的代码片段创建了一个带有react JSX和包装帖子的帖子。在文件的底部，添加了GraphQl查询，并根据Post Slug变量$ slug调用特定帖子。当在gatsby-node.js创建页面时，此变量将传递给博客post.js模板。

接下来，我们还应使用教程中的以下代码更新gatsby-node.js文件的第12-13行。

 // gatsby-node.js
const路径= require（`路径）

 exports.CreatePages =（{graphQl，action}）=> {
   const {createpage} =动作
   返回GraphQl（`
     {
       allwppost（sort：{fields：[date]，order：dec}）{
         节点{
           标题
           摘抄
           内容
           sl
         }
       }
     }
   `）。然后（结果=> {
    result.data.allwppost.nodes.foreach（node => {
        createpage（{
          路径：node.slug，
          组件：path.resolve（`。
          语境： {
            //这是传递给blog-post.js的$ slug变量
            slug：node.slug，
          }，，
        }））
      }））
   }））
 }

让我们停止使用Gatsby开发并查看网站的本地服务器。我们不会看到我们的主页，其中包含博客文章链接的列表。但是，如果我们与http：// localhost：8000/abcdf核对，我们应该查看以下404页，其中包含单个页面和帖子链接的列表。

如果我们检查http：// localhost：8000/hello-gatsby-world，我们应该在其所有荣耀中我们的“ Hello Gatsby WordPress World”帖子。

下一步是将帖子标题从主页链接到实际帖子。

链接到主页的帖子

将从主页链接到帖子页面的工作是通过用盖茨比的链接组件包装在index.js文件中的帖子标题来完成的。让我们打开我们之前创建的index.js文件，并添加链接组件：

 // src/components/pages/index.js
从“反应”导入反应
导入{link，graphQl}来自“ gatsby”
从“ ../components/layout”导入布局
从“ ../components/seo”导入SEO

导出默认函数home（{data}）{
  返回 （
    
      <seo title="“" home></seo>
     {/* <h1 id="我的WordPress博客">我的WordPress博客</h1>
      <h4 id="帖子">帖子</h4> */}
      {data.allwppost.nodes.map（node =>）
        <div key="{node.slug}">
          
            <h2 id="node-title"> {node.title} </h2>
          
          <div divallyseinnerhtml="{{{__html：node.excerpt}}}"></div>
        </div>
      ）}}
    
  ）
}

导出const pagequery = graphql`
  询问 {
    allwppost（sort：{fields：[date]，order：dec}）{
      节点{
        标题
        摘抄
        sl
      }
    }
  }
`

我们从Gatsby导入了链接组件，然后用链接组件将帖子标题包裹起来，并引用了帖子的slug。让我们通过评论页面标题，将标题元素更改为

，然后在我们的GraphQl查询中添加DEC以及gatsby-node.js文件来清理代码。

正如我们之前所做的那样，让我们​​停止使用Gatsby开发并重新启动开发服务器，并在http：// localhost：8000上查看我们的主页。帖子标题应链接到单个帖子页面。

就我们要采用第二种方法而言。我们涵盖的其余内容将描述如何获取菜单项并查询其他数据类型（例如自定义帖子类型），并配置增量构建和预览等。

您可以将相同的过程应用于呼叫和创建页面，自定义帖子类型，自定义字段，分类法以及所有有趣且灵活的内容WordPress众所周知。这可以像您想要的那样简单或复杂，因此请探索并玩得开心！

- Gatsby教程文档

选项3：使用Gatsby的WordPress二十二十个起动器

Henrik Wirth创建和维护了Gatsby的默认WordPress二十二十个主题的启动模板，他还拥有一个非常详细且详尽的逐步指南，您可能会从我的上一篇文章中回忆起。与其他启动器不同，该启动器实际上已更新为盖茨比源插件的版本4，并在文档中描述的初始WordPress设置后开箱即用。它在Gatsby前端站点中保持了相同的二十二十种样式，但几乎没有限制（包括评论，每月档案页面和标签），这些限制是不支持的。

首先，让我们在我们的22个启动文件夹中克隆启动器。

 ＃！克隆·盖茨比（Clone Gatsby-Starter-Starter）二十千岁 
Gatsby New 22 Starter https://github.com/henrikwirth/gatsby-starter-parter-wordpress-wordpress-twenty

让我们进入该文件夹，然后运行Gatsby开发以旋转站点。它第一次无法正常工作，因为我们尚未在Env.example文件中更改WPGRAPHQL_URL值。如文档中所建议的那样，我们需要将文件重命名为.env.example简单地为.env。

之后，随着Gatsby开发重新启动开发服务器。它应该成功构建网站。

菜单可能会取决于WordPress菜单的命名方式，也可能不会出现。入门菜单菜单菜单项是菜单中的主要菜单项（第8行）。因为我已经使用Main-Menu设置了WordPress网站，所以我必须相应地更新菜单。

由于启动器已使用我们的工具的较旧版本进行了测试，因此我决定将插件撞到最新版本-WPGRAPHQL 1.2.6，WPGATSBY 1.0.6和GATSBY Source WordPress 4.0.1-并且它效果很好，没有任何错误。

二十二十个起动器遵循了二十九十Gatsby主题的文件结构，以及Gatsby Starter WordPress Advanced。 Henrik Wirth描述了WordPress数据如何在他的分步指南中移植到Gatsby，而Muhammad Muhsin也在教程中也是如此。否则，创建页面，页面模板，移植菜单项是完全相同的。

该启动器使用默认WordPress二十二十个主题的CSS，以及相同的资产文件夹，包括字体，图像，SVG文件和默认主题中包含的其他文件。

如果您对WordPress二十二十种样式感到满意，就是这样。享受您的新脱口盖茨比网站！

但是，假设我们想使用自定义样式。 CSS文件是通过gatsby-browser.js文件从资产文件夹导入的。

让我们修改网站的标题，页脚，帖子和页面的样式。盖茨比（Gatsby）提供了不同的选项来设置其组件，在此项目中，我遵循CSS模块进行样式和修改的CSS标记，对二十二十个启动器组件进行了相应的评价。

我们可以首先在SRC/组件/样式上创建一个样式文件夹，并在其中创建一个基本文件夹。这是我们目标的一般文件结构：

 ＃！ /样式文件夹的部分结构
src
 |  - /组件
   |  - /样式
     | -main.css          
     |  - /base
       |  -  reset.css
       |  -  variables.css
     |  - /scss
       | -HEADER.MODULE.CSS
       | -mainnav.module.css
       | -footer.module.css
       |  -  elements.module.css
       // 等等...

我们想为网站的标头和页脚设计样式，因此让我们打开启动器中的header.js和footer.js组件，然后用以下内容替换代码：

 // src/components/header.js
从“反应”导入反应
导入{graphQl，link，usestaticquery}来自“ gatsby”
从“ ./menu”导入菜单
从“ ../styles/scss/header.module.css”导入样式
从'../images/gatsby-icon.png'导入徽标'

const header =（）=> {
  const {wp} = usestaticquery（graphql`
    {
      wp {
        将军{
          标题
          描述
        }
      }
    }
  `）
  返回 （
    <header classname="{style.masthead}">
      <div classname="{style.masthead_info}">

      
        <img src="%7Blogo%7D" alt="“" logo    style="max-width:90%" height="“" display="“" inline-block marginbottom="“" classname="{style.site.site_logo}">
      
      <div classname="{style.site_header}">
        <div classname="{style.site_title}">
          
        </div>
        <div classname="{style.site_description}" dankinglysetinnerhtml="{{{__html：wp.generalsettings.description}}}"></div>  

      </div>
      
    
  ）
}

导出默认标头<p>同样，脚步器.js组件被修改如下：</p>
<pre rel="JavaScript" data-line=""> // src/components/footer.js
从“反应”导入反应

从“ ../styles/scss/footer.module.css”导入样式

导出默认（）=>（
  
    <p>©{new Date（）。getlualear（）} |该站点由{''} <a href="%E2%80%9C" https:> gatsbyjs </a> {'and'}
  
）</p>

现在，让我们重新启动开发服务器。我们应该看到以下内容，包括一个新的定制标题和页脚。我从Learning Gatsby中使用了相同的风格，该风格是Morten Rand-Hendriksen的在线课程（我是粉丝！）。

您可以在GitHub抓住我使用的所有代码。

这对WordPress爱好者意味着什么

有许多帖子比较了脱钩的WordPress和Jamstack网站的优势和缺点，例如我们涵盖的盖茨比示例。在我的研究中，我意识到，没有一个像克里斯在“ WordPress和Jamstack”中所写的那样详尽，在那里他比较了从性能和功能到开发人员体验和建立过程以及其他所有内容的所有内容。

我发现以下文章就各种主题得出了一些有用的结论，包括：

费用是多少？

总体假设是，jamstack托管价格便宜，并且比传统的灯泡托管便宜。但是实际上有很多要考虑的事情，您的实际成本可能会有所不同。

• “如何免费在本地，盖茨比和Netlify上运行WordPress网站！” （Nate Fitch）：Nate的看法是，如果项目是静态博客或不需要任何交互的网站，则像这样的无头WordPress设置可能是一个不错的选择。例如，将托管在Cloudinary或其他CDN上托管的图像并不需要太多工作，但是对于大型交互式站点而言。
• “ WordPress和Jamstack” （Chris Coyier）：在这里有一个特定部分，克里斯在jamstack站点的不同类型的托管上分解了定价，以及为什么像“ jamstack更便宜”这样的毛毯语句，因为实际的成本依赖于该网站及其用途，因此不飞翔。
• （Zell Liew）：Zell讨论了他选择托管计划的经验， “在Netlify，Vercel和Digital Ocean之间进行选择” 。他的看法：如果您有一个小项目，请与Netlify一起去；如果您有一个更大的项目，请使用数字海洋。

为什么要静态？

考虑到WordPress中“免费”的所有内容 - 考虑评论，插件，集成等 - 您可能会想知道它是否值得在服务器端设置中以用于客户端解决方案进行交易。在他的“静态？”中帖子，克里斯打破了您要选择另一个选择的原因。

我们如何获得评论功能？

我们通过WordPress即将发表评论。但是，在静态网站上对评论的支持有点像司令。在CSS-Tricks上的“ Jamstack评论”中，作者解释了如何使用NetLify Services在Gatsby等静态网站中实现动态评论。我在上一篇文章中简要介绍了这一点。

SEO呢？

• “用于WPGRAPHQL和YOAST的Gatsby SEO” （Gatsby Community插件）：可以使用此插件将广泛使用的用于WordPress的Yoast SEO插件集成到盖茨比前端。
• “关于WordPress的JavaScript SEO的入门” （Jono Alderson）：该详尽的指南包括有关如何将Yoast SEO集成到无头体系结构中的部分，以及依靠JavaScript对SEO的含义。最重要的是，只要继续遵循最佳实践，主题和插件开发人员就不必担心JavaScript和SEO的景观不断变化。同时，他们应该意识到发生了什么变化和适应。

事情如何一起工作？

• “ Gutenberg和Decled应用程序” （Jason Bahl）：Jason是WPGRAPHQL的创建者和维护者，并且对在解耦应用中使用新的WordPress块编辑器进行了深入的研究。
• “ Wpgraphql的Jason Bahl在网络操作系统中的角色” （YouTube）：这一次是Jason，这次讨论了模板。他涵盖了WPGraphQL在WordPress生态系统和无头盖茨比站点中的作用，强调WPGRAPHQL与数据曝光有关，就像WordPress REST API一样。 WPGRAPHQL如何在Gatsby中公开WordPress数据并在前端React组件中显示其取决于开发人员。

目前，没有针对非开发人员的Gatsby React模板，但是某些机构（例如Gatsby WP主题和ThemeForest Marketplace）开始填补空白。例如，Gatsby WP主题涵盖了用于MailChimp Integration（MailChimp Integration）的动态内容的插件，并使用contack 7插件的表单，yoast SEO等。 ThemeForest列出了30个盖茨比模板，包括盖茨比 - WordPress电子商务主题，它使您了解我们可以使用这种设置多远。请记住：这些都是商业网站，您发现的大部分内容都附有成本。

我不断发展的个人看法

如果您还记得的话，我在上一篇文章中以个人的思考结束了我的旅程，以创建一个无头的WordPress网站，该网站将Gatsby用作前端。我最初的看法还不是一份发光的评论：

根据我非常有限的经验，我认为目前可用的盖茨比WordPress主题还没有为像我这样的用户准备黄金时间使用。是的，在许多WordPress用户和开发人员脑海中显然是在出血边缘上尝试一些东西是令人兴奋的。同时，在WordPress块编辑器，WPGRAPHQL和GATSBY SourcePress插件上不断发展的工作使得很难预测事物的发展何方，并且何时将其安装到其他情况下安全使用的状态。

因此，在这一切之后，我漫长的前往无头WordPress网站的旅程，我现在的看法是什么？作为一个开放的学习者，我的想法仍在发展。但是我不同意克里斯在他的“静态与否”中所说的话？邮政：

运行WordPress网站是一个完全可以接受且通常是聪明的选择。我从鲁棒性和功能准备方面考虑这一点。需要电子商务吗？在那里。需要表格吗？有很棒的插件。需要增加CMS的工作原理吗？您可以控制内容的类型以及其中的内容。需要auth吗？那是一个核心功能。希望您有很好的编辑体验？古腾堡很光荣。

我是WordPress的爱好者，我喜欢WordPress作为CMS。但是，作为一项技术学习挑战，我还没有放弃将脱钩的WordPress网站作为个人项目。

我必须承认，学会用WordPress创建一个脱钩的盖茨比网站一直令人沮丧。我承认，对于许多WordPress用户而言，任何现代技术堆栈都不是“一杯茶”。盖茨比（Gatsby）具有陡峭的学习曲线，因为这些堆栈针对经验丰富的React和JavaScript开发人员。

自我学习新技术可能是一种令人沮丧的体验。如果我们（包括您的真正）缺乏节点，React，JavaScript以及最重要的是GraphQl的经验，那么学习Gatsby尤其令人沮丧。我的学习项目网站会因某种依赖性而破裂，并修复它可能需要花几天的时间研究。有时我想知道麻烦是否值得结果。不要误会我的意思；我的挫败感是我自己缺乏经验，而不是框架本身（因为它们很棒）。

甚至像大卫·克莱默（David Cramer）和贾里德·帕尔默（Jared Palmer）这样的经验丰富的开发人员，使用盖茨比（Gatsby）和graphql令人沮丧，并回应了我们初学者使用GraphQl时面对的一些情感。我与写道的大卫完全同意：

这是一个静态网站发电机。从字面上看，它不需要graphql。尽管在现实世界中很少有有价值的实例，但它不应要求GraphQL API读取已经在内存中的对象。

GraphQL是一种自以为是的查询语言API，其规范经常更改。实际上，WPGraphQL松弛中的大多数讨论都与查询有关。

在进行这个项目时，我在阅读有关CSS-Tricks的文章时越过了界面的React框架。它在不编写单个查询的情况下使用REST API获取所有WordPress数据。至少对于我的用例，这似乎是一个更好的选择。此外，这似乎是一种简单得多的选择。在我的简短经验中，我根本不必处理任何依赖性或图书馆问题。 Frontity的主题概念是如此的WordPress-Y，并提供了出色的教程。

我目前正在探索“前线框架”是否将是我脱钩的项目网站的更好选择，并将分享我在以后的文章中的经验。

资源

盖茨比（Gatsby）觉得它是针对经验丰富的React和JavaScript开发人员的目标，而不是像我这样的初学者！ Gatsby-source-wordpress和Gatsby-Source-WPGraphQL插件在将WordPress数据展示到Gatsby网站上做得非常出色，但是其余的则由用户使用您选择的框架在前端显示数据：React，vue，vue，vue，vue，next，etct，etct，ext。

缺乏对React和JavaScript的合理知识是初学者的主要障碍。盖茨比社区填补了许多此类空白，并且有很多可供学习和探索的资源。

盖茨比会议2021会谈

最近2021年盖茨比大会的两个研讨会与盖茨比WordPress网站有关。在一个中，杰森·巴尔（Jason Bahl）举办了一个研讨会，该研讨会浏览了如何创建由WordPress数据提供动力的盖茨比博客，包括支持Yoast SEO插件，以及如何将网站部署到Gatsby Cloud。

WP Engine的Matt Landers举办了另一个研讨会，他演示了如何使用高级自定义字段插件来创建团队成员页面。

这两个谈话都很好，尤其是如果您通过实践经验更好地学到更好的话。我还发现了与杰森·巴尔（Jason Bahl）的马特报告播客剧集，杰森（Jason）回答了针对初学者的基本问题。

教程课程

莫滕·兰德·亨德里克森（Morten Rand-Hendriksen）在LinkedIn学习方面拥有出色的课程，该课程使用了Gatsby Source WordPress插件。如果您对更多的动手经验感兴趣，可以在我们涵盖的两个盖茨比开始者上扩展自定义网站，那么本课程很棒，因为在教学中，如何创建一个完整的工作网站，并配有下拉标头导航，页脚菜单，帖子，页面，类别，类别，标签和页面导航。

该课程的练习文件可在GitHub LinkedIn学习存储库中获得。

盖茨比初学者

当时我写这篇文章，WordPress有十个Gatsby首发。如前所述，只有Gatsby首发WordPress二十二十是基于Gatsby Source WordPress插件的最新版本。其余的是版本3。

感谢您的阅读。我总是很想知道缺乏像我这样的大量技术经验的WordPress用户正在使用此插件。如果您有任何反馈，请随时在评论中发布它们。