WordPress 开发课程笔记
Udemy《Become a WordPress Developer: Unlocking Power With Code》整理，从零构建 fictional-university 主题 + 插件开发 + Gutenberg Block 开发，按课程 Section 分类。
💡 WordPress 开发课程笔记怎么读
概览
- Udemy WordPress Developer 课程整理，从「开发环境设置」「主题基础」一路串到 THE LOOP、自定义文章类型、REST API、用户角色权限，再到插件开发和 Gutenberg Block 开发
- 整门课构建的是同一个 fictional-university 主题和同一批插件，后面的讲座会直接修改前面讲座建立的文件，不是互相独立的 Section 合集
阅读建议
- 想跟着从零构建一遍：必须照 Section 顺序（S01 → S31）、同一 Section 内照 EP 编号顺序读，跳着读会遇到文件对不上、前面步骤没做的情况
- 已经学完一遍、只想回顾某个技术点：用左侧 Section 分类直接跳到对应笔记当参考查，比如只想重看 Gutenberg Block 开发那几个 Section
课程介绍与路线图
课程整体路线图与学习目标介绍
001EP001. “2024 课程路线图（2024 Roadmap and Course Intro）” 002EP002. “课程整体概览（Big Picture Course Overview）”开发环境设置
本地开发环境搭建
003EP003. “建立本地开发环境（Local by Flywheel）” 005EP005. “学习这门课的不同路径” 006EP006. “初次接触 PHP（experiment.php 实验）”主题基础与本地域名
WordPress 主题基础结构与本地域名设置
008EP008. “创建 WordPress 主题（fictional-university-theme 诞生）” 009EP009. “什么是 Function” 010EP010. “什么是 Array”THE LOOP
WordPress 核心机制 THE LOOP 详解
011EP011. “The Loop 基础：have_posts() 与 the_post()” 012EP012. “全局 Header/Footer 与 functions.php 载入 CSS” 014EP014. “转换静态站为 WordPress 主题：下载 university-static 参考项目” 015EP015. “静态 HTML/CSS 整合进主题：Header、Footer、CSS、JS 与图片路径”PAGE TEMPLATE
页面模板（Page Template）开发
016EP016. “通用内页模板 page.php” 017EP017. “父子页面与动态面包屑（Post ID / wp_get_post_parent_id）” 018EP018. “为什么有些 PHP 函数要 echo，有些不用” 019EP019. “动态子页面链接菜单（wp_list_pages / get_pages）” 020EP020. “杂项调整与响应式 Meta 标签” 021EP021. “动态导航菜单演示（register_nav_menu / wp_nav_menu）” 022EP022. “用 is_page() 让当前菜单项高亮”BLOG
博客功能相关开发
023EP023. “front-page.php 与静态首页拆分” 024EP024. “博客分页与 single.php 美化” 025EP025. “archive.php 归档模板” 026EP026. “WP_Query 自定义查询” 027EP027. “博客链接修复与导航高亮”CUSTOM POST TYPE 入门
自定义文章类型（Custom Post Type）入门
028EP028. “注册 Event 自定义文章类型（Must-Use Plugin）” 029EP029. “让 Event 支持模块编辑器（show_in_rest）” 030EP030. “首页拉取 Event、建立 single-event.php 与 archive-event.php” 031EP031. “Excerpt 摘要支持、View All Events 链接与头部导航高亮” 032EP032. “用 ACF 插件加 Event Date 自定义字段” 034EP034. “用 meta_key / orderby / meta_query 按日期排序并过滤过去的活动” 035EP035. “用 pre_get_posts 调整默认查询（而不是重写归档页）” 036EP036. “新建 Past Events 页面模板，并修复自定义查询下的分页”PROGRAM POST TYPE 与关系
PROGRAM 自定义文章类型与文章间关系
037EP037. “建立 Program 文章类型与关联字段” 038EP038. “双向显示 Event 与 Program 的关联” 039EP039. “Program 页面样式收尾与导航链接”PROFESSOR POST TYPE
PROFESSOR 自定义文章类型
041EP041. “建立 Professor 文章类型并与 Program 建立关联” 042EP042. “特色图片（Featured Image）与自定义图片尺寸” 043EP043. “套用自定义图片尺寸与手动裁切” 044EP044. “用 ACF 字段让页面横幅（Page Banner）动态化”自定义字段与 PHP WARNING
自定义字段与常见 PHP Warning 处理
046EP046. “抽出可复用的 pageBanner() 函数” 047EP047. “修复 Undefined array key 警告（isset() 用法）” 048EP048. “Page Banner 加两个防护条件（避免 Archive 页错误抓图）” 049EP049. “把 pageBanner() 套用到项目里剩下的所有模板” 050EP050. “用 get_template_part() 拆出 content-event.php 局部模板”JAVASCRIPT 入门
JavaScript 基础入门（配合主题开发）
051EP051. “JavaScript 构建工具入门：npm + @wordpress/scripts” 053EP053. “导入课程完成品网站（All in One WP Migration）”GOOGLE MAPS 互动地图
Google Maps 互动地图整合
055EP055. “新建 Campus 文章类型 + 申请 Google Maps API Key” 056EP056. “搭建 Campus 归档页 + 接入交互式 Google Map” 057EP057. “Campus 信息窗口 + 单页模板 + 与 Program 的双向关联” 058EP058. “清理 single-campus.php 遗留代码 + 修复归档页只查 10 篇的问题”LIVE SEARCH AJAX
用 AJAX 实现即时搜索（Live Search）
059EP059. “创建 Search 模块与首个 JS 类” 061EP061. “搜索 Overlay 的开关逻辑” 063EP063. “键盘快捷键与禁止背景滚动” 064EP064. “输入防抖与 setTimeout 倒数” 065EP065. “渲染结果区域与 Loading 动画”LIVE SEARCH（续）
Live Search 功能延续与优化
067EP067. “第一次调用 REST API：$.getJSON() 试水” 068EP068. “用模板字符串（template literal）生成真正的搜索结果 HTML” 069EP069. “零结果提示 + wp_localize_script() 让请求网址不再写死” 070EP070. “搜索 Overlay 的几个体验细节优化” 071EP071. “扩展成多文章类型搜索（posts + pages 嵌套请求版）” 072EP072. “用 $.when().then() 重构成并行请求 + 错误处理”REST API 自定义
自定义 REST API 端点开发
073EP073. “给已有 REST 字段加自定义属性（register_rest_field）” 074EP074. “从零建一个完全自定义的 REST 路由（register_rest_route）” 075EP075. “让自定义路由返回真实的 WP_Query 数据” 076EP076. “给自定义路由加搜索关键词参数（URL parameter + sanitize_text_field）” 077EP077. “自定义路由扩展为多 post type 分组搜索”前端 OVERLAY 串接自定义 API
前端 Overlay 弹层串接自定义 API
078EP078. “搜索结果改用自定义 API，重写三栏布局” 079EP079. “搜索结果：Professors 卡片与 Events 摘要样式” 081EP081. “按关联关系搜索（Professor 硬编码版）” 082EP082. “按关联关系搜索：动态化 + 修复正文误命中” 083EP083. “按关联关系搜索：完成 Events 与 Campuses，搜索 Overlay 收尾” 084EP084. “可选：jQuery-free 版 Search.js（原生 JS + Axios）”用户角色与权限
用户角色与权限管理
087EP087. “自定义用户角色：Members 插件与自定义文章类型权限” 088EP088. “开放注册、登出按钮与 Subscriber 重定向” 089EP089. “自定义登录页：Logo 链接、加载主题 CSS、页面标题”MY NOTES 前端功能
"我的笔记"前端功能开发
090EP090. “My Notes 页面、Note 文章类型与笔记列表” 091EP091. “My Notes JS 模块与删除按钮点击测试” 092EP092. “REST API 删除请求与 Nonce 身份验证” 094EP094. “动态删除 ID、实时移除笔记与进入编辑模式” 095EP095. “编辑/取消切换与保存到 REST API” 096EP096. “新建笔记表单与 REST API 创建请求” 097EP097. “新笔记真实数据渲染与事件委托修复” 098EP098. “Subscriber 笔记权限与服务端强制私密” 099EP099. “去除 Private 前缀、权限收紧与 XSS 防护” 100EP100. “每用户笔记数量上限与超限提示” 102EP102. “可选：jQuery-free 版 MyNotes.js（原生 JS + Axios）”LIKE / HEART 功能
点赞/收藏（Like / Heart）功能开发
103EP103. “Like 文章类型与教授页点赞数显示” 104EP104. “Like JS 模块与点击分发逻辑” 105EP105. “自定义 REST 路由与前后端联调” 106EP106. “程序化创建文章与动态教授 ID 传递” 107EP107. “登录校验、防重复点赞与目标类型校验” 109EP109. “点赞实时更新与删除赞的服务端逻辑” 111EP111. “可选：jQuery-free 版 Like.js（原生 JS + Axios）”网站上线部署
网站上线部署流程
112EP112. “网站上线部署章节概览” 113EP113. “主机选型对比与 DreamHost 推荐理由” 114EP114. “DreamHost 建站：子域名与 WordPress 安装” 115EP115. “用 All in One WP Migration 迁移整站” 116EP116. “Git 基础：初始化仓库与 .gitignore” 117EP117. “SSH 命令行访问与 WP-CLI 初探” 118EP118. “裸仓库与 post-receive Hook 实现 git push 部署” 119EP119. “SSH Key 免密登录与自动化推送收尾”SLIDESHOW（旧版参考）
幻灯片（Slideshow）功能，旧版参考
121EP121. “额外挑战：让首页 Slideshow 可后台编辑” 122EP122. “WP-CLI 入门：本地一键开启命令行”插件开发 CH1：PHP 基础
插件开发 CH1：PHP 基础
123EP123. “插件开发三章节总览” 124EP124. “第一个插件：插件头信息与 the_content 过滤器” 125EP125. “后台设置页面与用 PHP 类避免命名冲突” 126EP126. “WordPress Settings API：注册设置与自动生成表单” 127EP127. “设置表单收尾：回显、复用 HTML 函数与自定义校验” 128EP128. “核心功能实现：字数统计与预估阅读时间” 129EP129. “插件国际化：文本域、翻译函数与 Loco Translate” 130EP130. “第二个插件：顶级菜单与子菜单” 131EP131. “自定义 SVG 菜单图标与仅限单页的 CSS” 133EP133. “手动处理表单提交：存取数据与 Nonce 安全校验” 134EP134. “敏感词过滤核心逻辑与 Options 子页收尾”插件开发 CH2：插件里的 JS
插件开发 CH2：插件里的 JavaScript
135EP135. “第一个自定义 Block 类型：registerBlockType 基础” 136EP136. “引入 JSX 与 @wordpress/scripts 构建工具” 137EP137. “Attributes 机制：让 Block 真正可交互” 138-139EP138-139. “Deprecated 版本兼容与动态 Block（用 PHP 渲染）”GUTENBERG BLOCK 入门（block.json）
Gutenberg Block 开发入门（block.json）
141EP141. “Quiz Block 骨架：WordPress 内建组件与 SCSS” 142EP142. “Quiz Block 样式细节收尾” 143EP143. “Quiz Block 交互逻辑：数组类型 Attribute 与不可变更新” 144EP144. “小技巧：新增答案行自动聚焦” 145EP145. “标记正确答案与用 wp.data 锁定保存按钮” 147EP147. “前台入口：第二个构建入口与 React 挂载” 148EP148. “把 attributes 数据从 PHP 传给前台 React” 149EP149. “点击判分与 React useState 管理组件状态” 150EP150. “用 useEffect 实现延迟反馈与答对后锁定” 152EP152. “InspectorControls 侧栏与自定义背景色” 153EP153. “BlockControls 文字对齐与 Block 预览/Description” 154EP154. “用 block.json 注册 Block 与 useBlockProps”新 BLOCK 类型练习
新建 Block 类型练习
155EP155. “新插件起步：用 Starter 模板跳过样板代码” 156EP156. “用 useSelect 在编辑器里查询文章列表” 157EP157. “前台渲染：WP_Query 单篇查询与 HTML 模板拆分” 158-159EP158-159. “自定义 REST 端点复用 PHP 模板做编辑器实时预览” 160EP160. “用 post meta 建立双向关系与 useEffect 清理函数” 161EP161. “用 the_content 过滤器与 meta_query 查反向关系” 162EP162. “JavaScript 多语言翻译：wp.i18n 与 wp_set_script_translations”插件开发 CH3：数据库存储
插件开发 CH3：数据库存储
163EP163. “自定义数据库表章节导论：post meta 为何会慢” 164EP164. “用 dbDelta 建表：activate_ 钩子与 $wpdb” 165EP165. “$wpdb 查询：get_results 与 prepare 防注入” 166-169EP166-169. “构建动态 SQL 查询：URL 参数拼接 WHERE 条件” 171-172EP171-172. “admin-post.php：前台表单增删数据” 173EP173. “把插件模板改成 Block Theme 占位 Block”BLOCK THEME（2024 最佳实践）
Block Theme 2024 最佳实践
175EP175. “Block Theme 与 Full Site Editing 导论” 177EP177. “搭建 Block Theme 骨架：templates 与 WP 核心 Block” 178EP178. “自定义 Block 的理念：何时不该只用核心 Block” 179-180EP179-180. “主题内自建 Block：复用传统主题 CSS 到编辑器” 182EP182. “InnerBlocks 嵌套子区块与 allowedBlocks 限制” 183EP183. “用 PHP 类批量注册 Block + 新建 generic-heading” 184EP184. “RichText 富文本字段与 BlockControls 工具栏按钮” 185-186EP185-186. “theme.json 配置内容宽度、调色板与 Block 默认样式” 188EP188. “新建 generic-button 骨架：复用 generic-heading 套路” 189EP189. “LinkControl 链接选择器与 useState 驱动 Popover” 190-191EP190-191. “ColorPalette 颜色选择器与「存名字不存色值」的抽象层” 193EP193. “Banner 改用 PHP render_callback 与 content 参数” 194-196EP194-196. “MediaUpload 背景图选择器与 apiFetch 查特定尺寸 URL” 198EP198. “wp_localize_script 把 PHP 数据传给编辑器 JS” 199-200EP199-200. “PlaceholderBlock 类：纯 PHP 驱动、无需构建的占位 Block” 201-204EP201-204. “三层嵌套 Block 实现幻灯片（slideshow / slide）” 205-207EP205-207. “把编辑器成果导回 index.html 与主题内置默认图” 208EP208. “WP 6.4 改变：Block Theme 单篇内容不再需要 while 循环” 209EP209. “搭建 single/page/blogindex 三个模板与 front-page 拆分” 210-211EP210-211. “批量搭建自定义文章类型模板（archive / single / page）” 213EP213. “allowed_block_types_all 限制编辑器可用 Block” 214-215EP214-215. “customTemplates 注册空白模板与 Block 自由拼装”现代化 BLOCK 开发标准做法
现代化 Block 开发标准做法
216EP216. “为什么以前要自己发明轮子：block.json 时代前的三个痛点” 217EP217. “用 block.json 迁移 Footer：register_block_type_from_metadata” 218EP218. “拆分 edit.js 文件与 useBlockProps 选中态” 219EP219. “迁移 Banner：attributes 搬进 block.json 与 wp_localize_script 给回退图” 220EP220. “迁移 Slide 与 Slideshow：复制近似 Block 起步” 221EP221. “迁移最后两个 Block：无 render.php 场景与模板 class 清理” 222EP222. “清理 package.json 与 npm-run-all 合并构建命令”INTERACTIVITY API
WordPress Interactivity API
223EP223. “Interactivity API 是什么：填补了 WordPress 六年的空白” 224EP224. “用 create-block 脚手架起步，迁移编辑器端旧代码” 225EP225. “data-wp-interactive 核心机制：context 是实例级 state” 226EP226. “wp_interactivity_data_wp_context 自动转换属性与 data-wp-each 循环” 227EP227. “PHP 整理 context 数据结构与 context 逐级合并机制” 228EP228. “data-wp-class 切换 class 与 data-wp-bind--hidden 控制显隐” 229EP229. “callback 处理复杂条件：单一布尔值的限制” 230EP230. “wp_interactivity_state 跨 Block 共享全局状态”网站维护挑战 · 结业
网站维护挑战与结业总结
231EP231. “自动更新几乎是安全防线的全部” 232EP232. “自定义 query var：URL 参数驱动条件内容” 233EP233. “结业挑战：学一个现代前端框架”