SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场wp-theme-dev

wp-theme-dev

前端与建站

查看项目

更新于 10-16 02:03

技能介绍

用途

wp-theme-dev 用于开发 WordPress 主题，目标是使生成的主题符合 WordPress 官方编码规范、WordPress.org 主题审核要求、WCAG 2.1 AA 无障碍标准以及现代 Web 开发最佳实践。其定位是让每个产出的主题在无障碍、安全、可翻译、性能和提交 WordPress.org 方面均达到要求。

主要能力

该技能覆盖主题开发的完整流程：

  • 在写代码前阅读参考资料，包括块主题架构、经典主题架构、无障碍要求、审核要求等参考文件。
  • 确定主题类型：会询问用户想要块主题（推荐）、经典主题还是子主题。
  • 收集需求：设计目标、配色方案、排版、所需功能。
  • 生成脚手架：目录结构、必需文件和 theme.json。
  • 构建模板与样板：每个模板/样板作为单独文件创建。
  • 生成 readme.txt：始终包含符合 WordPress.org 要求的 readme.txt。
  • 交付：询问用户需要下载文件还是自定义路径。

核心原则

  1. 默认使用块主题：除非用户明确要求经典主题，否则始终构建块主题（全站编辑）。块主题使用 HTML 模板文件（而非 PHP 模板文件），通过 theme.json（而非 PHP/CSS）配置设计，支持站点编辑器进行完整可视化编辑，使用区块样板实现可复用布局，使用模板部件处理页眉、页脚、侧边栏。仅在用户特别要求或需要经典主题独有功能时才构建经典主题。

  2. 保持 functions.php 整洁：该文件只应包含主题设置（after_setup_theme 钩子）、资源入队（wp_enqueue_scripts 钩子）、注册区块样板/样板分类/区块样式、注册导航菜单（经典主题）、注册小工具区域（经典主题）、从 inc/ 目录加载额外 PHP 文件。不得在其中放置冗长逻辑、输出 HTML 或复杂功能，额外功能应拆分到 inc/ 目录的文件中。

  3. 无障碍不可妥协：每个主题必须满足 WCAG 2.1 AA 与 WordPress 无障碍要求。关键强制项包括：跳转链接（第一个可聚焦元素、聚焦时可见、跳转到主内容）；键盘导航（所有交互元素可键盘到达与操作、可见焦点指示、焦点顺序符合逻辑阅读顺序）；语义 HTML（使用正确的 HTML5 地标元素，ARIA 地标角色作为补充，正确的标题层级，每页一个 H1，不跳级）；颜色对比度（文本与背景达 4.5:1，大号文本 18px+ 粗体或 24px+ 常规为 3:1，UI 组件与焦点指示达 3:1）；内容链接必须加下划线；表单（所有输入必须有显式 label，不允许仅用占位符作标签，错误状态须可被屏幕阅读器感知）；图片（所有 img 必须有有意义的 alt，装饰性图片用 alt=""）；屏幕阅读器文本（使用 .screen-reader-text 类，用于“阅读更多”链接、仅图标按钮、重复链接文本）；重复链接文本（“阅读更多”须包含文章标题，可视觉隐藏）；媒体（嵌入式媒体不得自动播放，所有媒体须提供控件）。

  4. 安全：转义所有输出（esc_html()、esc_attr()、esc_url()、wp_kses_post()）；净化所有输入（sanitize_text_field()、absint() 等）；表单提交使用 nonce；特权操作前验证并检查权限；禁止对用户数据使用 eval()、base64_decode()，禁止未经净化直接使用 $_GET/$_POST。

  5. WordPress 编码规范：所有函数、类、钩子、句柄加唯一主题前缀（至少 4 个字符）；所有面向用户的字符串可翻译（_()、e()、esc_html()、esc_html_e() 等）；文本域须与主题别名一致；使用 wp_enqueue_script()/wp_enqueue_style()，不得硬编码 script 或 link 标签；使用 WordPress 自带库（如 jQuery），不得自行打包副本；使用压缩文件时须包含原始源码；在 WP_DEBUG 下无 PHP 错误、警告或通知；不使用已弃用的函数或常量。

  6. WordPress.org 主题审核合规：每个主题须符合全部 14 个审核类别。关键规则包括：所有代码、图片、字体和资源使用 GPLv2 或更高版本许可；在 readme.txt 中包含所有打包资源的版权与许可；无用户明确同意不得使用跟踪/远程资源（Google Fonts 例外）；不做插件领域功能（自定义文章类型、短代码、SEO、分析、联系表单）；不劫持管理后台仪表盘，通知须可关闭；主题启用时不重定向；不移除/隐藏管理栏；主题名称不得使用 "WordPress"、"Theme" 或 "Twenty*"；截图须代表主题实际输出，不得是广告；完整的 readme.txt 包含所有必需头部。

  7. 现代 CSS 与性能：使用 CSS 自定义属性（变量）进行主题化，与 theme.json 预设对齐；使用现代布局（CSS Grid 与 Flexbox，不用浮动布局）；使用 clamp() 实现流式响应式排版与间距；使用逻辑属性（margin-inline、padding-block）支持 RTL；移动优先响应式设计，使用 min-width 媒体查询；减少渲染阻塞资源；首屏下方图片和 iframe 使用 loading="lazy"；自定义字体使用 font-display: swap；为隐私/性能优先使用系统字体栈或本地托管字体而非 Google Fonts。

使用方式

触发该技能后，会先阅读相关参考资料，再询问主题类型与需求，随后生成脚手架、模板与样板、readme.txt，最后进入交付环节，询问用户需要下载文件还是写入自定义路径。命名约定上，所有名称从用户提供的主题名派生：主题别名用小写连字符、文本域与别名一致、函数前缀用小写加下划线且至少 4 字符、常量前缀用大写加下划线、类前缀用首字母大写的下划线形式、句柄名用别名加前缀、样板分类用别名前缀、区块样式名用别名前缀。

适用场景

适用于需要从零创建 WordPress 主题、需要符合 WordPress.org 审核与无障碍标准的主题开发，或需要生成完整主题脚手架、模板、样板和 readme.txt 的场景。

限制

资料未提供具体的价格、收费、平台支持范围、实际运行效果或性能数据。资料中关于函数前缀示例等内容存在明显异常文本，未提供其他额外功能细节。

交付前检查清单

资料列出交付前需确认：style.css 包含所有必需头部（主题名、作者、版本、许可证等）；存在完整的 readme.txt 且包含资源致谢；所有输出已转义；所有输入已净化；所有字符串可翻译且文本域正确；所有函数/类/句柄已加前缀（4+ 字符）；存在跳转链接且为第一个可聚焦元素、聚焦时可见；所有交互元素键盘导航可用；所有可聚焦元素有可见焦点指示；标题层级正确（一个 H1，不跳级）；内容链接有下划线；颜色对比度满足 WCAG 2.1 AA（文本 4.5:1，大号文本/UI 3:1）；所有图片有合适的 alt；ARIA 地标存在且重复项有唯一标签；“阅读更多”链接包含文章标题（screen-reader-text）；表单有显式 label；WP_DEBUG 下无 PHP 错误/警告/通知；无已弃用函数；未打包 WP 默认库；无插件领域功能；未经同意无远程资源；启用时无管理后台重定向；资源正确入队（非硬编码）；响应式设计在所有断点可用；通过逻辑属性或 RTL 样式表支持 RTL；许可证为 GPLv2 或更高；截图为 1200×900，代表主题实际输出。