SuperAPI AI 工具集

creating-themes

前端与建站

查看项目

更新于 10-15 19:58

技能介绍

用途:从零创建新的 WordPress 区块主题时加载本技能;修改已有主题时不要使用。

主要规则:优先做好首页,以图片丰富、排版有力的首页呈现主题美学;初始创建只生成 index.html,除非用户明确要求,不额外创建 single.html、page.html、archive.html 等模板。落地页或多区块首页应为主要区块(hero、features、testimonials、FAQ、CTA 等)生成区块模式,再组合进 index.html;简单单用途主题则优先用模板而非模式。每个生成的模式都必须被某个模板引用,否则用户难以发现。页脚默认使用极简中性署名或不加。

生成要求:始终使用当前工作目录,不另建子目录;必须包含带 WordPress 主题头注释的 style.css;创建 version 3 的 theme.json 作为核心配置;区块模板放在 templates/,模板部件放在 parts/;内容中不得使用 emoji;functions.php 不写结尾 PHP 闭合标签,函数用 function_exists() 保护;字体用 enqueue_block_assets 钩子而非 wp_enqueue_scripts;颜色、排版、间距尽量定义在 theme.json 而非 CSS;主题需兼容全站编辑(FSE)。

文件结构:style.css、theme.json、functions.php、templates/(index.html 必需)、parts/、patterns/、assets/。

字体:优先自托管源站真实字体,解析 @font-face 并下载字体文件到 assets/fonts/,在 theme.json 的 fontFamilies 中注册;无法自托管的字体(Adobe Typekit、Monotype 或哈希构建器名称)自动替换为最接近的免费网络字体并自托管。只有真正无法捕获的字体才替换。

页头复刻:使用源站真实 logo 并本地化,导航只用显式 wp:navigation-links 表示源站顶层主菜单,绝不使用 wp:page-list;右侧保留搜索、账户、购物车图标,以主题 SVG 资源配合 core/image 链接实现,不用 wp:html。

落地页:由生成者决定章节结构,但始终包含页头和页脚;每个区块作为独立段,用语义化 HTML、类名样式钩子与浅层 DOM;顶层 Group 块添加 spacing.margin.top 为 0;hero、页头组、cover、功能网格用 wide 或 full 对齐;不使用 inner-blocks,不写装饰性 HTML 注释;字体栈通过内联 style 应用,不输出 style 标签。

生成主题文件前需阅读同目录 references/ 下的文件:block-html.md(必读,区块 HTML 有效性规则)、design-direction.md(必读)、navigation.md、query-loop.md。限制:本技能面向新建主题,不适用于修改已有主题;未提供具体收费、平台或效果信息。