標籤: JSON

這堂課我們將學習 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 端點，進一步提升你的網頁開發能力。