Codex 接入WordPress完全教程

内容分享1小时前发布
0 1 0

Codex 接入WordPress完全教程

C O D E X x W O R D P R E S S T U T O R I A L

Codex 接入

WordPress

完全教程

从零开始,让 AI 帮你写 WordPress 插件、主题与接口

适用对象:零基础 WordPress 与 AI 编程初学者

教程版本:v1.0

更新日期:2026 年 7 月

Qingyan Agent 出品 Codex x WordPress

目 录

第一章 开篇导读:认识 Codex 与
WordPress……………………………………………………. 4

1.1 Codex 是什么?
…………………………………………………………………………………….. 4

1.2 WordPress 是什么?
………………………………………………………………………………. 4

1.3 为什么要把 Codex 和 WordPress 结合起来?
………………………………………. 5

1.4 本教程适合谁?
…………………………………………………………………………………….. 5

1.5 阅读本教程你需要准备什么?
……………………………………………………………….. 6

第二章 准备工作:搭建你的开发环境
………………………………………………………………… 7

2.1 第一步:安装 Node.js 运行环境
……………………………………………………………. 7

2.1.1 Windows 系统安装
Node.js………………………………………………………….. 7

2.1.2 macOS 系统安装
Node.js…………………………………………………………….. 8

2.1.3 验证 Node.js 是否安装成功
…………………………………………………………. 8

2.2 第二步:安装 Codex
CLI………………………………………………………………………. 9

2.2.1 执行安装命令
………………………………………………………………………………. 9

2.2.2 验证 Codex 安装
…………………………………………………………………………. 9

2.3 第三步:申请并配置 OpenAI API
Key…………………………………………………. 10

2.3.1 登录 OpenAI 平台
…………………………………………………………………….. 10

2.3.2 创建新的 API
Key……………………………………………………………………… 10

2.3.3 把 API Key 配置给
Codex…………………………………………………………. 10

2.4 第四步:验证 Codex 能正常工作
………………………………………………………… 11

第三章 本地搭建 WordPress 开发环境
……………………………………………………………… 12

3.1 为什么需要本地环境?
………………………………………………………………………… 12

3.2 方案一:用 Local by Flywheel(强烈推荐小白)
…………………………………. 13

3.2.1 下载并安装
Local………………………………………………………………………. 13

3.2.2 创建你的第一个 WordPress 站点
……………………………………………….. 13

3.2.3 访问你的本地
WordPress……………………………………………………………. 13

3.2.4 方案二:用 Docker(进阶用户)
………………………………………………………. 14

3.3 认识 WordPress 目录结构
……………………………………………………………………. 15

第四章 让 Codex 认识你的 WordPress 项目
……………………………………………………. 16

4.1 在 WordPress 项目目录打开终端
…………………………………………………………. 16

4.1.1 Windows 用户操作
…………………………………………………………………….. 16

4.1.2 Mac 用户操作
……………………………………………………………………………. 17

4.1.3 验证当前目录正确
……………………………………………………………………… 17

4.2 创建 AGENTS.md 项目说明文件
………………………………………………………… 17

4.3 第一次和 Codex 对话
………………………………………………………………………….. 19

4.4 让 Codex 理解 WordPress 上下文的小技巧
………………………………………… 19

第五章 实战案例一:用 Codex 创建自定义插件
………………………………………………. 20

5.1 需求分析:我们要做什么?
…………………………………………………………………. 20

5.2 用自然语言告知 Codex 你的需求
………………………………………………………… 20

5.3 Codex 生成的代码解读
………………………………………………………………………… 21

5.3.1 插件头部注释
…………………………………………………………………………….. 23

5.3.2 防止直接访问
…………………………………………………………………………….. 23

5.3.3 注册设置项
………………………………………………………………………………… 23

5.3.4 添加后台菜单
…………………………………………………………………………….. 24

5.3.5 在文章上方显示欢迎语
………………………………………………………………. 24

5.4 在 WordPress 后台启用插件
………………………………………………………………… 24

5.5 测试效果
……………………………………………………………………………………………… 24

第六章 实战案例二:用 Codex 创建自定义短代码
…………………………………………… 25

6.1 什么是短代码?
…………………………………………………………………………………… 25

6.2 让 Codex 生成短代码
………………………………………………………………………….. 26

6.3 在文章中使用短代码
……………………………………………………………………………. 29

第七章 实战案例三:用 Codex 调用 WordPress REST
API………………………………. 29

7.1 什么是 REST API?
…………………………………………………………………………….. 30

7.2 用 Codex 生成调用代码
………………………………………………………………………. 30

7.3 测试 API 调用
…………………………………………………………………………………….. 33

第八章 调试与最佳实践
……………………………………………………………………………………. 34

8.1 Codex 给的代码报错了怎么办?
………………………………………………………….. 34

8.1.1 第一步:看错误信息在哪里
……………………………………………………….. 34

8.1.2 第二步:开启 WP_DEBUG 看详细错误
…………………………………….. 35

8.1.3 第三步:让 Codex 修复
…………………………………………………………….. 35

8.2 如何让 Codex 修改已有代码?
……………………………………………………………. 35

8.2.1 修改样式
……………………………………………………………………………………. 36

8.2.2 增加功能
……………………………………………………………………………………. 36

8.2.3 重构优化
……………………………………………………………………………………. 36

8.3 版本控制:用 Git 管理你的代码
…………………………………………………………. 36

8.4 安全注意事项
………………………………………………………………………………………. 37

第九章 常见问题解答(FAQ)
…………………………………………………………………………. 38

Q1:Codex 安装失败,提示网络错误怎么办?
……………………………………………. 38

Q2:codex 命令提示「不是内部或外部命令」怎么办?
………………………………. 38

Q3:Codex 启动后报 401 或 403 错误怎么办?
………………………………………… 39

Q4:Codex 生成的代码不能用怎么办?
………………………………………………………. 39

Q5:Codex 改了我的代码,怎么撤销?
………………………………………………………. 39

Q6:本地 WordPress 突然打不开了怎么办?
………………………………………………. 39

Q7:插件启用后网站白屏了怎么办?
………………………………………………………….. 40

Q8:Codex 调用太慢,能不能加速?
………………………………………………………….. 40

Q9:能不能让 Codex 直接修改线上 WordPress?
………………………………………. 40

Q10:学完本教程后,下一步该学什么?
…………………………………………………….. 40

结语
…………………………………………………………………………………………………………….. 41

(提示:在 Word 中右键点击目录区域,选择「更新域」可刷新页码)

第一章 开篇导读:认识 Codex 与 WordPress

欢迎来到这本面向小白的 Codex 接入 WordPress 实战教程。如果你之前从来没有接触过命令行、没有写过一行代码、也没有用过 WordPress,那么祝贺你来对了地方。本教程会用最平实的语言,一步一步带你把 OpenAI 推出的 AI 编程助手 Codex 接入到 WordPress 网站开发流程中,让你即使不懂编程,也能借助 AI 的力量搭建出属于自己的网站功能。

在正式动手之前,我们需要先弄清楚两个核心概念:Codex 是什么、WordPress 是什么、以及它们组合在一起能为你带来什么样的价值。理解了这些,后面的每一步操作你都会知道「为什么要这样做」,而不是机械地照搬命令。

1.1 Codex 是什么?

Codex 是 OpenAI 在 2025 年正式推出的一款 AI 编程助手工具,它的核心形态是一个运行在终端(也就是俗称的「黑窗口」或命令行)里的命令行程序,官方名称叫 Codex CLI。你可以把它理解成一个「住在终端里的程序员同事」:你用自然语言告知它你想做什么,列如「帮我写一个 WordPress 插件,能在文章末尾显示作者头像」,它就会自动分析需求、生成代码、创建文件,甚至帮你运行测试。

和 ChatGPT 网页版不同的是,Codex CLI 可以直接读取你电脑上的项目文件、修改文件、执行命令,所以它不仅能「聊天」,还能真正「动手干活」。它背后使用的是 OpenAI 最新的推理模型(如 GPT-5 Codex 专用模型或 o系列推理模型),理解能力比早期的代码助手强许多,能够处理跨多个文件的大型任务。

简单总结一下:Codex 就是一个能听懂人话、能直接操作你电脑文件的 AI 程序员。你只需要描述需求,剩下的代码编写、文件创建、调试修改,它都能帮你完成大半。

1.2 WordPress 是什么?

WordPress 是这个星球上使用最广泛的网站搭建系统,据公开统计,全球大约有四成以上的网站都是用 WordPress 搭建的,从小到个人博客,大到《时代周刊》、NASA、微软新闻中心,都在用它。它最大的特点是「开箱即用」——你不需要从零写代码,只要安装好 WordPress,就能立刻拥有一个可以发表文章、管理评论、上传图片、安装主题和插件的完整网站。

WordPress 由两部分组成:核心程序(负责基础功能的官方代码)和扩展生态(主题控制外观、插件控制功能)。你之所以能用 WordPress 做出几乎任何类型的网站,正是由于有成千上万的免费/付费插件和主题可以组合使用。但问题也随之而来:当你想要的功能没有现成插件可用,或者现成插件不够灵活时,你就需要自己写代码了——而这恰恰是大多数小白卡住的地方。

好消息是,有了 Codex 之后,「自己写代码」这件事的门槛被大幅降低了。你不需要系统学习 PHP 语言,也不需要背诵 WordPress 的函数手册,只要把需求说清楚,Codex 就能帮你生成符合 WordPress 规范的代码。

1.3 为什么要把 Codex 和 WordPress 结合起来?

把 Codex 和 WordPress 结合使用,对小白来说有三大核心好处。第一,降低学习曲线:WordPress 的开发文档虽然完善,但全是英文且术语密集,初学者很难啃动;而 Codex 已经「读」过这些文档,你只需要用中文描述需求,它就能输出符合规范的代码。第二,提升开发效率:原本需要查文档、写代码、调试一整天的工作,借助 Codex 可能十几分钟就能完成初版。第三,降低出错率:Codex 生成的代码会自动遵循 WordPress 的安全规范(如数据转义、权限检查),比新手自己摸索写出来的代码更安全。

当然,AI 不是万能的。Codex 生成的代码偶尔也会有 bug,或者不完全符合你的预期。所以本教程不仅会教你「怎么让 Codex 生成代码」,还会教你「怎么验证、调试、修改这些代码」,让你具备基本的代码审查能力,而不是盲目使用。

1.4 本教程适合谁?

本教程专门为以下人群设计,如果你符合其中任何一条,那么这本教程就是为你写的:

完全的编程零基础者:你可能连「命令行」是什么都不知道,但你想用 WordPress 搭网站,又希望有一些自定义功能。

WordPress 站长:你已经会用 WordPress 后台发文章、装插件,但遇到「想要的功能没有现成插件」时束手无策。

刚接触 Codex 的开发者:你可能有一些编程基础,但没用过 Codex CLI,想了解它如何与 WordPress 项目配合。

学生与自学爱好者:想通过一个具体的项目实践,同时学习 AI 工具使用和 WordPress 开发。

如果你已经是资深 PHP 开发者,本教程的基础部分可能对你来说过于啰嗦,但实战案例和最佳实践章节依旧值得一看。

1.5 阅读本教程你需要准备什么?

在开始之前,请确认你已经具备以下条件,否则后面的操作会卡壳:

准备项

说明

费用

一台电脑

Windows 10/11、macOS 或 Linux 均可,提议 8GB 以上内存

已有

稳定的网络

能正常访问 OpenAI 服务(如需)

已有

OpenAI 账号

用于申请 API Key,需绑定支付方式

按用量付费

约 2 小时时间

完整跟着教程走一遍

时间投入

一颗不怕折腾的心

遇到报错不要慌,本教程会教你排查

心态

[小贴士] 心态提议

学习任何新技术都会遇到报错和卡顿,这是正常现象。当某个步骤报错时,请把完整的错误信息复制下来,可以直接问 Codex 本身(它很擅长解释报错),也可以搜索错误关键词。千万不要一遇到红色报错就放弃,90% 的问题都能在 5 分钟内解决。

Codex 接入WordPress完全教程

图 1-1 Codex 与 WordPress 协作概念图:AI 助手帮你把想法变成可运行的网站功能

第二章 准备工作:搭建你的开发环境

工欲善其事,必先利其器。在让 Codex 帮你写 WordPress 代码之前,我们需要先把「开发环境」搭好。所谓开发环境,就是 Codex 运行所依赖的软件和配置。本章会一步步带你完成 Node.js 安装、Codex CLI 安装、OpenAI API Key 申请与配置,最后验证一切是否就绪。整个过程大约需要 30 到 60 分钟,请耐心操作。

2.1 第一步:安装 Node.js 运行环境

Codex CLI 是用 JavaScript 写的,所以你的电脑上必须先装一个能运行 JavaScript 的「引擎」,这个引擎就叫 Node.js。你可以把它理解成「运行 Codex 这个程序所必需的基础软件」。无论你用的是 Windows、Mac 还是 Linux,安装过程都很傻瓜化。

2.1.1 Windows 系统安装 Node.js

打开浏览器,访问 Node.js 官方网站(网址是 https://nodejs.org)。网站首页会显示两个大按钮,分别标着「LTS」(长期支持版)和「Current」(最新版)。对于小白来说,强烈提议选择 LTS 版本,由于它更稳定,遇到 bug 的概率更低。点击 LTS 按钮下载安装包,文件名类似 node-v20.x.x-x64.msi。

下载完成后,双击这个 .msi 文件,会弹出安装向导。一路点击「Next」(下一步)即可,所有选项保持默认就行。其中有一项「Add to PATH」务必保持勾选(默认就是勾选的),这一步超级关键,它决定了你能否在任意位置的命令行里直接调用 node 命令。安装完成后,可能需要重启电脑让环境变量生效。

2.1.2 macOS 系统安装 Node.js

Mac 用户有两种方式。第一种是和 Windows 一样,去官网下载 .pkg 安装包,双击安装。第二种是使用 Homebrew(Mac 上最流行的包管理器),如果你已经装了 Homebrew,打开「终端」应用,输入下面这条命令即可:

bash

brew install node

如果你不知道自己有没有 Homebrew,提议直接用官网安装包的方式,更简单。

2.1.3 验证 Node.js 是否安装成功

安装完成后,我们需要验证一下是否真的装好了。打开命令行工具(Windows 按 Win+R 输入 cmd 回车;Mac 在「启动台」里找「终端」),分别输入下面两条命令:

bash

node –version
npm –version

如果你看到类似 v20.11.0 和 10.2.4 这样的版本号输出,说明安装成功。如果提示「node 不是内部或外部命令」或「command not found」,说明环境变量没生效,请重启电脑再试一次;如果重启后还是不行,说明安装时没勾选「Add to PATH」,请卸载重装。

[注意] 版本要求

Codex CLI 要求 Node.js 版本不低于 18。如果你看到的版本号是 v16.x 或更低,请去官网下载新版 Node.js 覆盖安装。

2.2 第二步:安装 Codex CLI

装好 Node.js 之后,下一步就是安装 Codex CLI 本身。Codex 是一个 npm 包(npm 是 Node.js 的包管理器,类似手机的应用商店),通过 npm 命令全局安装即可。

2.2.1 执行安装命令

在命令行中输入下面这条命令,按回车执行。这条命令的意思是「全局安装 @openai/codex 这个包」,-g 表明全局安装,安装后你可以在任何目录使用 codex 命令。

bash

npm install -g @openai/codex

安装过程可能需要 1 到 3 分钟,取决于你的网速。期间会显示一堆滚动的文字,这是正常的。如果长时间卡住不动(超过 5 分钟),按 Ctrl+C 中断,然后重新执行一次。如果还是失败,可以尝试切换 npm 镜像源(国内用户推荐):

bash

npm config set registry https://registry.npmmirror.com
npm install -g @openai/codex

2.2.2 验证 Codex 安装

安装完成后,输入下面这条命令查看版本:

bash

codex –version

如果输出类似 0.x.x 这样的版本号,祝贺你,Codex 已经装好了。如果提示「codex 不是命令」,请关闭当前命令行窗口重新打开一个再试;若仍不行,说明 npm 全局安装路径没加入环境变量,Windows 用户需要把 %APPDATA%
pm 加入 PATH,Mac 用户重启终端即可。

2.3 第三步:申请并配置 OpenAI API Key

Codex 调用 AI 模型需要 OpenAI 的 API Key,可以把它理解成「使用 Codex 的通行证」。每个 Key 都关联着一个 OpenAI 账号,调用产生的费用会从该账号扣除。下面是申请和配置的完整流程。

2.3.1 登录 OpenAI 平台

用浏览器访问
https://platform.openai.com,用你的 OpenAI 账号登录。如果没有账号,点击「Sign up」注册一个,注册需要邮箱和手机号验证。登录后,在页面右上角点击你的头像,在弹出菜单里选「View API keys」,进入 API 密钥管理页面。

2.3.2 创建新的 API Key

在 API 密钥页面,点击「Create new secret key」按钮,会弹出一个对话框。给这个 Key 起个名字(列如「codex-wp-tutorial」),方便日后识别;权限选择「All」或「Restricted」都可以,小白选「All」最省事。点击「Create secret key」,页面会显示一长串以 sk- 开头的字符串——这就是你的 API Key。

[注意] Key 只显示一次

这串 Key 只在创建时显示一次,关闭对话框后就再也看不到了。请立刻复制保存到安全的记事本或密码管理器里。如果丢了,只能重新创建一个新的。

2.3.3 把 API Key 配置给 Codex

拿到 Key 之后,需要告知 Codex 去哪里找它。Codex 支持两种配置方式,推荐使用环境变量方式(更安全、更通用)。

Mac 和 Linux 用户,打开终端,执行下面这条命令(把 sk-后面的内容替换成你自己的 Key):

bash

echo 'export OPENAI_API_KEY=”sk-你的真实Key”' >> ~/.zshrc
source ~/.zshrc

Windows 用户(PowerShell)执行下面这条命令:

powershell

setx OPENAI_API_KEY “sk-你的真实Key”

执行完后,关闭当前命令行窗口,重新打开一个,输入下面这条命令验证 Key 是否配置成功:

bash

# Mac/Linux
echo $OPENAI_API_KEY

# Windows PowerShell
echo $env:OPENAI_API_KEY

如果你看到自己设置的 Key 输出,说明配置成功。如果输出空白,说明环境变量没生效,请检查命令是否拼写正确、是否重启了终端。

[小贴士] 费用说明

OpenAI API 按实际调用的 token 数量计费,写一个 WordPress 插件大致消耗几毛到几块钱人民币。新账号一般有少量免费额度,可以先体验。提议在 OpenAI 后台设置「每月消费上限」,避免意外超支。

2.4 第四步:验证 Codex 能正常工作

环境全部配置好之后,我们来做一个最简单的测试,确认 Codex 真的能跑起来。在命令行任意目录输入:

bash

codex

首次运行时,Codex 会进入一个交互式界面,可能会问你选择哪种审批模式(approval mode)。对于小白,提议选「自动审批本地命令」模式(Auto-approve local commands 或类似选项),这样 Codex 在执行本地文件读写时不会反复问你确认,体验更流畅。

进入交互界面后,你会看到一个输入框。试着输入一句简单的话,列如:「请用一句话介绍你自己」,按回车。如果 Codex 回复了一段流畅的中文,说明一切就绪,你可以正式开始用它开发 WordPress 了。

要退出 Codex 交互界面,可以输入 exit 或按 Ctrl+C 两次。

Codex 接入WordPress完全教程

图 2-1 Codex 工作流程:你在终端描述需求 → Codex 生成代码 → 写入 WordPress 项目 → 网站生效

第三章 本地搭建 WordPress 开发环境

Codex 准备好之后,我们还需要一个「被开发的 WordPress 网站」。直接在正式上线的网站上调代码风险太大(可能把网站搞崩、被黑客入侵),所以行业惯例是先在本地电脑搭一个「开发用 WordPress」,调试好了再部署到线上。本章教你两种搭建方式,推荐小白用第一种。

3.1 为什么需要本地环境?

本地 WordPress 环境就是你电脑上一个完整的 WordPress 站点,它和线上的 WordPress 一模一样,有后台、有数据库、能装插件、能改主题,唯一的区别是只有你自己能访问(网址是 localhost 开头)。在本地环境里,无论你怎么折腾——删插件、改代码、装主题——都不会影响线上网站,调试起来毫无心理负担。

更重大的是,Codex 需要能「看到」WordPress 的文件结构才能帮你改代码。本地环境会把 WordPress 的所有文件(包括 wp-content 下的插件、主题目录)都放在你电脑上一个明确的文件夹里,Codex 就能直接读写这些文件。

3.2 方案一:用 Local by Flywheel(强烈推荐小白)

Local by Flywheel(简称 Local)是一款免费的本地 WordPress 开发工具,它的最大优点是「图形界面 + 一键创建」,完全不需要碰命令行和数据库配置,是小白的首选。

3.2.1 下载并安装 Local

用浏览器访问 https://localwp.com,点击首页的大按钮「Get Local」,选择你的操作系统版本(Windows / Mac / Linux)下载安装包。安装过程和普通软件一样,一路下一步即可。安装完成后第一次启动,可能需要输入电脑密码授权,这是正常的。

3.2.2 创建你的第一个 WordPress 站点

打开 Local 应用,左下角有个加号按钮「+」,点击它开始创建站点。创建向导会问你几个问题,按下面的提议填写:

步骤

问题

提议填写

1

站点名称

wp-codex-demo(任意,英文+数字)

2

是否首选环境

Preferred(默认推荐配置)

3

WordPress 管理员账号

admin(或你喜爱的名字)

4

管理员密码

设一个你能记住的,列如 Demo@2026

5

管理员邮箱

你的常用邮箱

填完点「Add Site」,Local 会自动下载 WordPress 核心程序、配置数据库、生成站点,整个过程大约 1 到 3 分钟。完成后你会看到站点列表里多了一个 wp-codex-demo,状态显示绿色「Running」。

3.2.3 访问你的本地 WordPress

在 Local 的站点列表里点击 wp-codex-demo,右侧会展开详情面板。面板顶部有两个按钮:「WP Admin」和「Open Site」。点击「Open Site」,浏览器会自动打开你的本地 WordPress 首页,网址类似 http://localhost:10003(端口号每次可能不同)。点击「WP Admin」会打开 WordPress 后台登录页,用刚才设置的管理员账号密码登录,就能进入 WordPress 控制台了。

[小贴士] 记住站点路径

在 Local 站点详情面板里,有一行「Path」(路径),显示的是这个站点在电脑上的真实文件夹位置,列如 C:Users你的名字Local Siteswp-codex-demoapppublic。这个路径超级重大,后面 Codex 要在这个目录里工作,请记下来或复制保存。

3.2.4 方案二:用 Docker(进阶用户)

如果你已经熟悉 Docker,可以用 docker-compose 一键起一个 WordPress + MySQL 环境。下面是一个最简的 docker-compose.yml 示例,保存为文件后在同目录执行 docker compose up -d 即可:

yaml

version: '3.8'
services:
db:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: rootpass
MYSQL_DATABASE: wordpress
MYSQL_USER: wp
MYSQL_PASSWORD: wppass
volumes:
– db_data:/var/lib/mysql

wordpress:
image: wordpress:latest
depends_on:
– db
ports:
– “8080:80”
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wp
WORDPRESS_DB_PASSWORD: wppass
WORDPRESS_DB_NAME: wordpress
volumes:
– wp_data:/var/www/html

volumes:
db_data:
wp_data:

启动后访问 http://localhost:8080 即可进入 WordPress 安装向导。Docker 方式的好处是环境隔离干净,坏处是需要你已熟悉 Docker,对小白来说门槛偏高,所以本教程后续以 Local 方式为主讲解。

3.3 认识 WordPress 目录结构

无论用 Local 还是 Docker,WordPress 安装好之后,根目录下都有一堆文件和文件夹。作为小白,你不需要全部认识,但下面这几个必须搞清楚,由于后面 Codex 改代码主要就在这几个目录里活动。

目录/文件

作用

你需要关心吗

wp-admin/

WordPress 后台核心代码,不要动

wp-includes/

WordPress 核心函数库,不要动

wp-content/themes/

主题目录,控制网站外观

wp-content/plugins/

插件目录,控制网站功能

wp-content/uploads/

上传的图片、附件存放地

wp-config.php

数据库连接配置文件

极少改

index.php

网站入口文件

重点记住 wp-content 这个目录,它是你做 WordPress 开发的「主战场」。所有自定义主题放在 wp-content/themes/ 下,所有自定义插件放在 wp-content/plugins/ 下。Codex 接下来生成的代码,主要就是往这两个目录里写文件。

Codex 接入WordPress完全教程

图 3-1 WordPress 插件目录结构示意:每个插件是一个独立文件夹,内含主 PHP 文件

第四章 让 Codex 认识你的 WordPress 项目

环境都搭好之后,接下来要做的是「把 Codex 引到你的 WordPress 项目目录里」。Codex 是基于「当前工作目录」工作的——也就是说,你在哪个目录启动 codex 命令,它就只看那个目录下的文件。所以第一步是学会用命令行进入 WordPress 项目目录。

4.1 在 WordPress 项目目录打开终端

假设你用 Local 创建的站点路径是 C:Users你的名字Local Siteswp-codex-demoapppublic(Mac 用户类似 /Users/你的名字/Local
Sites/wp-codex-demo/app/public)。这个 public 文件夹就是 WordPress 的根目录,里面能看到 wp-admin、wp-content 等文件夹。

4.1.1 Windows 用户操作

用文件资源管理器进入上述 public 文件夹,确认你能在地址栏看到 wp-content 等文件夹。然后在地址栏里清空原内容,输入 cmd 三个字母,按回车——会立刻弹出一个命令行窗口,并且当前目录就是 public。这是最快进入指定目录的方法。

4.1.2 Mac 用户操作

Mac 自带的「终端」默认在用户主目录,需要用 cd 命令切换。在终端输入(路径替换成你的真实路径):

bash

cd “/Users/你的名字/Local
Sites/wp-codex-demo/app/public”

Mac 还有个更方便的小技巧:打开「系统设置 → 键盘 → 键盘快捷键 → 服务」,勾选「新建位于文件夹位置的终端标签页」。之后在 Finder 里右键任意文件夹,菜单里会多一项「服务 → 新建位于文件夹位置的终端标签页」,一键直达。

4.1.3 验证当前目录正确

进入目录后,输入下面这条命令列出当前目录的文件:

bash

# Windows
dir

# Mac/Linux
ls

如果你看到 wp-admin、wp-content、wp-includes、index.php、wp-config.php 这些条目,说明你已经在 WordPress 根目录了,可以进入下一步。

4.2 创建 AGENTS.md 项目说明文件

Codex 在帮你写代码之前,需要先「了解」你的项目是什么。Codex 约定了一个特殊的文件名 AGENTS.md(注意是大写),放在项目根目录下。Codex 启动时会自动读取这个文件,把它当作「项目说明书」。一份好的 AGENTS.md 能让 Codex 生成的代码更贴合你的项目。

在 WordPress 根目录下,新建一个文本文件,重命名为 AGENTS.md(注意不要带 .txt 后缀)。用记事本或任何文本编辑器打开,把下面这段内容粘贴进去:

markdown

# 项目说明

这是一个 WordPress 站点的本地开发环境。

## 基本信息
– WordPress 版本:最新版
– PHP 版本:8.0+
– 数据库:MySQL 8.0
– 站点类型:博客 + 内容站

## 目录约定
– 自定义主题放在 wp-content/themes/ 下
– 自定义插件放在 wp-content/plugins/ 下
– 每个插件/主题一个独立子文件夹

## 代码规范
– 遵循 WordPress Coding Standards(WordPress 官方代码规范)
– 所有输出到前端的数据必须经过 esc_html / esc_attr / esc_url 转义
– 数据库查询必须使用 $wpdb 或 WP_Query,禁止直接拼 SQL
– 用户输入必须经过 sanitize_text_field / sanitize_textarea_field 清理
– 权限检查必须用 current_user_can()

## 命名约定
– 插件主文件名:插件名小写下划线,如 my_hello_world.php
– 函数名:前缀_功能名,如 mhw_show_greeting()
– 文本域(i18n):插件名小写下划线,如 my_hello_world

## 不要做的事
– 不要修改 wp-admin/ 和 wp-includes/ 下的核心文件
– 不要在主题里硬编码 API Key 等敏感信息
– 不要使用已弃用的 WordPress 函数(如 mysql_connect)

保存文件后,这个 AGENTS.md 就成了 Codex 理解你项目的「地图」。每次启动 Codex,它都会先读一遍这个文件,然后才处理你的具体需求。

[小贴士] AGENTS.md 的价值

AGENTS.md 不是必须的,但强烈推荐。没有它,Codex 只能根据你当前目录的文件猜测项目类型;有了它,Codex 会严格按照你定义的规范生成代码,少走许多弯路。提议每次开始一个新项目都先写好这个文件。

4.3 第一次和 Codex 对话

确认 AGENTS.md 创建好之后,在 WordPress 根目录的命令行里输入:

bash

codex

Codex 启动后,会显示一个交互式输入界面。先让它「自报家门」,确认它已经读懂了你的项目。在输入框输入下面这段话:

text

请阅读当前目录下的 AGENTS.md 文件,然后用一段话告知我:
1. 这是一个什么类型的项目?
2. 你会遵循哪些代码规范?
3. 自定义代码应该放在哪个目录?

按回车后,Codex 会读取 AGENTS.md,然后给你一段总结性回复。如果它的回答里提到了 WordPress、提到了 wp-content、提到了数据转义和权限检查,说明它已经正确理解了你的项目,可以开始正式开发了。

4.4 让 Codex 理解 WordPress 上下文的小技巧

虽然 Codex 训练数据里包含 WordPress 知识,但为了让它生成更准确的代码,有几个小技巧值得掌握:

明确版本:在需求里说「基于 WordPress 6.x 最新版」,避免它生成已废弃的写法。

指明文件位置:列如「在 wp-content/plugins/ 下创建一个名为 xxx 的插件」,而不是模糊地说「帮我写个插件」。

提供参考:如果已有类似插件,可以告知 Codex「参考 wp-content/plugins/xxx 的结构」。

分步骤提需求:复杂功能拆成多轮对话,每轮只让它做一件事,比一次性塞给它整个大需求效果好。

要求解释:在需求末尾加一句「生成后请逐行解释关键代码」,能帮你理解它写了什么。

第五章 实战案例一:用 Codex 创建自定义插件

理论讲完了,目前进入实战环节。本章带你用 Codex 从零创建一个真实可用的 WordPress 插件——一个「网站欢迎语插件」,它会在每篇文章正文上方显示一句自定义的欢迎语,并且欢迎语可以在后台修改。这个案例虽然简单,但涵盖了插件开发的完整流程:创建文件、注册设置项、保存配置、前端显示。

5.1 需求分析:我们要做什么?

在让 Codex 动手之前,先用大白话把需求想清楚。我们要做的插件功能如下:

● 在 WordPress 后台「设置」菜单下,新增一个子菜单「欢迎语设置」。

● 在该设置页面,管理员可以输入一句欢迎语(列如「欢迎来到我的博客!」)。

● 点击「保存」后,欢迎语被存入数据库。

● 在每篇单篇文章(single post)正文上方,自动显示这句欢迎语。

● 如果管理员没设置欢迎语,则不显示任何内容(避免空白)。

需求想清楚后,把它整理成一段清晰的自然语言描述,准备发给 Codex。

5.2 用自然语言告知 Codex 你的需求

在 Codex 交互界面输入下面这段需求(你可以直接复制,也可以按自己习惯改写,关键是把功能点说清楚):

text

请在 wp-content/plugins/ 目录下创建一个名为 site-greeting 的插件。

功能需求:
1. 插件主文件名:site-greeting.php
2. 在后台”设置”菜单下新增子菜单”欢迎语设置”
3. 设置页面有一个文本输入框,管理员可输入欢迎语
4. 输入框下方有”保存更改”按钮,点击后用 WordPress 的 Settings API 保存
5. 在每篇单篇文章(is_single() 为 true 时)正文上方,用 the_content 钩子显示这句欢迎语
6. 如果欢迎语为空,则不显示任何内容
7. 欢迎语输出时必须经过 esc_html 转义
8. 文本域使用 site-greeting,方便后续国际化

请按 WordPress Coding Standards 规范编写,并在文件顶部加上标准的插件头部注释(Plugin Name、Description、Version、Author 等)。

按回车后,Codex 会进入「思考」状态(界面会显示它正在分析、读文件、写代码)。大约 30 秒到 2 分钟后,它会告知你已经创建了
wp-content/plugins/site-greeting/site-greeting.php 这个文件,并简要说明它做了什么。

5.3 Codex 生成的代码解读

Codex 完成后,你可以用文本编辑器打开
wp-content/plugins/site-greeting/site-greeting.php 看看它写了什么。一份典型的、符合规范的插件代码大致长这样(实际生成的内容可能略有差异,但结构类似):

php

<?php
/**
* Plugin Name: Site Greeting
* Description: 在文章正文上方显示可自定义的欢迎语
* Version: 1.0
* Author: Your Name
* Text Domain: site-greeting
*/

// 防止直接访问
if ( ! defined( 'ABSPATH' ) ) {
exit;
}

/**
* 注册设置项
*/
function
site_greeting_register_settings() {

register_setting(
'site_greeting_options', // 选项组名
'site_greeting_text', // 选项名
'sanitize_text_field' // 清理函数
);
}
add_action( 'admin_init', '
site_greeting_register_settings' );

/**
* 添加设置子菜单
*/
function
site_greeting_add_admin_menu() {

add_options_page(
'欢迎语设置',
'欢迎语设置',
'manage_options',
'site-greeting',
'
site_greeting_render_settings_page'

);
}
add_action( 'admin_menu', '
site_greeting_add_admin_menu' );

/**
* 渲染设置页面
*/
function
site_greeting_render_settings_page() {

if ( ! current_user_can( 'manage_options' ) ) {
return;
}
?>
<div>
<h1>欢迎语设置</h1>
<form method=”post” action=”options.php”>
<?php
settings_fields( 'site_greeting_options' );
$greeting = get_option( 'site_greeting_text', '' );
?>
<table>
<tr>
<th scope=”row”><label for=”site_greeting_text”>欢迎语</label></th>
<td>
<input type=”text”
id=”site_greeting_text”

value=”<?php echo esc_attr( $greeting ); ?>”
/>
</td>
</tr>
</table>
<?php submit_button( '保存更改' ); ?>
</form>
</div>
<?php
}

/**
* 在文章正文上方显示欢迎语
*/
function
site_greeting_display_before_content( $content ) {

if ( is_single() ) {
$greeting = get_option( 'site_greeting_text', '' );
if ( ! empty( $greeting ) ) {
$banner = '<psysbr”> . 'border-left:4px solid #2176AE;margin-bottom:20px;”>'
. esc_html( $greeting ) . '</p>';
$content = $banner . $content;
}
}
return $content;
}
add_filter( 'the_content', '
site_greeting_display_before_content' );

这段代码虽然看起来长,但实则结构超级清晰。我们逐段拆解一下,让你能看懂 Codex 写了什么:

5.3.1 插件头部注释

文件开头的多行注释(Plugin Name、Description 等)是 WordPress 识别插件的「身份证」。WordPress 后台「插件」列表就是靠读取这段注释来显示插件名称和描述的。少了这段,WordPress 不会把文件夹识别为插件。

5.3.2 防止直接访问

if ( ! defined( 'ABSPATH' ) ) exit; 这一行超级重大,它防止有人直接通过网址访问这个 PHP 文件(列如 http://你的网站
/wp-content/plugins/site-greeting/site-greeting.php),避免被黑客利用。这是 WordPress 代码的安全底线,Codex 自动加上了。

5.3.3 注册设置项

register_setting 函数告知 WordPress:「我要在数据库里存一个叫 site_greeting_text 的选项,存入前请用 sanitize_text_field 函数清理」。sanitize_text_field 会自动去掉用户输入里的 HTML 标签、特殊字符,防止 XSS 攻击。

5.3.4 添加后台菜单

add_options_page 函数在「设置」主菜单下挂一个子菜单,标题叫「欢迎语设置」,权限要求是 manage_options(只有管理员能看到)。最后一个参数是回调函数名,告知 WordPress 用户点这个菜单时显示哪个函数的内容。

5.3.5 在文章上方显示欢迎语

最关键的部分是
site_greeting_display_before_content 函数。它通过 add_filter( 'the_content', … ) 挂到 WordPress 的 the_content 钩子上——这个钩子在 WordPress 输出文章正文时触发。函数里先判断 is_single()(是不是单篇文章),再读取欢迎语,非空就在正文前面拼一段 HTML。注意 esc_html( $greeting ) 这一步,它把欢迎语里的特殊字符转义,是防 XSS 的关键。

5.4 在 WordPress 后台启用插件

代码生成好之后,还需要在 WordPress 后台「启用」插件,它才会真正生效。打开浏览器访问你的本地 WordPress 后台(Local 用户点「WP Admin」按钮),用管理员账号登录。

在左侧菜单点「插件 → 已安装的插件」,你会看到列表里多了一个「Site Greeting」。点击它下方的「启用」链接,状态变成蓝色「已启用」。到这一步,插件就开始工作了。

接着在左侧菜单点「设置」,会看到最下方多了一项「欢迎语设置」。点进去,在输入框里填一句欢迎语,列如「感谢你阅读这篇文章,希望对你有协助!」,点「保存更改」。

5.5 测试效果

目前去前台验证效果。在 WordPress 后台左侧点「文章 → 写文章」,随意写一篇测试文章,标题和内容随意填,点「发布」。然后点「查看文章」,浏览器会打开这篇文章的前台页面。

如果一切正常,你会在文章正文上方看到一条浅蓝色背景的横条,里面显示你刚才设置的欢迎语。祝贺你,第一个由 Codex 帮你写的 WordPress 插件成功运行了!

[注意] 看不到欢迎语怎么办

1. 检查插件是否已「启用」(后台插件列表里状态应为蓝色「已启用」)。

2. 检查欢迎语是否真的保存了(重新进设置页看输入框有没有内容)。

3. 确认你访问的是单篇文章页(网址含 /p= 或文章 slug),不是首页或归档页。

4. 部分主题可能用了自定义内容输出方式,绕过了 the_content 钩子,可换用官方默认主题(如 Twenty Twenty-Four)测试。

第六章 实战案例二:用 Codex 创建自定义短代码

插件搞定之后,我们再做一个更轻量、更常用的功能——短代码(Shortcode)。短代码是 WordPress 里一种「在文章里插入动态内容」的机制,形如 [my_shortcode param=「value」],写文章时敲几个字母就能插入复杂内容(列如按钮、卡片、数据图表)。本章带你用 Codex 做一个「文章卡片短代码」,可以在任意文章里插入一张指向其他文章的精美卡片。

6.1 什么是短代码?

短代码是 WordPress 提供的一种「占位符」机制。你在文章编辑器里写 这样的方括号语法,WordPress 在前台展示文章时,会自动把这个方括号替换成对应的实际内容(列如一张图片画廊)。短代码的好处是:写文章时不用切换到 HTML 模式,也不用懂代码,敲几个字母就能插入复杂组件。

WordPress 自带了不少短代码(如 、、),但许多时候你需要自定义的短代码——列如「插入一个产品卡片」、「插入一个作者简介框」、「插入一个最新文章列表」。这种自定义短代码,正是 Codex 最擅长帮你生成的。

6.2 让 Codex 生成短代码

在 Codex 交互界面输入下面这段需求。注意我们这次让 Codex 把短代码功能也做成一个独立插件(而不是塞进主题),这样切换主题时短代码依然可用,是更规范的做法:

text

请在 wp-content/plugins/ 下创建一个名为 post-card-shortcode 的插件。

功能需求:
1. 插件主文件:post-card-shortcode.php
2. 注册一个短代码 ,支持参数 id(指定文章 ID)
3. 用法示例:在文章里写 ,前台显示一张指向 ID=123 文章的卡片
4. 卡片样式:左侧缩略图(用 get_the_post_thumbnail 获取),右侧标题(带链接)+ 摘要(用 get_the_excerpt 获取)
5. 如果传入的 id 不存在或文章未发布,显示”文章不存在”提示
6. 卡片用纯 CSS 实现,样式通过 wp_head 钩子内联输出(避免依赖外部 CSS 文件)
7. 所有输出必须经过 esc_url、esc_html、esc_attr 转义
8. 文本域:post-card-shortcode

请按 WordPress Coding Standards 编写,文件顶部加标准插件头部注释。

Codex 生成完成后,会创建
wp-content/plugins/post-card-shortcode/post-card-shortcode.php 文件。生成的代码大致结构如下(实际内容可能略有差异):

php

<?php
/**
* Plugin Name: Post Card Shortcode
* Description: 用 在文章中插入文章卡片
* Version: 1.0
* Author: Your Name
* Text Domain: post-card-shortcode
*/

if ( ! defined( 'ABSPATH' ) ) {
exit;
}

/**
* 注册短代码
*/
function pcs_register_shortcode( $atts ) {
$atts = shortcode_atts( array(
'id' => 0,
), $atts, 'post_card' );

$post_id = absint( $atts['id'] );
if ( ! $post_id ) {
return '<p>文章不存在</p>';
}

$post = get_post( $post_id );
if ( ! $post || $post->post_status !== 'publish' ) {
return '<p>文章不存在</p>';
}

$permalink = get_permalink( $post );
$title = get_the_title( $post );
$excerpt = get_the_excerpt( $post );
$thumbnail = get_the_post_thumbnail( $post_id, 'thumbnail',
array( 'class' => 'pcs-card-thumb' ) );

if ( empty( $excerpt ) ) {
$excerpt = wp_trim_words( $post->post_content, 30, '…' );
}

ob_start();
?>
<div>
<div><?php echo $thumbnail; ?></div>
<div>
<h4>
<a href=”<?php echo esc_url( $permalink ); ?>”>
<?php echo esc_html( $title ); ?>
</a>
</h4>
<p><?php echo esc_html( $excerpt ); ?></p>
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'post_card', 'pcs_register_shortcode' );

/**
* 输出卡片样式
*/
function pcs_enqueue_styles() {
if ( is_single() || is_page() ) {
?>
<style>
.pcs-card {
display: flex;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
margin: 20px 0;
max-width: 600px;
background: #fff;
}
.pcs-card-thumb {
flex: 0 0 150px;
overflow: hidden;
}
.pcs-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pcs-card-body {
padding: 16px;
flex: 1;
}
.pcs-card-title {
margin: 0 0 8px;
font-size: 18px;
}
.pcs-card-title a {
color: #2176AE;
text-decoration: none;
}
.pcs-card-title a:hover {
text-decoration: underline;
}
.pcs-card-excerpt {
color: #666;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.pcs-card-error {
color: #c00;
font-style: italic;
}
</style>
<?php
}
}
add_action( 'wp_head', 'pcs_enqueue_styles' );

6.3 在文章中使用短代码

代码生成后,去 WordPress 后台「插件」列表里启用「Post Card Shortcode」。然后做下面几步测试:

● 先发布两篇测试文章(文章 A 和文章 B),文章 A 设置一张特色图片(编辑器右下角「特色图片」区域上传)。

● 记下文章 A 的 ID:在后台「文章 → 所有文章」列表里,把鼠标悬停在文章 A 标题上,浏览器底部状态栏会显示一个网址,其中 post=后面的数字就是 ID。

● 打开文章 B 的编辑界面,在正文里任意位置写 (把数字替换成真实 ID)。

● 更新文章 B,然后点「查看文章」打开前台。

如果一切正常,文章 B 的正文里会出现一张卡片:左侧是文章 A 的特色图片,右侧是文章 A 的标题(可点击跳转)和摘要。这就是短代码的威力——后来在任何文章里,只要敲 ,就能插入一张精美的文章推荐卡片,完全不用碰 HTML 和 CSS。

[小贴士] 短代码的妙用

短代码是 WordPress 里最灵活的内容组件机制。掌握它的原理后,你可以让 Codex 帮你做出各种短代码:作者名片、最新文章列表、产品展示卡、价格表、视频嵌入卡等等。每个短代码都是一次性的开发投入,但写文章时可以无限次复用。

第七章 实战案例三:用 Codex 调用 WordPress REST API

前两个案例都是「在 WordPress 内部」做事,本章我们做一个「从外部访问 WordPress」的案例——调用 WordPress REST API。REST API 是 WordPress 提供的一组 HTTP 接口,外部程序(手机 App、其他网站、自动化脚本)可以通过它读写 WordPress 的文章、用户、评论等数据。本章带你用 Codex 写一个独立的 Node.js 脚本,从你的本地 WordPress 拉取最新 5 篇文章并打印出来。

7.1 什么是 REST API?

REST API 是一种「用 HTTP 协议交换数据」的标准方式。简单说,你向一个特定网址发请求,服务器返回一段 JSON 格式的数据。列如访问 http://你的网站/wp-json/wp/v2/posts,WordPress 会返回最新 10 篇文章的 JSON 数据(包含标题、内容、作者、发布时间等)。这种机制让 WordPress 不只是「网站」,还能作为「数据源」被其他程序消费。

WordPress REST API 默认是开启的,不需要额外配置。但出于安全思考,写操作(创建文章、修改文章)需要认证,读操作(获取文章列表)一般不需要。本章案例只做读操作,所以无需额外配置。

Codex 接入WordPress完全教程

图 7-1 REST API 数据流:外部脚本发 HTTP 请求 → WordPress 返回 JSON → 脚本解析展示

7.2 用 Codex 生成调用代码

这次我们让 Codex 在 WordPress 项目目录之外创建一个独立的 Node.js 脚本。先在电脑上随意建一个文件夹(列如 D:codex-projects 或 ~/codex-projects),用命令行 cd 进去,然后启动 codex。在 Codex 交互界面输入下面这段需求:

text

请创建一个 Node.js 脚本文件 fetch-posts.js,功能要求:

1. 用 Node.js 内置的 fetch API(Node 18+ 自带,不要用 axios)
2. 向 WordPress REST API 发 GET 请求,地址是:

http://localhost:10003/wp-json/wp/v2/posts?per_page=5

(端口号 10003 请根据我的实际 Local 站点端口调整)
3. 解析返回的 JSON,遍历每篇文章,打印:
– 文章 ID
– 标题(注意 REST API 返回的标题是 rendered HTML,需要简单清理 HTML 标签)
– 发布日期(格式化为 YYYY-MM-DD)
– 链接(link 字段)
4. 加上错误处理:网络错误或 HTTP 非 200 状态时打印友善提示
5. 代码顶部加注释说明用法

请同时创建一个 package.json,声明项目名和 Node 版本要求。

Codex 会生成两个文件:fetch-posts.js 和 package.json。fetch-posts.js 的内容大致如下:

javascript

/**
* fetch-posts.js
* 从 WordPress REST API 拉取最新 5 篇文章并打印
* 用法:node fetch-posts.js
*/

const WP_API_URL = '
http://localhost:10003/wp-json/wp/v2/posts?per_page=5';

/**
* 清理 HTML 标签,返回纯文本
*/
function stripHtml( html ) {
return html.replace( /<[^>]*>/g, '' ).trim();
}

/**
* 格式化日期为 YYYY-MM-DD
*/
function formatDate( dateString ) {
const d = new Date( dateString );
const year = d.getFullYear();
const month = String( d.getMonth() + 1 ).padStart( 2, '0' );
const day = String( d.getDate() ).padStart( 2, '0' );
return `${year}-${month}-${day}`;
}

async function main() {
console.log( '正在从 WordPress 拉取最新文章…' );
console.log( 'API 地址:' + WP_API_URL );
console.log( '—' );

try {
const response = await fetch( WP_API_URL );

if ( ! response.ok ) {
throw new Error( `HTTP 错误:${response.status} ${response.statusText}` );
}

const posts = await response.json();

if ( posts.length === 0 ) {
console.log( 'WordPress 上还没有文章。' );
return;
}

posts.forEach( ( post, index ) => {
console.log( `#${index + 1} ID: ${post.id}` );
console.log( ` 标题:${stripHtml( post.title.rendered )}` );
console.log( ` 日期:${formatDate( post.date )}` );
console.log( ` 链接:${post.link}` );
console.log( '—' );
} );

console.log( `共拉取 ${posts.length} 篇文章。` );
} catch ( error ) {
console.error( '❌ 拉取失败:' + error.message );
console.error( '请检查:' );
console.error( '1. WordPress 站点是否正在运行' );
console.error( '2. API 地址和端口是否正确' );
console.error( '3. 网络是否正常' );
process.exit( 1 );
}
}

main();

package.json 内容大致如下:

json

{
“name”: “wp-rest-api-demo”,
“version”: “1.0.0”,
“description「: 」从 WordPress REST API 拉取文章的演示脚本”,
“main”: “fetch-posts.js”,
“scripts”: {
“start”: “node fetch-posts.js”
},
“engines”: {
“node”: “>=18.0.0”
}
}

7.3 测试 API 调用

代码生成好之后,先确认你的本地 WordPress 站点正在运行(Local 里站点状态应为绿色「Running」)。然后确认 API 地址里的端口号——在 Local 站点详情面板里看「Site Domain」或「Port」,列如显示 localhost:10003,那么 API 地址就是
http://localhost:10003/wp-json/wp/v2/posts。如果 Codex 生成的代码里端口号不对,用文本编辑器改一下。

在命令行(确保在 fetch-posts.js 所在目录)执行:

bash

node fetch-posts.js

如果你的 WordPress 上已经有几篇文章,你会看到类似下面的输出:

text

正在从 WordPress 拉取最新文章…
API 地址:
http://localhost:10003/wp-json/wp/v2/posts?per_page=5


#1 ID: 5
标题:测试文章一
日期:2026-07-28
链接:http://localhost:10003/?p=5

#2 ID: 1
标题:世界,你好!
日期:2026-07-27
链接:http://localhost:10003/?p=1

共拉取 2 篇文章。

看到这样的输出,说明你的 WordPress REST API 工作正常,外部程序已经能成功读取 WordPress 数据了。这意味着你可以基于这套 API 做许多事:用 React/Vue 做一个独立的前端、写一个手机 App、做定时同步脚本、做数据分析等等。

[小贴士] REST API 的应用场景

REST API 让 WordPress 从「网站」升级为「数据后端」。常见用法:1) 用 React/Vue/Next.js 做独立前端,WordPress 只负责内容管理;2) 写手机 App,从 WordPress 拉文章展示;3) 做定时备份脚本,每天拉取所有文章存档;4) 跨站同步,把 A 网站的文章推送到 B 网站。

第八章 调试与最佳实践

前面三章实战都假设一切顺利,但现实开发中你必定会遇到报错、效果不对、Codex 理解偏差等情况。本章教你如何排查问题、如何让 Codex 帮你修代码、以及如何用 Git 管理代码版本,让你从「会用 Codex」升级到「用稳 Codex」。

8.1 Codex 给的代码报错了怎么办?

Codex 生成的代码偶尔会有 bug,列如函数名拼错、钩子名写错、PHP 语法错误等。遇到报错时千万不要慌,按下面三步排查:

8.1.1 第一步:看错误信息在哪里

WordPress 报错分两类:后台报错(你访问后台时屏幕上出现红色错误提示)和前台报错(访问网站前台时白屏或显示错误)。无论哪种,错误信息里一般会包含三要素:错误类型(如 Parse error、Fatal error)、文件路径(哪个 PHP 文件出错)、行号(第几行)。把这三要素记下来。

8.1.2 第二步:开启 WP_DEBUG 看详细错误

默认情况下 WordPress 会隐藏错误细节(出于安全思考)。开发时我们需要打开调试模式。用文本编辑器打开 WordPress 根目录的 wp-config.php 文件,找到 define( 'WP_DEBUG', false ); 这一行,改成下面三行:

php

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 错误写入 wp-content/debug.log
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示(避免破坏布局)

保存后刷新出错的页面,然后打开 wp-content/debug.log 文件,最新的错误信息就在文件末尾。把这段错误信息复制下来,准备发给 Codex 让它修。

8.1.3 第三步:让 Codex 修复

回到 Codex 交互界面,把错误信息粘贴进去,并附上你的诉求。列如:

text

我在启用 site-greeting 插件后,访问文章页时出现以下错误:

Fatal error: Uncaught Error: Call to undefined function
site_greeting_display_before_content()

in
/wp-content/plugins/site-greeting/site-greeting.php on line 80

请帮我排查缘由并修复。

Codex 会重新读取代码、分析错误、定位问题、给出修复方案。它可能会直接修改文件,也可能先解释缘由再问你确认。对于「函数未定义」这类错误,常见缘由是函数名拼写不一致或函数定义在调用之后,Codex 一般能很快定位。

8.2 如何让 Codex 修改已有代码?

Codex 不仅能从零写代码,也能修改已有代码。修改时提议遵循「小步快跑」原则——每次只让它改一个明确的小点,而不是大段重写。下面是几个常见的修改场景和对应的提问模板:

8.2.1 修改样式

列如你觉得前面做的欢迎语横条颜色太浅,想改成更醒目的橙色。直接告知 Codex:

text

请修改
wp-content/plugins/site-greeting/site-greeting.php 文件,


site_greeting_display_before_content 函数里欢迎语横条的

背景色从 #f0f5fa 改成 #FFF3E0,左边框颜色从 #2176AE 改成 #FF9800,
文字颜色改成 #E65100。

8.2.2 增加功能

列如你想给欢迎语加一个「只在特定分类的文章里显示」的功能:

text

请修改 site-greeting 插件,新增一个设置项”只在指定分类显示”,
管理员可以在设置页选择一个或多个分类(用 select 多选)。
只有当前文章属于被选分类时,才显示欢迎语;否则不显示。
分类获取用 get_terms(),文章分类判断用 has_category()。

8.2.3 重构优化

如果代码越来越乱,可以让 Codex 帮你重构:

text

请阅读
wp-content/plugins/post-card-shortcode/post-card-shortcode.php,

把内联 CSS 抽离到单独的 css/style.css 文件,用 wp_enqueue_style 加载。
其他逻辑保持不变。

8.3 版本控制:用 Git 管理你的代码

Codex 改代码时偶尔会「改坏」——本来能跑的代码改完反而不能跑了。要避免这种损失,强烈提议用 Git 做版本控制。Git 是程序员的标准工具,能帮你「保存代码历史」,任何时候都能回滚到之前能用的版本。

如果你没装 Git,去 https://git-scm.com 下载安装。装好后,在 WordPress 根目录的命令行里执行下面三条命令初始化仓库:

bash

git init
git add wp-content/themes wp-content/plugins AGENTS.md
git commit -m “初始化:保存当前自定义主题和插件”

之后每次让 Codex 改完代码、确认能跑之后,再执行一次提交:

bash

git add
wp-content/plugins/site-greeting

git commit -m “feat: 新增欢迎语插件”

如果某次改完发现网站崩了,可以一键回滚到上一个版本:

bash

# 查看历史版本
git log –oneline

# 回滚到上一个版本(保留文件改动)
git reset –hard HEAD~1

[注意] 不要把整个 WordPress 目录都纳入 Git

WordPress 核心文件(wp-admin、wp-includes、wp-config.php 等)不要纳入 Git,只把 wp-content/themes 和 wp-content/plugins 纳入即可。提议在 WordPress 根目录建一个 .gitignore 文件,写上 wp-admin/、wp-includes/、wp-config.php、wp-content/uploads/ 等忽略项。

8.4 安全注意事项

用 Codex 开发 WordPress 时,有几条安全红线必须守住,否则可能给黑客可乘之机:

永远不要把 API Key 写进代码:OpenAI API Key、第三方服务密钥等敏感信息,绝不能硬编码在 PHP 文件里(会被 Git 提交、被黑客扫描)。应该用 wp-config.php 里的 define() 定义常量,代码里读取常量。

所有用户输入必须清理:用 $_POST、$_GET 接收的数据,必须经过 sanitize_text_field、sanitize_textarea_field、absint 等函数清理后再使用。

所有输出必须转义:输出到 HTML 的数据用 esc_html,输出到属性用 esc_attr,输出到 URL 用 esc_url,输出到 JavaScript 用 esc_js。

数据库查询必须用 $wpdb:禁止直接拼 SQL 字符串(容易被 SQL 注入),用 $wpdb->prepare() 准备语句。

权限检查不能省:任何涉及修改数据的操作(保存设置、删除文章等),必须用 current_user_can( 'manage_options' ) 检查权限。

开发完先在本地测:任何代码改动先在本地 WordPress 跑通,再思考部署到线上。线上线下的 PHP 版本、插件环境可能不同。

好消息是,只要你按本教程的方式让 Codex 写代码(在 AGENTS.md 里写明这些规范),Codex 生成的代码会自动遵守这些安全规范。但作为开发者,你依旧需要看懂代码、能识别明显的问题,不能盲目信任 AI 输出。

第九章 常见问题解答(FAQ)

本教程最后整理一份小白最容易遇到的问题清单,每个问题都给出排查思路和解决方案。提议你遇到问题时先来这里查一遍,能省下大量折腾时间。

Q1:Codex 安装失败,提示网络错误怎么办?

Codex 通过 npm 安装,npm 默认源在国外,国内访问不稳定。解决方法:切换到国内镜像源后再装。在命令行执行 npm config set registry
https://registry.npmmirror.com,然后重新执行 npm install -g @openai/codex。如果还是失败,尝试用 yarn 或 pnpm 替代 npm 安装,或者使用代理。

Q2:codex 命令提示「不是内部或外部命令」怎么办?

这是 Windows 用户最常见的问题,缘由是 npm 全局安装路径没加入系统 PATH 环境变量。解决方法:打开命令行执行 npm config get prefix 查看全局安装路径(一般是 C:Users你的名字AppDataRoaming
pm),然后把这个路径加入系统环境变量 PATH。具体操作:右键「此电脑」→属性→高级系统设置→环境变量→系统变量里找 Path→编辑→新建→粘贴路径→确定。重启命令行窗口再试。

Q3:Codex 启动后报 401 或 403 错误怎么办?

401/403 表明 OpenAI API Key 无效或权限不足。排查步骤:1) 确认 Key 是以 sk- 开头的完整字符串,没有多余空格;2) 确认 Key 没有过期或被吊销(登录 OpenAI 后台查看);3) 确认账号绑定了支付方式(未绑定可能无法调用);4) 确认环境变量 OPENAI_API_KEY 设置正确(用 echo $OPENAI_API_KEY 或 echo %OPENAI_API_KEY% 检查)。

Q4:Codex 生成的代码不能用怎么办?

AI 生成的代码偶尔会有 bug,这是正常现象。处理思路:1) 先开启 WP_DEBUG 看具体错误(参考第 8.1 节);2) 把完整错误信息复制给 Codex,让它修复;3) 如果 Codex 反复修不好,把代码贴给 ChatGPT 网页版对比一下,或者搜索错误关键词;4) 实在不行,回滚到上一个 Git 版本,重新描述需求让 Codex 重写。

Q5:Codex 改了我的代码,怎么撤销?

如果你用 Git 管理代码(强烈推荐,见第 8.3 节),用 git checkout 文件路径 可以撤销单个文件的修改,用 git reset –hard HEAD~1 可以回滚整个项目到上一个提交。如果没用 Git,可以看看 Codex 是否有「撤销」命令(不同版本支持不同),或者从备份恢复。养成用 Git 的习惯,能避免 90% 的「改坏了」灾难。

Q6:本地 WordPress 突然打不开了怎么办?

Local 用户最常见的缘由是站点被停了。打开 Local 应用,看站点状态是不是灰色「Stopped」,是的话点「Start site」重启。如果状态是绿色但浏览器还是打不开,可能是端口冲突——Local 默认用 80 端口,如果电脑上其他程序(如 Skype、IIS)也占用了 80,会冲突。在 Local 站点设置里改用其他端口(如 8080)即可。

Q7:插件启用后网站白屏了怎么办?

白屏一般是 PHP 致命错误导致。解决步骤:1) 用 FTP 或文件管理器进入 wp-content/plugins/,把出问题的插件文件夹改名(如 site-greeting 改成 site-greeting.bak),WordPress 会自动停用该插件,网站恢复;2) 然后开启 WP_DEBUG(见 8.1.2),把插件名改回来,刷新页面看具体错误;3) 把错误发给 Codex 修复,或自己手动改代码。

Q8:Codex 调用太慢,能不能加速?

Codex 速度取决于 OpenAI 模型响应速度,受网络和当前负载影响。几个加速小技巧:1) 复杂任务拆成多个小任务,每轮只让它做一件事,单次响应更快;2) 在 AGENTS.md 里写清楚项目结构,减少 Codex 探索时间;3) 避免在高峰时段(北京时间晚上 8-11 点)调用;4) 如果网络慢,思考使用代理或换网络。

Q9:能不能让 Codex 直接修改线上 WordPress?

技术上可以,但强烈不推荐。直接改线上代码风险极高——一个语法错误就能让整个网站宕机,影响真实访客。正确做法是:1) 本地开发并测好;2) 用 Git 提交版本;3) 通过 Git push 或 FTP 上传到线上;4) 在线上后台启用插件并再次测试。如果必定要直接改线上,务必先备份(数据库 + 文件),并选在访客最少的时段操作。

Q10:学完本教程后,下一步该学什么?

本教程带你入门了 Codex + WordPress 的基本玩法,但要成为真正的高手,提议继续深入:1) 系统学习 PHP 语言基础(变量、函数、类、数组操作),能让你看懂 Codex 写的代码;2) 阅读 WordPress 官方开发者文档(developer.wordpress.org),了解插件/主题开发规范;3) 学习 JavaScript 和 React,由于 WordPress 后台编辑器(Gutenberg)是基于 React 的;4) 学习 CSS 和响应式设计,让前端更美观;5) 加入 WordPress 中文社区(如 WordPress 中文论坛、各种 WP 开发者群),和同行交流。

最重大的是:保持动手习惯。每学一个新概念,就用 Codex 帮你做一个小项目实践,比单纯看教程进步快十倍。Codex 是你最好的「陪练」——它不会嫌你问题蠢,24 小时随叫随到,用它来加速你的学习曲线吧。

结语

走到这里,你已经完成了从零开始用 Codex 接入 WordPress 的完整旅程——从环境搭建、Codex 安装、本地 WordPress 部署,到三个实战案例(自定义插件、短代码、REST API 调用),再到调试技巧和最佳实践。这套流程跑通之后,你已经具备了用 AI 助手开发 WordPress 站点的基本能力。

AI 编程助手正在重塑软件开发的门槛。过去你需要花几个月学 PHP、读 WordPress 文档、踩无数坑才能做出的功能,目前借助 Codex,一个有想法、能描述需求的人就能做到。但请记住:AI 是工具不是替代品,它放大的是你的判断力——你越懂 WordPress、越懂安全、越懂用户需求,Codex 给你的产出质量就越高。

希望这本教程能成为你 WordPress 开发之路的起点。祝你在 AI 时代写出越来越多让自己骄傲的网站功能!

© 版权声明

相关文章

1 条评论

none
暂无评论...