本教程建立在上一篇文章的基礎(chǔ)上，提供了整合蓋茨比和WordPress的詳細演練。蓋茨比（Gatsby）的速度和安全利益吸引了WordPress用戶，提供了一種利用這些優(yōu)勢的方法，同時保留熟悉的WordPress內(nèi)容管理經(jīng)驗。

本指南側(cè)重于實際實施，從各種資源中汲取利用并應(yīng)對潛在的挑戰(zhàn)。請注意，WPGRAPHQL和GATSBY CLI是積極開發(fā)的，這意味著版本的兼容性至關(guān)重要。該項目利用WPGRAPHQL 0.8.3， gatsby-source-wpgraphql 2.5.1和GATSBY CLI 2.12.21。始終請參閱官方文檔以獲取最新更新。

有幾個出色的蓋茨比起步劑，包括亞歷山大·斯帕拉托（Alexandra Spalato）的gatsby-wordpress-theme-blog ，扎克·戈登（Zac Gordon）和穆罕默德·穆辛（Muhammad Muhsin）的twenty-nineteen-gatsby-theme 。

先決條件

跟隨，您需要：

• 基本的反應(yīng)和JavaScript知識。許多在線資源提供介紹性指南。
• 掌握了蓋茨比動態(tài)頁面創(chuàng)建機制。全面的教程很容易獲得。
• 一個工作的WordPress安裝。有很多指南可以協(xié)助設(shè)置。

利用現(xiàn)有資源

該項目受益于先前的蓋茨比經(jīng)驗和可重復(fù)使用的組件（版式，布局等）。包括關(guān)鍵資源：

• 亨里克·沃思（Henrik Wirth）的綜合蓋茨比WordPress入門指南。
• 杰森·倫斯托夫（Jason Lenstorf）的jamstack遷移教程。
• 穆罕默德·穆辛（Muhammad Muhsin）的指南關(guān)于載入二十個主題的指南。

該教程反映了Henrik Wirth的結(jié)構(gòu)，省略了諸如圖像處理和ACF柔性內(nèi)容之類的高級功能。

項目階段：

1. WordPress和Gatsby設(shè)置
2. 內(nèi)容遷移
3. 導(dǎo)航實施
4. 博客文章顯示
5. 樣式和部署

階段1：設(shè)置WordPress和Gatsby

首先建立一個WordPress站點（現(xiàn)有或新的，甚至是本地安裝）開始。該項目使用二十個主題。

安裝必需插件

安裝WPGRAPHQL（對于GraphQL API）和WPGRAPHIQL（可選，但有助于測試查詢）。這些插件可能在WordPress插件目錄中不可用；直接從github下載并手動安裝。 WPGRAPHIQL在WordPress儀表板中提供了方便的測試接口。

蓋茨比站點初始化

使用默認啟動器創(chuàng)建本地蓋茨比網(wǎng)站：

蓋茨比新的wordpress-gatsby https://github.com/gatsbyjs/gatsby-starter-default

啟動開發(fā)服務(wù)器（ gatsby develop ），然后訪問localhost:8000的入門頁面。

安裝并配置gatsby-source-graphql插件插件：

紗線添加gatsby-source-graphql?；騨pm安裝-Save gatsby-source-raphql

配置gatsby-config.js ：

 Module.exports = {
  插件：[
    {
      決心：“蓋茨比 - 蘇格拉夫Ql”，
      選項： {
        鍵入：“ wpgraphql”，
        fieldname：“ wpcontent”，
        URL：“ https：//tinjurewp.com/wp-gatsby/graphql”，//或使用環(huán)境變量
      }，，
    }，，
  ]，，
};

考慮使用dotenv模塊進行環(huán)境變量來管理敏感數(shù)據(jù)。

重新啟動服務(wù)器后，可以通過https://localhost:8000/__graphql/訪問WPGRAPHQL API。

階段2：遷移WordPress內(nèi)容

Gatsby通過使用GraphQl查詢數(shù)據(jù)在構(gòu)建過程中創(chuàng)建頁面。這涉及使用Gatsby的onCreateNode和createPages API。

內(nèi)容準(zhǔn)備

將帖子和頁面添加到您的WordPress網(wǎng)站。從Gatsby pages文件夾中刪除index.js和page-2.js以避免沖突。

模板創(chuàng)建

為帖子（ /src/templates/post/index.js ）創(chuàng)建模板和頁面（ /src/templates/page/index.js ）：

 // src/templates/post/index.js（示例）
從“反應(yīng)”中導(dǎo)入反應(yīng)；
從“ ../../../components/layout”導(dǎo)入布局;
從“ ../.././components/seo”導(dǎo)入SEO;

const post =（{pageContext}）=> {
  const post = pageContext.post;
  返回 （
    <layout>
      <seo title="{post.title}"></seo>
      <h1>{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  ）；
};

導(dǎo)出默認帖子；

createPages API實現(xiàn)

使用Gatsby的createPages API從WordPress數(shù)據(jù)中生成頁面。這涉及GraphQl查詢和數(shù)據(jù)映射。 （請參閱鏈接的GitHub存儲庫中的完整代碼）。

第三階段：實施導(dǎo)航

WordPress的導(dǎo)航管理允許創(chuàng)建菜單。本節(jié)重點是將主要菜單移植到Gatsby。

WordPress中的菜單創(chuàng)建

在WordPress中創(chuàng)建一個名為“主”的菜單，將鏈接添加到主頁，示例頁面和其他相關(guān)內(nèi)容。

GraphQl查詢

查詢菜單項使用GraphiQl：

查詢myquery {
  menuitems（其中：{位置：primary}）{
    節(jié)點{
      標(biāo)簽
      URL
      標(biāo)題
      目標(biāo)
    }
  }
}

組件創(chuàng)建

創(chuàng)建菜單項（ MenuItem.js ）和菜單本身（ Menu.js ）的組件，處理從絕對路徑到相對路徑的URL轉(zhuǎn)換。 （請參閱鏈接的GitHub存儲庫中的完整代碼）。

集成菜單

將Menu組件添加到Layout組件中。實施一個UniversalLink組件來處理內(nèi)部和外部鏈接。

第4階段：顯示博客文章

該階段著重于創(chuàng)建博客文章模板和分頁的組件。

全局變量

創(chuàng)建一個globals.js文件以管理blogURI之類的設(shè)置。

博客模板

創(chuàng)建一個博客模板（ /src/templates/post/blog.js ）以顯示帖子，利用PostEntry和Pagination組件。

發(fā)布輸入組件

創(chuàng)建一個PostEntry部件以顯示單個帖子，包括特色圖像和摘錄。

圖像組件

創(chuàng)建一個Image組件來處理特色圖像，包括后備圖像。

分頁部分

創(chuàng)建一個Pagination組件，用于通過分頁的帖子導(dǎo)航。

重構(gòu)createPages和createPosts

rebactor createPages.js和createPosts.js使用GraphQl片段來改善代碼組織和可維護性。 （請參閱鏈接的GitHub存儲庫中的完整代碼）。

第5階段：樣式和部署

本節(jié)涵蓋了樣式和部署策略。

造型

使用SASS或其他首選方法進行樣式?？紤]使用@wordpress/block-library合并WordPress塊樣式。

部署

利用NetLify或其他平臺進行連續(xù)部署?？紤]使用jamstack部署插件進行由WordPress更改觸發(fā)的自動部署。

該綜合指南為整合蓋茨比和WordPress提供了堅實的基礎(chǔ)。請記住，請咨詢鏈接的GitHub存儲庫以獲取完整的代碼示例和更多詳細信息。該過程涉及多個步驟，需要對Gatsby和WordPress有很好的了解。但是，結(jié)果是一個快速，安全且可維護的網(wǎng)站。

以上是使用WordPress數(shù)據(jù)創(chuàng)建蓋茨比網(wǎng)站的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！