如何巧用AI进行WordPress开发工作

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 带来的所有速度优势。