這堂課我們將學習 RESTful API,一個在現代網頁開發中非常重要的技術。它能讓你的網站變得更動態、更強大,同時也能提升你的網站搜尋引擎最佳化 (SEO) 效果。想像一下,一個沒有使用 API 的 WordPress 網站,要即時顯示最新的文章,需要不斷刷新整個頁面,不僅使用者體驗不好,對伺服器也造成負擔。而 RESTful API 則能解決這個問題,讓我們可以只更新需要的部分內容,提供更流暢的使用體驗。
什麼是 RESTful API?
RESTful API,全名為 Representational State Transfer 應用程式介面,是一種軟體架構風格,它定義了一套規則,讓不同的軟體系統可以透過網路互相溝通和交換資料。簡單來說,它就像一個餐廳的菜單,你(客戶端)點餐(發送請求),餐廳(伺服器)根據你的點餐準備好你的餐點(回傳資料)。
RESTful API 的核心原則:
– 客戶端-伺服器:前端和後端是分開的,前端負責顯示資料,後端負責處理資料。這樣設計讓開發和維護更方便。
– 無狀態:每次請求都是獨立的,伺服器不需要記憶之前的請求。這使得系統更穩定、更易於擴展。
– 可快取:可以快取資料,減少伺服器負擔,提高網頁載入速度。
– 分層系統:允許中間層(例如代理伺服器)存在,提高安全性及效能。
– 統一介面:使用標準的 HTTP 方法(GET、POST、PUT、DELETE)來操作資料。GET 用來取得資料,POST 用來新增資料,PUT 用來更新資料,DELETE 用來刪除資料。例如,使用 GET 方法向 WordPress 請求文章列表 /wp-json/wp/v2/posts
。
– 簡單範例:想像你想要取得一篇特定的文章,你可以使用 GET 方法,並在網址後面加上文章 ID,例如:https://你的網站網址/wp-json/wp/v2/posts/123
,伺服器就會回傳這篇文章的資料。
JSON 與 RESTful API
JSON (JavaScript Object Notation) 是一種輕量級的資料交換格式,因為它易於閱讀和解析,所以被廣泛用於 RESTful API 中。一個 WordPress REST API 回應的 JSON 範例如下:
{ “id”: 1, “title”: { “rendered”: “台南旅遊指南” } }
這個 JSON 物件代表一篇文章,包含文章 ID (id) 和標題 (title)。
WordPress REST API 簡介
WordPress 內建了一個強大的 REST API,它的端點位於 /wp-json/
。透過這個 API,你可以輕鬆地取得 WordPress 的文章、頁面、類別、標籤,甚至用戶資訊。例如,你可以透過 https://seo.tainanoutlook.com/wp-json/wp/v2/posts
取得所有文章的資料。
實作 WordPress REST API 串接
接下來,我們學習如何串接 WordPress REST API:
– 使用瀏覽器或 Postman 測試 WordPress REST API 端點:直接在瀏覽器網址列輸入 /wp-json/wp/v2/posts
或使用 Postman 這個工具來測試,你就能看到 WordPress 回傳的 JSON 資料。
– 在 WordPress 主題中嵌入 JavaScript:使用 fetch API,從 /wp-json/wp/v2/posts
獲取文章資料,並將資料顯示在你的 WordPress 網站上。
– 將 API 回應的資料轉為 Schema.org JSON-LD:將取得的文章資料轉換成 Schema.org 的結構化資料 (例如 Article Schema),讓搜尋引擎更容易理解你的網站內容,提升 SEO 排名。
– 使用 WordPress 外掛:一些外掛,例如 WP REST API Controller,可以協助你自訂 API 端點或增強功能。
驗證與除錯
使用 Postman, JSONLint (驗證 JSON 格式是否正確), Google Rich Results Test (驗證結構化資料是否有效) 等工具來檢查 API 回應和 JSON-LD 的有效性。常見錯誤例如 401 未授權 (通常是因為 API 金鑰設定錯誤),或 JSON 語法錯誤。
課堂練習
請嘗試使用 WordPress REST API 獲取最新的五篇文章的 JSON 資料,解析其結構 (找出 id 和 title),然後將資料轉為 Article Schema 的 JSON-LD,嵌入 WordPress 頁面,最後使用 Google Rich Results Test 驗證你的結構化資料。
結語
學習 RESTful API 和 JSON 是現代網頁開發的必備技能,它能讓你的網站更加強大且具有動態性。 希望透過今天的學習,你對 RESTful API 有了初步的認識,並能應用在你的 WordPress 網站中。接下來,你可以嘗試學習使用 Python 等程式語言串接 API,或是開發你自己的 WordPress 自訂 API 端點,進一步提升你的網頁開發能力。