Node.js和WordPress:為自定義應用程式構建動態API

為自定義應用程式構建動態API

作為一名網路開發人員,您可能對 Node.js 和 WordPress 不陌生。Node.js 是在瀏覽器外執行 JavaScript 的強大執行時環境,而 WordPress 則是領先的內容管理系統(CMS)

這些平臺看似天壤之別 – Node.js 以 JavaScript 為骨幹,WordPress 則是以 PHP 為動力的內容管理系統。不過,得益於 WordPress REST API,它們可以協同工作。該 API 使 Node.js 應用程式能夠通過 HTTP 請求與 WordPress 互動。它提供了對各種資料的訪問,包括使用者、評論、頁面、文章和其他網站元素。

但是,將 Node.js 與 WordPress 結合起來有什麼好處呢?

想象一下,您有一個 WordPress 網站,並想建立一個自定義儀表板。這個儀表盤可以顯示網站的實時資料,如最近的文章、評論數和使用者活動。

這就是 Node.js 發揮關鍵作用的地方。本指南將指導您設定 Node.js 端點。這些端點利用 WordPress REST API 完成各種任務:更新文章、管理評論、網站定製和定製 WordPress 網站管理。

前提條件

要學習本指南,我們假定您已具備以下條件:

使用 Node.js 管理 WordPress 文章

在 WordPress 中,基本任務包括建立、更新和刪除文章。本節將介紹如何為這些操作建立特定端點,以及如何為每個操作向 /posts 端點發出請求。

在 WordPress 中建立新文章

要使用 REST API 在 WordPress 中建立新文章,請向 /posts 端點發出 POST 請求。在請求正文中,您需要提供 JSON 格式的 WordPress 文章內容。

首先,開啟 Node.js 伺服器檔案,檔名通常為 App.js。確保在伺服器檔案中正確設定了 Express。這通常是通過 const app = express() 這行來完成的,它會初始化 Express。

接下來,在伺服器檔案中實現一個路由,以新增新的文章。該路由的程式碼如下:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.post("/add-post", async (req, res) => {
try {
const postID = req.body.id
const resp = await axios.post(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`, req.body)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {
console.log(err)
}
})
app.post("/add-post", async (req, res) => { try { const postID = req.body.id const resp = await axios.post(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`, req.body) if(resp.status !== 200) throw "Something went wrong" } catch (err) { console.log(err) } })
app.post("/add-post", async (req, res) => {
try {
const postID = req.body.id
const resp = await axios.post(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`, req.body)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {        
console.log(err)        
}
})

這段程式碼會在應用程式中建立一個 /add-post 端點。當向該端點傳送請求時,它會從請求正文中提取文章 ID,然後向 WordPress 網站傳送 POST 請求。請記得將 https://yourdomain.com 替換為您的 WordPress 域名。

您可以使用 Visual Studio Code 中的 Thunder Client 等工具進行測試。確保請求的 JSON 主體有效,以免出錯。

add-post

向 /add-post 端點發出的 POST 請求的 JSON 正文

通過這種方法,可以從您的應用程式高效、自動地向 WordPress 網站釋出文章。

更新 WordPress 中的現有文章

要使用 WordPress API 更新文章,請向 WordPress API 中的 /posts 端點發出 PUT 請求。您還需要以 JSON 格式提供 WordPress 文章的更新內容。

更新 WordPress 中現有文章的路徑如下:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.put("/update-post", async (req, res) => {
try {
const postID = req.body.id
const resp = await axios.put(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`, req.body)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {
console.log(err)
}
})
app.put("/update-post", async (req, res) => { try { const postID = req.body.id const resp = await axios.put(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`, req.body) if(resp.status !== 200) throw "Something went wrong" } catch (err) { console.log(err) } })
app.put("/update-post", async (req, res) => {
try {
const postID = req.body.id                    
const resp = await axios.put(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`, req.body)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {        
console.log(err)        
}
})

例如,您可以在 Thunder Client 中通過以下請求更新 WordPress 中 ID 為 3 的文章:

向 /update-post 端點發出的 PUT 請求的 JSON 正文

向 /update-post 端點發出的 PUT 請求的 JSON 正文

在 WordPress 中刪除文章

要刪除 WordPress 中的文章,請使用要刪除文章的唯一 ID 向 /posts 端點發出 DELETE 請求。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.delete("/delete-post", async (req, res) => {
try {
const postID = req.body.id
const resp = await axios.delete(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {
console.log(err)
}
})
app.delete("/delete-post", async (req, res) => { try { const postID = req.body.id const resp = await axios.delete(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`) if(resp.status !== 200) throw "Something went wrong" } catch (err) { console.log(err) } })
app.delete("/delete-post", async (req, res) => {
try {
const postID = req.body.id                
const resp = await axios.delete(`https://yourdomain.com/wp-json/wp/v2/posts/${postID}`)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {        
console.log(err)        
}
})

結果應該是這樣的

向 /delete-post 端點發出的 DELETE 請求的 JSON 正文

向 /delete-post 端點發出的 DELETE 請求的 JSON 正文

使用 Node.js 管理 WordPress 評論

通過 Comments API,您可以從應用程式中訪問和操作 WordPress 網站上的評論。在該 API 中有一個端點,用於建立、列出、閱讀、更新和刪除 WordPress 網站上的評論。

假設您不希望 WordPress 網站釋出包含 “Follow me” 短語的評論。在本例中,您可以使用一個 regex 表示式,在釋出評論之前檢查每條評論中是否包含該短語。

為此,請使用以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.post("/add-comment", async (req, res) => {
try {
let regex = /follow me/i;
let comment = req.body.comment
if(regex.test(comment)) throw "Oops! Contains the forbidden word"
const resp = await axios.post(`https://yourdomain/wp-json/wp/v2/comments`, req.body)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {
console.log(err)
}
})
app.post("/add-comment", async (req, res) => { try { let regex = /follow me/i; let comment = req.body.comment if(regex.test(comment)) throw "Oops! Contains the forbidden word" const resp = await axios.post(`https://yourdomain/wp-json/wp/v2/comments`, req.body) if(resp.status !== 200) throw "Something went wrong" } catch (err) { console.log(err) } })
app.post("/add-comment", async (req, res) => {
try {
let regex = /follow me/i;    
let comment = req.body.comment                
if(regex.test(comment)) throw "Oops! Contains the forbidden word"  		
const resp = await axios.post(`https://yourdomain/wp-json/wp/v2/comments`, req.body)
if(resp.status !== 200) throw "Something went wrong"  		
} catch (err) {      
console.log(err)
}
})

通過這種方式,只有不包含 “Follow me” 短語的評論才會被髮布到網站上,而像下面這樣的評論則不會被髮布:

向 /add-comment 端點發出的 POST 請求的 JSON 正文

向 /add-comment 端點發出的 POST 請求的 JSON 正文,不包括包含 “Follow me” 的評論。

為使用者定製網站

通過儲存使用者偏好並確定其國家/地區,您可以為每個使用者定製 WordPress 頁面。

在 Node.js 中,您可以在後臺應用程式的登入或註冊路徑中將使用者資料儲存在 Cookie 中,並將 Cookie 放在使用者的網路瀏覽器中,如圖所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.post("/sign-up", async (req, res) => {
// Sign up user
res.cookie("cookie_id", 123456)
res.cookie("lang", req.body.language)
res.status(200).json("Logged in.")
})
app.post("/sign-up", async (req, res) => { // Sign up user res.cookie("cookie_id", 123456) res.cookie("lang", req.body.language) res.status(200).json("Logged in.") })
app.post("/sign-up", async (req, res) => {
// Sign up user
res.cookie("cookie_id", 123456)
res.cookie("lang", req.body.language)
res.status(200).json("Logged in.")
})

註冊時,您會獲取使用者的首選語言,並將其連同 cookie_id 作為 cookie 傳送到瀏覽器。

現在,有了瀏覽器中儲存的語言,您就可以用它來獲取使用者語言的 WordPress 文章。這需要您先翻譯 WordPress 中的文章。一個簡單的方法是在 WordPress 網站中整合 WPML 和 Yoast SEO

整合後,將為其他語言建立不同的子資料夾:

  • mydomain.com/en/
  • mydomain.com/es/
  • mydomain.com/fr/

在獲取 WordPress 文章時,您可以獲取使用者首選語言的文章列表,因為該語言已儲存在 cookie 中。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.get("/get-posts", async (req, res) => {
try {
const lang = req.cookies.lang
const resp = await axios.get(`https://mydomain.com/${lang}/wp-json/wp/v1/posts`)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {
console.log(err)
}
})
app.get("/get-posts", async (req, res) => { try { const lang = req.cookies.lang const resp = await axios.get(`https://mydomain.com/${lang}/wp-json/wp/v1/posts`) if(resp.status !== 200) throw "Something went wrong" } catch (err) { console.log(err) } })
app.get("/get-posts", async (req, res) => {
try { 
const lang = req.cookies.lang
const resp = await axios.get(`https://mydomain.com/${lang}/wp-json/wp/v1/posts`)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {        
console.log(err)        
}
})

這樣,您就能根據使用者註冊時指定的語言獲得文章列表。

使用自定義管理

通過擴充套件使用者端點,您可以建立一個自定義管理面板來控制 WordPress 使用者、角色和許可權。通過 Users API,您可以從功能類似於評論 API 的應用程式中訪問和操作 WordPress 網站上的使用者資訊。

例如,如果您想將某個使用者的角色更新為 “Administrator”,可以使用以下路徑:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.put("/update-user", async (req, res) => {
try {
const userID = req.body.id
const resp = await axios.put(`https://yourdomain/wp-json/wp/v2/users/${userID}`, req.body)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {
console.log(err)
}
})
app.put("/update-user", async (req, res) => { try { const userID = req.body.id const resp = await axios.put(`https://yourdomain/wp-json/wp/v2/users/${userID}`, req.body) if(resp.status !== 200) throw "Something went wrong" } catch (err) { console.log(err) } })
app.put("/update-user", async (req, res) => {
try {
const userID = req.body.id                
const resp = await axios.put(`https://yourdomain/wp-json/wp/v2/users/${userID}`, req.body)
if(resp.status !== 200) throw "Something went wrong"
} catch (err) {        
console.log(err)        
}
})

在請求中,傳遞一個包含要更新記錄的使用者 ID 和新詳細資訊的物件。

向 /update-user 端點發出的 PUT 請求的 JSON 正文

向 /update-user 端點發出的 PUT 請求的 JSON 正文

當您完成 Node.js 伺服器的開發後。您可以將其輕鬆託管到應用程式託管伺服器上。

小結

將 Node.js 與您的 WordPress 網站整合,可以實現更多功能。您可以更新文章、管理評論、設定使用者角色,並根據使用者所在國家新增自定義功能。

除了我們已經介紹過的功能外,您還可以新增高階搜尋、主題操作和文章修訂功能。請立即檢視 REST API 手冊並開始探索。

評論留言