
先前在原型駭客的網站中,看到一篇相當有意思的文章,那就是WordPress Rest API,相信許多朋友對它應該相當的陌生,就連梅干也不例外,直到那一天看到這篇文章後,才讓梅干知道,原來WordPress竟然內建也有這功能,有在設計WordPress的佈景朋友都知道,當今天設計好的佈景主題,除了要放在WordPress的佈景資料夾外,甚至佈景結構還得依照WordPress的才行,因此每當在設計時,佈景的資料結構總是一大包,甚至從原始碼中,也可知道這個平台是WordPress所架設的。
但今天透過WordPress Rest API後,就可以將WordPress的前後台給拆開來,同時可以完全不受限於WordPress的架構,可讓前端的畫面變得更靈活,甚至版面在切換時,也會更加的順暢,且WordPress所提供的API資料也相當的完整,甚至官方也有詳細的說明每個API頁面所提供的屬性,但目前網路上的資料並不多,因此梅干就將近日的學習心得作了總整理,但要開始解析網頁時,首先要先了解一下,WordPress的API所對應的頁面,以及所提供的屬性有那些吧!
WP REST API
Step1
當進到WordPressn官方的說明文件時,從左手邊中可看到,目前所提供的API有那些。

Step2
中間是提供的屬性有那些。

Step3
當要進入WordPress 的JSON畫面,需將WordPress升級至4.7版,接著 網址+/wp-json/wp/v2/+頁面,而當要進到文章頁面,就是「wp-json/wp/v2/posts」。

#範例網址:http://inplus.tw/wp-json/wp/v2/posts
Step4
要顯示單篇文章內容,就是「wp-json/wp/v2/posts/id」。

#範例網址:http://inplus.tw/wp-json/wp/v2/posts/9201
Step5
頁面則是「wp-json/wp/v2/pages」。

#範例網址:http://inplus.tw/wp-json/wp/v2/pages
Step6
顯示單一頁面內容,「wp-json/wp/v2/pages/id」。

#範例網址:http://inplus.tw/wp-json/wp/v2/pages/12230
Step7
顯示所有分類,「wp-json/wp/v2/categories」。

#範例網址:http://inplus.tw/wp-json/wp/v2/categories
Step8
顯示該分類下的所有文章,「wp-json/wp/v2/posts?categories=id。

#範例網址:http://inplus.tw/wp-json/wp/v2/posts?categories=1893
Step9
顯示所有的標籤,「wp-json/wp/v2/tags」

#範例網址:http://inplus.tw/wp-json/wp/v2/tags
Step10
顯示該標籤下的所有文章,「wp-json/wp/v2/posts?tags=id」。

#範例網址:http://inplus.tw/wp-json/wp/v2/posts?tags=1685
而這不也就是佈景中,最重要的四大頁面,分別為文章、頁面、分類、標籤,因此當有了這些API的結構後,之後再來分享,如何透過AJAX來解析jsond 內容吧!有興趣的朋友,也可以先了解一下,JSON的內容吧!
#教學影片