使用 WordPress 和 React 為您的 Web 應用程序創建無頭 CMS

WordPress Rest API 是 WordPress 提供的眾多強大功能之一。 它使開發人員能夠創建引人入勝的插件和主題，並允許他們使用 WordPress CMS 為第三方應用程序提供支持。

在現代 Web 應用程序中，還開發了內容管理系統來管理網站的內容。 這會給開發人員增加額外的工作量。 由於Rest API提供瞭如此多的可能性，人們還可以將 WordPress 與 React 結合使用，作為基於 JavaScript 的 Web 應用程序的無頭 CMS。

那麼無頭 WordPress 到底是什麼？

成為“無頭”絕對不意味著 CMS 缺少標題部分。 這意味著無論用於構建前端的技術如何，您都可以將 CMS 用作通用內容管理系統。

只要使用相同的 JSON 語言，Rest API 就允許開發人員與跨技術接口交互。 WordPress Rest API 以 JSON 格式輸出數據，這種格式可以被大量 Web 技術理解。 JSON 是 JavaScript 對象的基於文本的表示形式，其中包含鍵值對中的數據。

 “朋友們”： [
      {
        “身份證”：0，
        “名稱”：“哈麗特·斯坦利”
      },
      {
        “身份證”：1，
        "name": "本頓奧多姆"
      },
      {
        “身份證”：2，
        “姓名”：“傑基·愛德華茲”
      }
    ],

今天，我將展示WordPress Rest API的強大功能，將其與 React 和WordPress一起用作我的基本 Web 應用程序的無頭 CMS。

使用 Headless WordPress CMS 的好處

作為一個開源平台； WordPress 為創建任何類型的網站提供了極大的靈活性。 將 WordPress 用作無頭 CMS，您可以使用任何 Web 技術創建 Web 應用程序的前端，並使用最流行的 CMS 之一管理其內容。

您可能會遇到需要在使用 React 或 Angular 構建的現有 Web 應用程序中添加博客功能的情況。 而不是在原生框架中編寫成熟的內容管理系統； 使用無頭 WordPress CMS 使用 Rest API 管理內容。

設置 WordPress 網站

讓我們從設置 WordPress 站點開始，因為這將充當我們前端 React 應用程序的數據源。

從 git 下載WP-Rest API插件的 zip 文件，並將 zip 文件夾上傳到您的 WordPress 插件文件夾中。 文件上傳後，激活插件。 這將在您的 WordPress 網站內啟用 WordPress Rest API。

現在，轉到設置 → 固定鏈接，然後選擇帖子名稱或自定義結構。

由於我們正在處理 API 調用，因此請下載Postman的 chrome 擴展。 在 Postman 中，按以下格式輸入 URL：

https://example.com/wp-json/wp/v2/posts

上面的 URL 將獲取您的 WordPress 站點內的帖子數據。

下載用於創建自定義帖子類型的自定義帖子類型 UI插件。 當我們在下一步中將 WordPress 與 React 結合使用時，將顯示此自定義帖子。

安裝並激活插件並繼續添加新的帖子類型。 在本教程中，我將為圖書創建自定義帖子類型。

在 Post Type Slug 中，鍵入自定義帖子的名稱。

確保在 REST API中顯示複選框設置為true並且還設置了 REST API base slug。 如果您希望將 WordPress 用作無頭 CMS，這是強制性的。

選中您希望從 REST API 獲取的信息的所有框。

保存更改後，您會注意到側欄中填充了一個新選項。 單擊它以在您的自定義帖子類型中添加新書。

我通過放入示例數據以及我的帖子摘錄來創建我的第一本書。

要通過 API 驗證數據是否可用，請繼續點擊 Postman 中的 URL。

現在，URL看起來應該像https://exampe.com/wp-json/wp/v2/書

我們還可以使用ACF和ACF 向 RestAPI插件添加更多字段，例如 Publisher。

安裝並激活這兩個插件。

默認情況下，ACF 不與 WordPress Rest API 對話，因此，我們還需要下載ACF REST API插件。

通過使用自定義字段插件，我將為我的圖書添加 Publisher 字段。

確保從列表中選擇所需的帖子類型。 之後點擊“發布”。

在我的自定義帖子類型中填充了一個新字段，我可以在其中定義我的書的出版商。 這就是我們設置 WordPress 以將數據發送到 ReactJS Web 應用程序所需要做的全部工作。

React 入門

什麼是 ReactJS

React 是一個由 Facebook 和開發者社區維護的用於 Web 的 JavaScript 庫。 JavaScript 是一個強大的 Web 開發工具，有幾個用 JavaScript 編寫的庫可以增強網站的功能。 ReactJS 主要用於開發快速、健壯和動態的單頁應用程序。

設置 React 應用程序

要使用 React 構建應用程序，您需要在您的計算機上安裝以下依賴項。

• NodeJS 和 NPM。
• 文本編輯器，例如 Sublime 或 Visual Studio Code。
• 用於版本控制的 Git（可選）

環境搭建好後，打開命令行，運行以下代碼，使用ReactJS創建項目。

 npx create-react-app 前端

創建應用程序後， cd（更改目錄）到應用程序文件夾並鍵入以下命令以安裝用於 API 調用的Axios包。

 npm 和 axios

現在，打開您最喜歡的文本編輯器中的文件夾。 我正在使用 Visual Studio 代碼。

通過運行命令 npm start 啟動應用程序。

如果一切正常，我們就可以使用 WordPress 作為無頭 CMS 使用 React 構建我們的 Web 應用程序。

在src文件夾中創建一個新文件夾 ' components '，並在 ' components ' 文件夾中創建一個新文件 ' Books.js '。

在 ReactJS 上渲染 Post 數據

在Book.js文件中，我們將從 WordPress Rest API 獲取數據。 下面是請求 Rest API 端點的代碼——在我的例子中是“ /books ”——並以 JSON 格式顯示數據。

 從“反應”導入反應，{ 組件}
從 'axios' 導入 axios；

導出類書籍擴展組件{
   狀態 = {
       書籍：[]，
       isLoaded: 假
   }

 組件DidMount（）{
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           書籍：res.data，
           isLoaded: 真
       }))
       .catch(err => console.log(err))
   }


   使成為（） {
      控制台日誌（這個狀態）；
       返回 （
           <div>
              
           </div>
       )
   }
}

導出默認圖書

上面的代碼將在控制台中顯示數據數組，然後在渲染塊內使用。

現在，在App.js文件中調用Books組件，如下所示。

 從“反應”導入反應；
導入'./App.css';
從“./components/Books”導入書籍；

功能應用（）{
 返回 （
   <div className="應用程序">
    <書籍/>
   </div>
 );
}

導出默認應用程序；

App.js是我們 Web 應用程序的入口點，因此，引用此文件中的“Books”組件很重要。

在 ReactJS 上顯示發布數據

可以通過在render 方法中添加代碼來顯示數據。

 使成為（） {
       const {books, isLoaded} = this.state;
       返回 （
           <div>
               {書。地圖（書=>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

我們將創建一個新組件並將其命名為“ BookItems.js ”，而不是在此處顯示數據，因為我希望將其與父組件分開。

將Bookk.js 中的 render 方法更改為：

 使成為（） {
       const {books, isLoaded} = this.state;
       返回 （
           <div>
               {書。地圖（書=>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

現在，我們需要渲染 BookItems 組件。

在BookItems.js 中添加以下代碼：

 從“反應”導入反應，{ 組件}
從 'axios' 導入 axios；
從 'prop-types' 導入 PropTypes；

導出類 BookItems 擴展組件 {
 
   使成為（） {
       const { title } = this.props.book;
       返回 （
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

導出默認 BookItems

在上面的代碼中，我引用了 book 屬性來獲取標題和其他信息。

注意：確保引用“Books”組件中的BookItems組件。

我的BookItems.js最終版本如下所示：

 從“反應”導入反應，{ 組件}
從 'prop-types' 導入 PropTypes；
從 'axios' 導入 axios；
導出類 BookItems 擴展組件 {

   狀態 = {
       imgUrl: '',
       作者： ''，
       isLoaded: 假
   }

   靜態 propTypes = {
       書：PropTypes.object.isRequired
   }

   組件DidMount（）{
       const {featured_media, author} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all([getImageUrl, getAuthor]).then(res => {

           控制台日誌（res）；
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               作者： res[1].data.name,
               isLoaded: 真

           });
       });
    }
 
   使成為（） {
       const { 標題，摘錄} = this.props.book;
       const {author, imgUrl, isLoaded} = this.state;
       返回 （
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{作者}</strong><br/>
              <div risklySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

導出默認 BookItems

瀏覽器中的輸出如下所示：

不是最漂亮的吧？ 嗯，那是因為樣式超出了本教程的範圍。

包起來！

今天，我向您展示瞭如何將 WordPress 與 React 一起用作 Web 應用程序的無頭 CMS。 你也可以在 Git 上下載 React 代碼。 但是，它不僅限於 React。 您還可以嘗試使用 VueJS、Angular 或任何 JavaScript 框架。 您可以使用 WordPress Rest API 做很多事情。 天無絕人之路，所以繼續為您的下一個 Web 項目使用 WordPress。