欣迪Avatar

自從 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,下一篇文章我會再做簡單的說明。

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *