自從 MVC 架構成為現代網站開發的主流後( 想了解 MVC 可閱讀 Kuro’s Blog 的 談談前端框架 )，前後端徹底分離成為不可擋的趨勢。
然而 WordPress 的傳統佈景開發，漸漸不符合專職前端開發的的期待。而且要熟練 WP 佈景開發的 Hook 和常用的內建 Function 就需要好長一段時間。好在 WP 在 4.x 版之後就內建了 Rest Api ! 這簡直是網站接案人員的超級武器，只要幾分鐘安裝好 WordPress ，就有一個快速的後台可以使用! 這邊就簡單說明如何快速實作。
安裝完 WP 後，API 的接口會是 example.com/wp-json/wp/v2/ 開頭 (把 example.com 改成你的 WP 網址 )，一開始就內建了基本功能。為了能夠快速的瀏覽 API 接口，這邊推薦一個外掛 WP API SwaggerUI ，它可以把你的 API 條列出來。 (看到 Swag 就超興奮的我 😈 😈 😈 )
這時候只要點擊任何一個選項即可開始測試 API 的功能。注意! 除了 GET 方法以外，其他大部分 API 都需要登入權限，因此如果要使用 API 新增文章的話，前端需要做一個遠端登入的行為。要登入的功能，我們後面的篇幅再來討論。
在 SwagggerUI 點開 /wp/v2/posts/ ，它就會列出可預設的 API 變數。
點右上的 Try it out 按鈕，輸入變數就可以嘗試呼叫這個 API。非常方便。
我們這邊就用紐約時報的網站來做一個範例，它是一個很著名的 WordPress 網站。
網域 : https://www.nytco.com
API 端點: /wp-json/wp/v2/posts
所以取得它最新文章列表的完整位置是
https://www.nytco.com/wp-json/wp/v2/posts
接下來我們就可以利用這個 API 取得紐約時報的文章列表，進行新的應用或是前端的美化。
我們就用這個 API 完成紐約時報最新消息的簡單列表吧!
我把範例放在 Github :
https://github.com/it-monk-taiwan/nytco
使用 Axios 取得紐約時報資料。
let url = "https://www.angrybirds.com/wp-json/wp/v2/posts";
//url 可替換成 API 的位置
axios.get(url).then(function (response) {
console.log(response);
// 這邊做取得資料後的行為
})搭配 Bootstrap 完成下面的效果
有些行為是需要登入完成的 API，下一篇文章我會再做簡單的說明。
