WordPress REST API：下一代 CMS 功能

超過四分之一的網絡在 WordPress 上運行。 這是一個非常了不起的壯舉，考慮到它已經存在了十多年，這使得它在科技年代相當古老。

WordPress 的秘訣是什麼？ 簡單——這是管理您的內容的最簡單但最可擴展的方式。 然而，有一段時間，WordPress 似乎已經落後了。

隨著網絡越來越依賴 JavaScript 來創建身臨其境的交互式體驗，越來越清楚的是 WordPress 需要為用戶和開發人員提供與其內容進行交互的新方式。

雖然 WordPress 建立在 - 並將繼續建立在 - PHP 之上，但 WP REST API 試圖在 PHP WordPress 核心的遺留問題與 JavaScript Web 應用程序以及本機移動設備的潛力和力量之間架起一座橋樑和桌面應用程序。

WordPress REST API 將任何 WordPress 網站的內容帶入一個易於使用的 API，允許 WordPress 作為存儲和檢索系統，用於在網絡上發佈內容。

將 REST API 引入 WordPress

如果您認為 WP REST API 突然出現，那您就錯了。

向 WordPress 添加全新功能並非易事。 由於本質上是開源軟件，WordPress 的開發依賴於整個社區來取得進展。

幾年前，API 的開發作為一個單獨的功能插件開始，它允許開發人員在受控環境中試驗並為項目做出貢獻。

在許多迭代和增強以及兩個完全獨立的版本中，REST API 背後的貢獻者必須測試和評估提供對數千萬網站數據的開放 API 訪問的好處和巨大後果。

WordPress 4.4，代號“Clifford”，將項目的初始基礎設施帶入了 WordPress 核心，而端點直到 WordPress 4.7，“Vaughan”才出現。

從本質上講，這讓開發人員有時間測試支持 API 的功能，而無需實際暴露數據本身。

現在，初始內容端點已合併到所有當前版本的 WordPress 中，插件開發人員和主題作者可以嘗試令人興奮的新方法來檢索、查看和更改傳統 wp-admin 體驗之外的數據。

分解縮寫：從 HTTP 到 JSON REST API

要了解 WP REST API 的重要性，了解我們如何在線共享數據的基礎以及 Internet 的發展方向可能會有所幫助。

HTTP 是我們日常處理的大多數網絡流量的基礎。 如果你在瀏覽器中輸入一個 URL，你就是在發出一個請求。 相應的服務器接收您的請求並提供響應。 這筆交易幾乎是我們在網上所做的一切的基礎。 瀏覽器發出請求，服務器提供響應。

我們發出的請求類型會影響我們得到的響應類型。 大多數時候，我們發出一個簡單的GET請求：“嘿 Google，把你的著陸頁給我。” 谷歌提供了回應。

隨著網絡變得更具交互性，我們開始利用其他 HTTP 請求，包括PUT 、 POST和DELETE 。

例如，我們在網站上填寫搜索欄：“嘿 Google，將我的電子郵件地址和密碼發佈到您的登錄頁面。” Google 為我們開始新的會話並提供不同的響應。

該協議是我們構建 WordPress 網站的基礎。

我們使用表單和 PHP 將數據 GET 和 POST 到我們的數據庫中。 與流行的觀點相反，WordPress 的這個基礎不會很快改變。 WordPress 現在所做的就是為開發人員提供一種通過 RESTful API 與 WordPress 數據交互的新方法。

具象狀態轉移 (REST)

WordPress 開發人員通常應該熟悉 API，例如 Shortcode API 和 Options API。 這些 API 定義了組成 WordPress 的組件的功能，因此主題和插件作者可以擴展 WordPress 的核心功能。 然而，WP REST API 有點不同。

REST或 RESTful API 是關於將您的數據安全地暴露給來自外部源的 HTTP 請求。 它還涉及建立一個通用架構和一組協議來響應這些請求。 雖然此類服務背後有更先進的想法和原則，但這些超出了本文的範圍。

WP REST API 的存在，特別是在 WordPress 4.7 之後，意味著您網站的所有內容，包括帖子、頁面、評論和任何公共帖子元數據，現在都可以作為原始數據直接訪問。 這也意味著您可以根據需要從傳統的 wp-admin 之外更改此數據，可能通過移動或桌面應用程序。

您現在可以以 JSON 的形式對數據進行序列化訪問，而不是將您的數據簡單地視為數據庫中的行。

JSON - XML 發生了什麼？

WordPress 專家對 XML 有著豐富的經驗，XML 是一種在站點之間共享內容的常用格式。

與 XML 類似，JSON 只是一種機制，它允許我們通過將數據綁定到特定的語法來輕鬆地傳輸數據。 JSON 實際上是一個字符串，一個 JavaScript 對象的文本表示，將您的數據存儲在一組鍵值對中。 WordPress 帖子的常見 JSON 表示形式可能如下所示：

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

（如有必要，您可以使用 JSON 格式化工具來美化 JSON 響應。）

通過 WP REST API 的完整 JSON 響應將包含有關帖子的其他信息，包括元數據。 通過方便地將這些數據捆綁成 JSON 格式，您可以以令人興奮的新方式與您的 WordPress 內容進行交互。

JSON 最適合與 JavaScript 配對並非巧合。 隨著越來越多的 WordPress 開發人員開始“深入學習 JavaScript”，我們將看到越來越多的 WordPress 作為後端的高級用途。

我們如何查找數據：按照路線到達端點

通過 REST API 訪問所有站點數據就像編寫 URL 一樣簡單。

對於至少運行 4.7 版的任何 WordPress 站點，將以下字符串添加到站點 url 的末尾： /wp-json/wp/v2 （例如， http://example.com/wp-json/wp/v2 ://example.com/wp-json/wp/v2）。 將該 URL 放入瀏覽器中，看看會出現什麼情況。

結果可能看起來像一大堆數據，除非你安裝了一個清理 JSON 的瀏覽器擴展。 大量數據是您的特定 WordPress 網站的 JSON 格式的內容和元信息。

通過加載該內容，您剛剛定義了一個路由並要求您的瀏覽器為您獲取它。

路由是映射到特定方法的 URL。 WordPress 核心讀取該路由，每個斜杠“/”代表應遵循的特定路徑或參數。

該路徑在端點處結束，WordPress 核心內部的函數可以決定提供哪些數據以及如何處理所提供的任何數據。

一個示例端點可能是“/wp-json/wp/v2/posts/1”，我們在其中添加了路徑“/posts”和“/1”。 這個特定的端點告訴我們的站點檢查我們的數據，拉起我們的帖子，並拉起 ID 為 1 的帖子。

REST API 如此有用的原因在於它是可擴展的，這意味著您可以獲取網站內的任何數據，並將其添加為端點。 目前（或很快將）支持大多數核心 WordPress 功能。

但是，主題和插件開發人員可以開始將他們的自定義內容和設置添加為端點，從而允許用戶以新的方式與他們的網站進行交互。

如果您對 WordPress 站點上當前可用的端點感到好奇，像 Postman 這樣的瀏覽器應用程序提供了一個專門用於探索 API 的 GUI。

標頭和身份驗證

在瀏覽器中鍵入 URL 端點看起來很簡單，但它實際上包括一組默認標頭以及請求。 反過來，一組標頭也與響應一起發回。 這些標頭包含許多有用的信息，但對我們而言最重要的信息與我們發出的請求類型以及我們是否經過身份驗證有關。

如果您跳入瀏覽器的“開發人員工具”，您可以檢查加載到瀏覽器窗口中的任何資產的 HTTP 標頭，包括 HTML 文件、CSS 樣式表、圖像等。

第一個要考慮的標頭是Request Method ，它直接對應於我們之前了解的那些 HTTP 請求。 如果我們只是查看一個頁面，您很可能會在這裡看到GET作為請求方法。

調用 REST API 的應用程序可能會選擇將標頭的請求方法更改為 POST。

POST 方法告訴您的網站在 WordPress 數據庫中輸入新數據或更改現有數據。 通過 POST 方法發送信息，其他應用程序可以更改您的數據，而無需登錄 wp-admin。

但是，無需擔心，因為除非它們還包含為身份驗證提供正確憑據的標頭，否則您的網站將拒絕它們。

注意：但是，對 REST API 的調用進行身份驗證的方法仍未最終確定，這使得身份驗證成為想要使用 REST API 添加或更改數據的開發人員進入的最大障礙。

目前，有一些可用的選項，包括來自 REST API 背後的開發人員的插件。 隨著圍繞身份驗證的標準程序進入核心，最後的障礙將清楚地用於廣泛使用 WP REST API。

WP REST API 示例應用程序

WP REST API 如此強大的原因在於它是一致的，因此我們可以期望任何運行 WordPress 4.7 或更高版本的站點都能獲得相同的基本結果。 但是，WordPress 是一種分佈式 API，這意味著不僅可以從一個地方獲取所有數據。

每個運行 WordPress 的網站都是一個獨特的應用程序，具有獨特的用戶和身份驗證。 雖然通過 REST API 編輯內容可能需要不同的授權技術，但我們實際上可以很容易地訪問大多數 WordPress 運行的博客的帖子。

為了演示，我們將製作一個快速的 codepen 演示，加載一些流行的 WordPress 相關博客的最新帖子的摘錄，當然，這些博客都在 WordPress 上運行。 在此過程中，我們將包含一個搜索表單，因此我們實際上可以一次搜索所有這些站點，並從每個站點中提取相關文章。

最後，我們一定會在原始網站上包含閱讀全文的鏈接。

階段 1：獲取最近的帖子

我們將首先設置一個快速的 Vue 實例並將其安裝到一個元素上。 我們還將包括 Bootstrap，以便我們可以在稍後添加的表單元素上設置網格和基本樣式。

當我們定義數據時，我們需要一個地方來存儲站點的名稱（默認響應中不包含）、URL 和我們得到的帖子。 這是一個例子：

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

您會注意到，我們還將第一個參數包含在 URL 的末尾per_page中。 通常，WP REST API 將按照與對普通 WP_Query 循環進行分頁相同的規則對結果進行分頁。 我們將把查詢限制在前三個帖子中。

接下來，我們將定義方法loadPosts() ，它將遍歷我們的源列表，使用 vue-resource 獲取結果，並使用結果填充每個源的空posts數組。

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

當我們的 Vue 實例成功掛載時，我們還將包含對loadPosts()的初始調用。

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

將來我們開始對 API 進行多次調用時，將loadPosts()保留為單獨的方法將派上用場。 在我們的 HTML 中，我們將使用 Vue 的簡單列表渲染指令和模板語法來輸出我們所有的帖子。

有關工作演示，請參閱嵌入式 Pen：

請參閱 CodePen 上 Brian Coords (@bacoords) 的 Pen WP REST API 搜索示例（第一階段）。

第 2 階段：過濾結果

讓我們添加一個側邊欄，並創建一些過濾器來顯示/隱藏各種來源。 為此，我們向sources對象添加一個新屬性，一個我們將命名為的布爾值。

當我們添加過濾器時，讓我們生成一個 Vue 過濾器來幫助我們正確顯示日期。 WordPress 將帖子的日期和時間存儲為 Unix 時間戳。

我們將使用第三方庫 Moment.js 將日期轉換為更易讀的格式。

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

有關工作演示，請參閱嵌入式筆：

請參閱 CodePen 上 Brian Coords (@bacoords) 的 Pen WP REST API 搜索示例（第一階段）。

最後階段：搜索查詢

在這裡，我們將向我們的 API 請求添加一個新參數。 我們已經添加了per_page=3參數來限制我們從每個站點獲得的結果數量。 如果搜索欄中有任何內容，我們會將其作為附加參數添加。

這將允許我們使用每個站點的內置搜索功能，就像我們查詢該網站上的搜索欄一樣。

我們將添加一個搜索欄，並使用 Vue 的v-model指令將其綁定到一個變量。

當用戶開始輸入時，我們將添加一個按鈕並將一個事件綁定到表單提交，而不是立即調用所有 API。 然後我們將向我們的 Vue 實例添加一個方法，該方法將搜索參數（當然是 URL 編碼）添加到 URL。

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

有關工作演示，請參閱嵌入式筆：

請參閱 CodePen 上 Brian Coords (@bacoords) 的 Pen WP REST API 搜索示例（第一階段）。

雖然這是 WP REST API 的一個簡單示例，但我們可以想像在 WordPress 本身中有一個類似這樣的潛在應用程序。 例如，已經有“WordPress 新聞”元框。

我們可以輕鬆地將這個演示轉換為 WordPress 插件，將其顯示在 WordPress 儀表板上。 現在，我們已經集成了直接從我們自己的網站從一些頂級 WordPress 和網頁設計教程網站搜索幫助的功能。

REST API 的未來潛力

儘管上面的示例僅觸及了 WP REST API 功能的表面，但它應該傳達了當您開始使用數據時開始出現的一些可能性。 無論是用於增強網站本身的用戶體驗，還是從外部來源收集和操作數據，它都是一個強大的工具。

儘管一些行業專家對將您的內容“抓取”並顯示在其他地方的可能性表示擔憂，但重要的是要記住，此功能類似於 RSS 提要，並且對於網站維護者來說，清楚地控制數據是什麼和是什麼是至關重要的不公開。

隨著 WP REST API 在 WordPress 結構中變得更加根深蒂固，我們將開始看到它的效果，甚至可能沒有意識到。 示例範圍從簡單（Chris Coyier 的設計引述）到復雜的單頁應用程序（Guggenheim 網站）。

WP REST API 的另一個流行用例是移動應用程序開發。

由於內容可以通過 REST API 訪問，因此開發人員可以為 iOS 和 Android 創建本機應用程序，而不必創建重複的數據源。

當用戶與這些移動應用程序交互時，他們將能夠檢索並直接轉換原始網站的數據，而無需開發人員創建任何復雜的基礎設施來支持這一點。

然而，這些面向訪問者的 REST API 應用程序只是一個開始，因為真正的影響要深得多。 核心開發團隊的目標之一是開始在整個 wp-admin 界面中使用它。

隨著未來的 WordPress 更新，我們將開始看到 admin-ajax 被 API 取代，有望提高基本功能的速度，例如編輯菜單或發布帖子。

這可能與 WordPress 越來越關注定制器和編輯器作為 WordPress 新手的用戶友好起點密切相關。

雖然 WP REST API 非常有用，但還有更多工作要做。 API 不完整。 還有更多功能和端點要添加。

最終，您甚至無需訪問即可與您的 WordPress 網站進行交互。 雖然現在許多服務使用自定義 API 與 WordPress 交互，但轉向一個標準的 WordPress REST API 意味著更多的站點和服務可以互連，使用相同的語言。

WordPress 最初是作為博客平台開始的，它是博主聯繫並分享他們的想法和想法的一種方式。 隨著 WordPress REST API 的開發，我們將開始在幕後看到新的連接和共享水平。 這將允許用戶以以前從未考慮過的方式建立他們的想法和想法，將 WordPress 及其用戶帶到全新的領域。