ChatGPT、Claude 和 Cursor等人工智慧 (AI) 工具正悄然成為 WordPress 開發者日常工具包的一部分。無論您是構建自定義外掛、使用 Gutenberg 區塊，還是使用 WP-CLI 自動執行任務，AI 都能幫助您更快地編寫、除錯和重構程式碼，且不會犧牲質量。
本教學指南將向您介紹開發人員使用 AI 簡化實際 WordPress 工作流程的七種實用方法。
1. 編寫和除錯自定義外掛程式碼
作為 WordPress 開發人員，使用 AI 最明顯（也是最強大）的方法之一是編寫自定義外掛程式碼並進行故障排除。
無論您是從頭開始構建某些內容，還是處理引發致命錯誤的客戶遺留外掛，ChatGPT 和 Claude 等工具 都可以大大加快您的工作流程。
從頭開始構建外掛樣板
您可以使用 AI 構建外掛的整個結構，包括標題、鉤子和檔案組織。無需使用您總是複製貼上的舊外掛，只需描述您想要的內容即可。
以下是一個示例提示：
Create a WordPress plugin that registers a custom post type called "Event. "It should support title, editor, and thumbnail and have custom meta fields for date and location. Include code to register these meta fields using the REST API.
Claude 不僅僅轉儲原始程式碼。它還提供了：
- 完整的外掛支架，物件導向且結構良好。
- 在整個程式碼中使用內聯註釋來解釋每個部分。
- 適當的縮排和間距（您可能認為這是理所當然的，但並非所有工具都是如此）。
- 透過註冊的 REST 就緒元欄位
register_post_meta()。 - 帶有元框的管理 UI 可以捕獲事件日期和地點。
- 還有更多。
輸出由 Claude 生成。
除錯外掛錯誤
如果您正盯著白屏或其他人外掛的致命錯誤，AI 可以幫助您快速識別問題。ChatGPT（尤其是 GPT-4）擅長解釋堆疊跟蹤，並發現缺失的函式呼叫、拼寫錯誤或已棄用的函式。
以下是向 ChatGPT 提供的示例提示：
Here's an error I'm getting in a custom plugin: "Uncaught Error: Call to undefined function get_field() in /wp-content/plugins/my-plugin/plugin.php on line 42" What's wrong and how can I fix it?
ChatGPT 成功了：
- 它正確識別出這
get_field()是一個高階自定義欄位 (ACF) 功能。 - 它列出了導致此錯誤的所有常見原因。
- 它甚至建議了最佳實踐，例如將函式包裝在鉤子中（如
init或wp），並function_exists()在呼叫之前進行檢查。
ChatGPT 在對話介面中生成的示例輸出。
您甚至可以將整個外掛檔案貼上到 Cursor 等工具中 ，並要求它“稽覈 WordPress 最佳實踐的程式碼”，或“重寫它以遵循現代 PHP 和 WP 編碼標準”。
修改現有外掛功能
假設你拿到一個外掛，它能滿足你 80% 的需求，但剩下的 20% 很重要。你可能需要調整一些輸出，比如繫結表單提交，或者讓它相容多站點。
您無需手動挖掘程式碼庫，只需在編輯器中使用 Cursor 或 GitHub Copilot 等 AI 工具 ，即可更快、更安全地進行更改。例如，以下提示可能會有所幫助：
This plugin creates a custom post type for “Testimonials” and displays them using a shortcode. Modify it to also output the testimonial author’s name in bold below the content. Here’s the shortcode output function: [...paste function...]
或者類似這樣：
Update this plugin so that it doesn’t run on multisite installations. If it is a multisite, show an admin notice and deactivate the plugin.
人工智慧將：
- 在檔案中找到確切的函式或鉤子（即使您不確定）。
- 建議進行所需的最小更改，而不是重寫整個內容。
- 將邏輯範圍保持在外掛的結構內（特別是當您使用 Cursor 並且它正在讀取整個程式碼庫時）。
- 如果需要，它會新增安全檢查，如
is_multisite()或function_exists()。
它甚至可能會問：“你想讓作者姓名可選嗎？它應該來自文章後設資料還是短程式碼屬性？”——這很好地表明它正在從開發者的角度進行“思考”。
2. 建立自定義Gutenberg區塊
Gutenberg 區塊開發可能會很麻煩，尤其是在你對 React 瞭解不深的情況下。很容易陷入 Webpack 設定、區塊註冊和渲染邏輯的泥潭。這時，AI 工具就能幫你減少開發過程中的阻力。
從頭開始生成自定義區塊
我要求 Claude 建立一個名為 Testimonial Block 的自定義 Gutenberg 區塊，支援引用、作者姓名和作者影像：
Create a Gutenberg block called "Testimonial Block". It should have fields for a quote, author name, and author image. Show a preview in the editor and render it on the frontend using PHP. Output the block with basic markup and class names so I can style it later.
Claude 的結構設計得非常完美。它沒有把所有東西都堆砌成一個整體，而是把外掛拆分成了幾個清晰的部分：
- PHP 外掛檔案 （
testimonial-block.php）——使用註冊區塊register_block_type()。 - JS 檔案 （
block.js）——使用TextControl,MediaUpload,useBlockProps等設定區塊 UI。 - CSS 檔案 （
editor.css和style.css）——適用於編輯器和前端的樣式
它還介紹了每個檔案的儲存位置以及如何構造內部資料夾/wp-content/plugins/，以便於立即進行測試。
Claude 介面顯示程式碼和檔案部分。
如果您正在使用原生區塊，並且不想 @wordpress/scripts 每次都從頭開始設定，這種 AI 輔助功能可以幫您完成 80% 的操作。您以後可以隨時自定義標記或欄位結構。
如果您想更改佈局，您可以告訴 Claude：“讓作者影像出現在引文上方而不是旁邊”，或者“用外部影像 URL 輸入替換 MediaUpload”。
修改現有區塊
就像從頭開始生成區塊一樣，您也可以使用 Claude 或 ChatGPT 來調整現有的 Gutenberg 區塊，這在您處理其他人開始的專案或重新訪問幾個月前編寫的區塊時特別有用。
例如，假設您有一個包含簡單文字輸入的區塊，並且想要新增一個開關來控制是否突出顯示輸出。您無需手動查詢 edit() 和 save() 或 PHP 檔案 render_callback，只需將區塊的相關部分提供給 AI 並詢問：
Here’s the edit() function for my Gutenberg block. Add a ToggleControl labeled "Highlight" that adds a CSS class "highlighted" to the block wrapper if it's turned on: [...paste function...]
它還足夠智慧，可以遵循您現有的程式碼風格。因此，如果您的區塊使用了 useBlockProps()，它會保留它；如果它渲染的是原始 div 標記，它會照做，而不是嘗試重寫您的佈局。
3. 建立WP-CLI命令實現自動化
對於 WordPress 開發者來說，WP-CLI 正是他們“升級”的工具之一。它讓你可以像編寫普通應用程式一樣編寫 WordPress 指令碼，而無需在管理面板上來回點選，也無需編寫臨時的管理頁面來執行批次操作。
AI 消除了所有開銷，因此您不再需要深入研究 WP-CLI 文件、猜測類格式、從另一個專案複製舊程式碼並花 30 分鐘進行調整。
假設您想批次釋出包含特定元鍵的所有文章。您可以使用以下提示：
Write a custom WP-CLI command called `publish_scheduled_events` that loops through all posts of type "event" where the custom meta key "event_date" is in the past and publishes them.
AI 將返回一個正確註冊了 WP_CLI::add_command() 的類，以及一個使用帶有 meta_query 過濾器的 WP_Query 的方法，以及更多其他功能。大多數情況下，程式碼已準備好投入生產，只是沒有實際的元鍵值比較調整，您可以在後續工作中提出要求。
您還可以要求 WP-CLI 命令來處理以下任務：
- 清除瞬變
- 重新儲存永久連結
- 重新生成影像尺寸
- 跨環境同步選項
- 按計劃執行自定義匯入作業
例如，看到下面的提示：
Write a WP-CLI command that deletes all expired transients in the wp_options table and logs how many were deleted.
此外，如果您已經編寫了 WP-CLI 命令，但出現問題（也許它無法識別引數或者您收到奇怪的輸出），只需貼上程式碼並詢問：
This WP-CLI command isn’t parsing the --user_id argument correctly. What’s wrong?
4. 最佳化WP查詢或自定義資料庫程式碼中的SQL查詢
WordPress 開發人員經常會遇到一些看似正常的查詢，但當它們在包含數千條文章和臃腫表格的真實網站上執行時，wp_postmeta 效能就會下降，情況很快就會變得糟糕。
好訊息是，ChatGPT、Claude 甚至 Cursor（在完整的程式碼庫中工作時）等工具可以審查您的 SQL 或 WP_Query 配置並指出低效的模式，或者幫助您完全重構查詢。
發現WP_Query配置中的瓶頸
假設你編寫了一個複雜的程式，WP_Query 使用自定義元欄位來顯示即將發生的事件，但載入速度很慢。你可以詢問：
Here’s a WP_Query for events sorted by a custom meta field "event_date". It’s slow when there are lots of events. How can I optimize it? [...paste the WP_Query args...]
人工智慧可能會這樣回答：
- 未編入索引的提醒器
meta_query，因此查詢大型資料集總是很昂貴的。 - 建議
orderby => 'meta_value'儘可能避免使用。 - 建議將規範化日期儲存在自定義資料庫列或分類法中以獲得更好的效能。
- 它甚至可能建議重寫邏輯以使用
pre_query鉤子直接改變 SQL。
分析和重構原始SQL
有時你會WP_Query 完全繞過這些操作——可能是為了報告、分析或外掛邏輯。您編寫了一個連線 wp_posts 和 wp_postmeta 的原始 SELECT 查詢，但它很慢或返回重複的結果。
您可以使用如下提示：
This SQL query is slow. Can you help me optimize it? SELECT p.ID, p.post_title, m.meta_value FROM wp_posts p JOIN wp_postmeta m ON p.ID = m.post_id WHERE m.meta_key = 'event_date' AND m.meta_value >= CURDATE() AND p.post_type = 'event' AND p.post_status = 'publish'
解釋查詢實際上在做什麼
如果您獲得了一些執行大型 SQL 查詢的古老外掛或主題程式碼（並且沒有人知道它的作用），您可以將其放入 ChatGPT 或 Claude 中並詢問：
Explain what this WordPress SQL query is doing and tell me if it could be made more efficient: [...query...]
AI 將引導您完成：
- 正在連線哪些表以及為什麼連線。
WHERE每個子句過濾什麼。- 查詢的任何部分是否有冗餘。
- 如果
LIMIT、ORDER BY、 或GROUP BY有問題。
它甚至會解釋諸如 SELECT * 笛卡爾連線或 LIKE 子句中低效的正規表示式之類的不好的事情。
5. 為外掛生成單元/整合測試（PHPUnit）
為 WordPress 程式碼編寫測試並非易事。引導 WP 測試環境、模擬核心功能以及確定需要測試的內容可能非常繁瑣。
AI 工具擅長編寫測試用例，特別是當你給它們一個函式或類並要求測試特定的行為時。
假設你編寫了一個函式，用於建立一篇自定義文章並儲存一些相關的後設資料。你想測試它：
- 成功建立文章。
- 分配正確的文章型別。
- 正確儲存元欄位。
下面的提示可以起作用：
Write PHPUnit tests for this function. It creates a custom post type "Event" and saves meta fields "event_date" and "event_location": [...paste function...]
如果你有一個透過 儲存設定的外掛 admin-post.php，你也可以測試一下。只需將表單處理函式輸入到 AI 並詢問：
Write PHPUnit tests for this function that handles plugin settings form submissions. It saves an option based on POST data and checks a nonce.
如果您的外掛註冊了自定義 REST API 路由，那麼手動測試這些路由會很慢且容易出錯。AI 工具還可以幫助您構建使用 wp_remote_get() 或 rest_do_request() 直接使用以下程式碼的測試：
Write a PHPUnit test that sends a GET request to my custom REST route `/wp-json/my-plugin/v1/data` and checks for a 200 response and valid JSON output.
即使是基礎測試也能及早發現問題。當 AI 處理樣板程式碼時，您可以專注於測試邏輯，而無需費力設定。您無需成為純粹的 TDD 測試驅動開發 (TDD) 擁躉——只需問自己：“我應該在這個函式中測試什麼？”……您就能獲得可能被忽略的想法。它讓測試不再是一項繁瑣的瑣事，而更像是開發的延伸。
6. 重構或翻譯舊程式碼
如果您已經使用 WordPress 幾年了，您可能接觸過一些 jQuery 密集型程式碼 – 內聯指令碼、無處不在的全域性變數、奇怪的時間問題，甚至可能 $(document).ready() 隱藏在 PHP 檔案中。
問題在於 WordPress 已經發展到今天這個地步。Gutenberg 使用了 React，主題正在轉向基於區塊的架構，甚至管理介面也受益於現代 JS。將 jQuery 重構為簡潔、模組化的 JavaScript（甚至在可行的情況下使用 React）可能會非常痛苦——除非你使用 AI 來加速。
假設你有一些像這樣的老式程式碼：
jQuery(document).ready(function($) {
$('#open-modal').on('click', function() {
$('#my-modal').fadeIn();
});
$('.close-modal').on('click', function() {
$('#my-modal').fadeOut();
});
});
如果你想把它轉換成現代的、無依賴的 JS，只需問：
Convert this jQuery code to modern vanilla JavaScript using addEventListener and class toggling instead of fadeIn/fadeOut: [...paste code...]
Claude 或 ChatGPT 將返回：
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('open-modal').addEventListener('click', function() {
document.getElementById('my-modal').classList.add('visible');
});
document.querySelectorAll('.close-modal').forEach(function(btn) {
btn.addEventListener('click', function() {
document.getElementById('my-modal').classList.remove('visible');
});
});
});
它通常會建議新增如下樣式：
#my-modal {
display: none;
}
#my-modal.visible {
display: block;
}
這使得程式碼更易於維護、載入速度更快，並且不需要前端的 jQuery。
另外，假設您正在構建或更新 Gutenberg 區塊，而舊的 JS 使用 jQuery 動態注入標記。您希望將該邏輯移到 React 中，以便它能夠 edit() 正常工作。
以下提示將起作用：
Translate this jQuery code that appends a div with post data into a React component for a Gutenberg block: [...paste jQuery code...]
如果您的程式碼使用類似的 WordPress API wp.apiFetch，AI 也知道如何整合它——通常會建議更好的非同步模式或比遺留程式碼更優雅地處理錯誤。
最後，假設你正在處理一個外掛，它在一個<script> 標籤中包含 300 行 JavaScript 程式碼。AI 可以使用如下提示將其拆分成邏輯部分：
Break this JavaScript into reusable functions and separate concerns. Put DOM setup, event handlers, and data logic into their own functions: [...paste code...]
7. 讓託管和DevOps更加簡單
WordPress 開發不僅僅侷限於編寫程式碼——它涵蓋了從部署到更新、效能和託管配置的所有內容。如果您在 Kinsta 這樣的平臺上管理網站，那麼 AI 工具可以幫助您更快地行動，並減少在運維層面犯的錯誤。
例如，如果您從伺服器 PHP 錯誤日誌或 APM 工具中收到神秘錯誤，您可以將其貼上到 ChatGPT 中並詢問：
This error came from Server’s PHP logs. Can you explain what it means and how to fix it?
它將比梳理文件或 Stack Overflow 更快地幫助解碼致命錯誤、記憶體問題或外掛衝突。
如果伺服器文件、外掛 README 或某些規則的一部分.htaccess 沒有意義，只需將其放入 Claude 並說：
Explain this part to me like I’m a developer but unfamiliar with server config.
AI 工具還可以幫助你生成或審查基於 Git 的 CI/CD 工作流，例如 GitHub Actions、GitLab CI 或 Bitbucket Pipelines，這些工作流可以在伺服器上透過 SSH 部署主題、同步檔案或執行資料庫遷移。只需提示：
Write a GitHub Actions workflow that deploys my WordPress theme to a Kinsta server over SSH after pushing to the main branch.
簡而言之，人工智慧成為您 與託管或 DevOps 中耗時或不清楚的部分之間的一層——無論是讀取日誌、編寫指令碼部署還是理解文件。
話雖如此，處理效能問題、錯誤和伺服器配置等託管問題仍然需要真正的專業知識。如果出現問題，可能會令人沮喪、耗時且對您的業務造成高昂的成本。
小結
人工智慧並不是要取代 WordPress 開發人員——它是為了讓我們的速度更快、程式碼更簡潔、更少犯無聊的錯誤。
關鍵在於要像對待初級開發人員一樣對待 AI，而不是一根魔杖。不要指望它一下子就能搞定所有事情。將工作分解成幾個步驟，回顧它提供的內容，然後逐層構建。這樣，你才能在掌控全域性的同時，享受 AI 帶來的所有速度優勢。
評論留言