如何使用諸如Cursor的AI工具開發WordPress外掛

鑑於人工智慧在當今世界如此重要，我們認為探索開發者如何使用這些工具來建立或改進 WordPress 外掛將會非常有趣。本文還將逐步指導您使用熱門的人工智慧程式設計助手 Cursor 構建 WordPress 外掛。

雖然人工智慧可以成為可靠的助手，但它並不能完全取代人類的專業知識。熟練的開發者仍然需要審查輸出、捕獲錯誤、最佳化效能，並確保程式碼的安全性和可擴充套件性。

話雖如此，我們顯然正處於自然語言程式設計時代。您可能無法僅憑一個命令就能啟動整個 CMS，也不要指望獲得功能齊全的頁面構建器，但人工智慧可以幫助加快流程的許多部分。即使是低程式碼愛好者也可以從中受益，而高階開發者正在尋找更智慧、更快捷的構建方法。

AI程式設計工具概覽

無論使用線上還是桌面工具，大多數 AI 程式碼生成器都具有以下共同點：

• 它們採集了海量資料，並在程式碼庫中接受過訓練。
• 它們提供自動補全和智慧程式碼建議，從而節省時間。
• 它們精通多種程式語言。
• 它們具有上下文感知能力，這意味著它們能夠理解程式碼庫的結構。
• 它們能夠解讀自然語言提示，即使是細微的拼寫錯誤也能理解。
• 有些工具支援在不同的大型語言模型 (LLM) 之間切換。
• 大多數工具都支援外掛系統或擴充套件。
• 許多工具都包含除錯和重構工具。

那麼，當今 AI 程式設計領域的關鍵參與者是誰？

1. ChatGPT：目前 AI 領域最知名的名字。ChatGPT 無需任何設定，可以生成程式碼、解釋其功能並回答後續問題——所有這些都在一個地方完成。
2. GitHub Copilot：由 GitHub 和 OpenAI 共同開發，Copilot 可直接整合到您常用的 IDE 中，並在您輸入程式碼時即時提供程式碼建議。這就像與 AI 開發者結對程式設計一樣。
3. Grok：與 ChatGPT 和 Claude 類似，Grok 是 xAI 為 X 使用者提供的工具，以其嚴謹的態度而聞名。
4. Gemini：這是 Google 的全能 AI 工具系列，與 ChatGPT 類似。
5. Windsurf：這是一款專注於預測開發者需求的 IDE。
6. Cursor：當下非常火熱的 AI 程式設計工具，我們後面會重點介紹這一個。

關於使用 Cursor AI 的幾點說明

為了構建我們的外掛，我們選擇使用 Cursor AI，它越來越受到開發者的青睞。Cursor AI 是 VSCode IDE 的一個分支，因此它的外觀和使用體驗都很熟悉。Cursor AI 非常靈活，您可以將 VSCode 的設定和偏好設定匯入到 Cursor AI。

作為一款功能齊全的開源 IDE，它提供許多擴充套件程式，並且有多種訪問程式碼文件的方式。

注：免費版本對於輕度開發者足夠用。但如果用它來開發專案，根據實際情況，建議升級為付費套餐。

Cursor 的聊天功能有多種模式，每種模式都針對不同型別的任務進行了最佳化。

Cursor 聊天模式

您可以使用模式選擇器 ( Cmd+. ) 或鍵盤快捷鍵在它們之間切換：

• 提問模式：最適合快速提問、解釋或規劃功能。例如，您可以輸入“此程式碼庫使用什麼程式語言？”，並根據您開啟的檔案獲取上下文答案。使用 Cmd+L (Mac) 或 Ctrl+L (Windows/Linux) 訪問。
• 代理模式：當您希望 Cursor 推理整個程式碼庫並進行更廣泛的更改（例如生成檔案、實現新功能或重構）時，這是理想之選。您可以輸入類似“Create a documentation file based on what’s in  /plugins/contentwriter”的內容。使用 Cmd+I 或 Ctrl+I 觸發此模式。
• 手動模式：當您想要更多控制並且只需要 AI 在特定檔案或程式碼片段中工作時使用此模式。例如，您可以要求它“Refactor theme.json using components found in ../docs.”。當您直接開始編輯或透過命令面板進行編輯時，此模式會自動啟用。

外掛啟動工作流程

如果您只使用 ChatGPT 編寫程式碼，那麼您可能錯過了 AI 程式碼助手的強大功能。誠然，通用的 AI 工具可以啟動有效的 WordPress 外掛，但這肯定不是測試或除錯程式碼的最有效方法。

Cursor AI 等工具正是為此而生——它們將 AI 與功能齊全的 IDE 相結合，引導您完成更結構化、以開發者為中心的工作流程。

開始使用 AI 編碼助手的一個好方法是使用您熟悉的內容來提示它們。選擇一個規模較小、範圍明確的專案。不要立即著手開發複雜的功能或大規模的外掛。也絕對不要指望 AI 能根據一個模糊的提示構建出您的整個外掛。就像處理任何開發任務一樣，首先用通俗易懂的語言寫下您的目標。

在本演示中，我們將建立一個名為 Custom Writer 的外掛，用於在 WordPress 中註冊一個新的使用者角色。該角色可以建立和編輯文章，但不能刪除任何內容或訪問其他文章型別。

步驟 1：開啟外掛目錄

啟動 Cursor，然後透過 File > Open Folder 導航到您的 /wp-content/plugins 目錄。這將為您的外掛構建做好準備。

步驟 2：開始新的聊天會話

按 Cmd + Shift + L （Windows 系統上按 Ctrl + Shift + L ）開始新的聊天。

按 Cmd + L / Ctrl + L 切換到“提問模式”，這樣我們就可以從一個計劃提示開始。在此模式下，Cursor 會幫助您推理您的想法，而無需直接跳到程式碼。

在主提示輸入上方，您會看到一個標有“Add Context”的欄位。您可以在此處完整描述您的目標。即使您的拼寫不完美，也要具體說明——Cursor 不會容忍拼寫錯誤。

我們輸入的內容如下：

我正在構建一個 WordPress 外掛，用於新增一個名為“Custom Writer”的新使用者角色。請僅授予此角色建立新帖子和編輯帖子的許可權，但不能刪除任何帖子。此使用者不具備編輯其他帖子型別的其他許可權。

請用 Markdown 編寫一套詳細的說明，供 AI 代理在構建外掛時使用。

請勿包含任何依賴項。將所有程式碼儲存在一個 php 檔案中，該檔案將位於唯一命名的外掛資料夾 /plugins 中。

使用 @WordPress 開發文件來幫助您構建符合 WordPress 標準的外掛。

現在無需編寫任何程式碼。只需建立一個包含構建說明的 Markdown 檔案即可。

請記下 @WordPress 關鍵字 – 它會告訴 Cursor 參考 WordPress 官方文件。這是確保您的外掛遵循最佳實踐的最簡單方法之一。

使用 Cursor 提問模式。

步驟 3：檢視Markdown說明

按下“Send”後，Cursor 會回覆一份詳細的 Markdown 文件。文件概述了外掛應執行的所有操作——從設定鉤子到解除安裝時的清理。

以下是 Cursor 包含的內容：

• 外掛標頭詳細資訊（名稱、版本、許可證）
• 程式碼結構（自定義外掛資料夾中的單個 .php 檔案）
• 使用 add_role() 建立角色
• 特定功能（edit_posts、publish_posts 等）
  用於啟用、停用和解除安裝的鉤子
  安全、效能和測試建議

您可以在繼續操作之前調整說明，但我們對目前的版本感到滿意。

步驟 4：切換到代理模式並構建外掛

現在是時候實際生成程式碼了。

按 Cmd + Shift + I （或 Ctrl + Shift + I）切換到代理模式。這將授予 Cursor 許可權，使其能夠跨程式碼庫工作並執行多步驟任務。

按 Enter 鍵，您會看到“Run Command”按鈕出現。

Cursor 執行命令。

點選“Run Command”，Cursor 就會建立你的外掛。你應該會看到一個新資料夾（例如， custom-writer-role），裡面有一個 .php 檔案。

Cursor 生成的資料夾和程式碼檔案。

步驟 5：稽覈並接受檔案

開啟 Cursor 生成的檔案。您可以在此處進行編輯，例如更新外掛作者或最佳化內聯註釋。

滿意後，點選“Accept File”。不用擔心，您可以隨時進行編輯。這只是確認該檔案應該成為您程式碼庫的一部分。

步驟 6：在WordPress中啟用外掛

前往您的 WordPress 管理後臺。在“外掛”下，找到您的新外掛並啟用它。

啟用由 Cursor 建立的 WordPress 外掛。

如果一切生成正確，您將看到一條成功訊息，外掛將正式上線。

步驟 7：測試新角色

建立新使用者併為其分配“Custom Writer”角色。測試結果應顯示：

• 新使用者角色已成功建立
• 僅可建立文章。
• 文章可編輯和檢視，但不可刪除。

步驟 8：發現並修復UI問題

您會注意到，“Quick Edit”連結仍然在文章列表中。雖然它不允許刪除，但我們並未要求刪除，這可能會讓使用者感到困惑。

外掛除錯。

返回 Cursor，並啟動新的提示，請求幫助移除“Quick Edit”。

在建立本指南的演示時，我們發出了一系列提示，要求 Cursor 採用不同的方法來移除“Quick Edit”。有一次，我們看到了對“user_switch”的引用，這讓我們懷疑它是否與“Switch User Role”外掛存在衝突。（除了我們的外掛之外，這是我們唯一執行的外掛。）

在我們提醒 Cursor 這個潛在問題後，它提示會發生衝突。隨後又發出了一輪提示。在此期間，我們發現新使用者無法登入，因為需要更高的許可權級別。

又一輪提示開始，但沒有任何效果。每隔一段時間，Cursor 就會移除“Quick Edit”，但編輯功能也會被移除。我們感到很困惑，於是要求 Cursor 總結一下我們目前的情況，以確保我們理解它所理解的內容。有一次，我們不禁自問：“您到底在想什麼？”

最終，Cursor 找到了解決所有問題的方法，並向我們提供了所做更改的摘要。

我已將方法更改為：

1. 移除基於功能的方法，改用 WordPress 的 post_row_actions 和 page_row_actions 過濾器。
2. 新增一個新方法 remove_quick_edit_link，透過取消設定內聯 hide-if-no-js 操作來專門移除“快速編輯”連結。
3. 保留編輯文章所需的所有功能。

此方法應：

• – 保持“編輯”連結可見
• – 僅移除“快速編輯”連結
• – 適用於文章和頁面 – 不影響任何其他功能。

您需要：

• – 停用外掛
• – 重新啟用外掛以應用這些更改。

如果此方法成功移除“快速編輯”連結，同時保持“編輯”連結可見，請告知我。

步驟 9：觀察其他行為

測試過程中，我們還注意到：

• 媒體庫無法訪問，儘管我們並未提及。提醒一下：如果您沒有明確請求某項功能，AI 可能不會啟用。
• Cursor 的摘要中提到該功能“適用於文章和頁面”，但該外掛正確地阻止了對頁面的訪問。因此，AI 的解釋略顯過度，但行為是正確的。

步驟 10：持續測試和迭代

從這裡開始，您可以安裝其他外掛，測試相容性，並根據需要最佳化您的角色。當出現問題或行為不符合預期時，請返回 Cursor 並進行後續提示。

您會發現自己經常這樣做——提出後續問題、重新表述說明，甚至只是問“您覺得怎麼樣？”來了解 Cursor 的觀點。

這就是 Cursor 真正出彩的地方：迴圈反饋快速，並且助手在每次迭代中都在不斷改進。

不要像盲頭烏蠅

你可以讓人工智慧生成外掛，但這並不意味著你應該這麼做——至少，在沒有仔細考慮的情況下不應該這麼做。

在提出建議之前，請花點時間定義你的外掛應該做什麼。考慮它的用途、所需的功能以及任何潛在的依賴關係。問問自己：這個外掛會與 WooCommerce 等主流擴充套件程式衝突嗎？如果答案是“可能”，請在你的建議中包含這一點。

你給人工智慧提供的背景資訊越多，你的結果就越好。要具體。清晰地描述你的目標。不要猶豫。

人工智慧可能感覺很神奇，但負責任地構建仍然很重要。請記住手工編碼時需要考慮的相同要點：

• 安全性—— 淨化輸入、檢查功能、遵循最佳實踐
• 效能—— 避免冗餘查詢、保持邏輯嚴密
• 可訪問性—— 考慮使用者角色、UI 元素和包容性互動
• 測試—— 嘗試極端情況、混合使用外掛並驗證功能
• 部署—— 為版本控制、回滾和可擴充套件性做好準備
• 重構—— 定期重新審視您的程式碼，不僅要一次，還要定期

小結

輔助生成程式碼的格局每分鐘都在變化。這讓人想起搜尋的早期，當時有大量的條目。最終，只有少數條目倖存下來。這最終也可能會發生，儘管開源可能會將我們引向不同的方向。

我們建議您使用相同的初始提示探索多種 AI 工具，然後比較編碼過程和結果。隨著格局的不斷發展，您可能需要更改首選應用程式，對此持開放態度。

隨著人工智慧工具的發展，您的工作流程也應該隨之發展——而這始於正確的環境。