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

本指南側(cè)重於實(shí)際實(shí)施，從各種資源中汲取利用並應(yīng)對潛在的挑戰(zhàn)。請注意，WPGRAPHQL和GATSBY CLI是積極開發(fā)的，這意味著版本的兼容性至關(guān)重要。該項(xiàng)目利用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)建機(jī)制。全面的教程很容易獲得。
• 一個工作的WordPress安裝。有很多指南可以協(xié)助設(shè)置。

利用現(xiàn)有資源

該項(xiàng)目受益於先前的蓋茨比經(jīng)驗(yàn)和可重複使用的組件（版式，佈局等）。包括關(guān)鍵資源：

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

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

項(xiàng)目階段：

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

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

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

安裝必需插件

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

蓋茨比站點(diǎn)初始化

使用默認(rèn)啟動器創(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”，
      選項(xiàng)： {
        鍵入：“ wpgraphql”，
        fieldname：“ wpcontent”，
        URL：“ https：//tinjurewp.com/wp-gatsby/graphql”，//或使用環(huán)境變量
      }，，
    }，，
  ]，，
};

考慮使用dotenv模塊進(jìn)行環(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)出默認(rèn)帖子；

createPages API實(shí)現(xiàn)

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

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

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

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

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

GraphQl查詢

查詢菜單項(xiàng)使用GraphiQl：

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

組件創(chuàng)建

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

集成菜單

將Menu組件添加到Layout組件中。實(shí)施一個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片段來改善代碼組織和可維護(hù)性。 （請參閱鏈接的GitHub存儲庫中的完整代碼）。

第5階段：樣式和部署

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

造型

使用SASS或其他首選方法進(jìn)行樣式。考慮使用@wordpress/block-library合併WordPress塊樣式。

部署

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

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

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