构建一个完整的WordPress网站
只输入一段描述,输出一个完整的区块主题。此技能按顺序运行其他wp-*技能。每个门必须完成后才能开始下一个。
门0:简报(硬停止)
根据用户的描述,编写SITE_BRIEF.md,包含:
- 目的与受众、品牌调性、颜色和字体(若无则建议默认值)。
- 页面列表(默认:首页、关于我们、服务或产品、博客、联系)。
- 功能(联系表单、博客、画廊、商店)。仅包括用户要求的内容。
- 假设条件,编号列出,每个附有默认值。
展示给用户并要求其接受、拒绝或提出建议。停止并等待。
门1:项目设置
- 在一个新文件夹(用户选择的名称)中工作。绝不触碰现有网站的文件。
- 创建一个区块主题:
style.css、theme.json、templates/、parts/(页眉、页脚)、patterns/、assets/、functions.php。 - 使用WordPress核心块和模式。不使用页面构建器,不使用CSS框架。
- 可选本地测试:WordPress Playground或
wp-env(如果可用)。
门2:设计系统(wp-responsive-fluid-design)
在theme.json中定义颜色、流体字号比例和间距令牌。构建页眉、页脚、导航和移动菜单。所有值来源于令牌。
门3:页面和内容
为简报中的每个页面创建模板和模式。使用清晰的占位文本(当知道目的时不要使用Lorem ipsum)和带alt文本的图片。使用语义化HTML:每个页面一个h1。
门4:动效(wp-animated-block-theme)
使用CSS优先添加滚动揭示、悬停和页面过渡效果,然后使用交互性API。所有效果尊重prefers-reduced-motion;内容在无JS情况下仍然可见。仅当请求的效果需要时,才使用wp-gsap-lottie-integration。
门5:检查
wp-motion-performance-audit:修复高优先级问题(触发布局的动画、布局偏移、繁重脚本)。wp-accessible-ui-review:修复高优先级问题(焦点、对比度、标签、标题)。- 在360、768、1024和1440像素宽度下检查:无水平滚动。
- 验证:对PHP文件执行
php -l,对theme.json验证JSON有效性。
门6:交付
在主题文件夹中编写简短的README.md:如何安装(压缩并上传)、如何编辑页面,以及未验证的内容(真实环境Lighthouse、真实设备、屏幕阅读器、托管)。不要声称执行了未运行的内容。除非用户要求,否则不进行部署、推送或提交。
规则
- 任何文件中不得包含密钥、API密钥或绝对本地路径。
- 仅添加用户批准的插件;优先不添加任何插件。
- 使用通用的占位内容;绝不使用真实的个人数据或客户数据。
- 每次更改都要可追溯到简报。