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

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

還開發了內容管理系統來管理現代 Web 應用程序中的網站內容。 這會給開發人員增加額外的工作量。 有了Rest API提供的眾多可能性，人們還可以考慮將 WordPress 與 React 一起用作基於 JavaScript 的 Web 應用程序的無頭 CMS。

什麼是無頭 WordPress？

無頭 WordPress 網站是主要使用 WordPress 進行內容管理並使用任何其他技術構建前端並將內容顯示給網站訪問者的網站。

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

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

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

使用無頭 WordPress CMS 的好處

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

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

如何為 ReactJS 設置 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 時，將顯示此自定義帖子。

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

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

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

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

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

我通過輸入示例數據和我的帖子的摘錄創建了我的第一本書。

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

現在，URL 應該類似於 https://exampe.com/wp-json/wp/v2/books 。

我們還可以使用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 創建反應應用程序前端

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

 npm i axios

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

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

如果一切正常，我們都準備好使用 WordPress 作為無頭 CMS 使用 React 構建我們的 Web 應用程序。

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

如何在 ReactJS 上渲染髮布數據

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

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

導出類書籍擴展組件 {
   狀態 = {
       書籍：[]，
       已加載：假
   }

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


   使成為（） {
      控制台.log(this.state);
       返回 （
           <div>
              
           </div>
       )
   }
}

導出默認圖書

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

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

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

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

導出默認應用程序；

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

如何在 ReactJS 上顯示帖子數據

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

 使成為（） {
       常量 {books, isLoaded} = this.state;
       返回 （
           <div>
               {books.map（書=>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

我們將創建一個新組件並將其命名為“ BookItems.js ”，而不是在這裡顯示數據，因為我想讓它與父組件分開。

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

 使成為（） {
       常量 {books, isLoaded} = this.state;
       返回 （
           <div>
               {books.map（書=>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

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

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

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

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

導出默認 BookItems

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

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

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

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

   狀態 = {
       imgUrl: '',
       作者： ''，
       已加載：假
   }

   靜態 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 => {

           控制台.log(res);
           這個.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               作者：res[​​1].data.name，
               已加載：真

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

導出默認 BookItems

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

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

包起來！

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