用途
本技能提供构建 WordPress 区块主题（Block Theme）与全站编辑（Full Site Editing，FSE）架构的系统性知识，适用于在生成 theme.json、区块模板、模板部件、区块样板（patterns）和 functions.php 时参考。
主题架构
主题采用如下目录结构：
theme-slug/ ├── theme.json # 中央配置文件 ├── style.css # 主题元数据 + 自定义 CSS ├── functions.php # 资源入队、样板注册 ├── templates/ # 区块模板 │ ├── index.html # 主/回退模板 │ ├── single.html # 单篇文章 │ ├── page.html # 单页面 │ ├── archive.html # 归档列表 │ ├── search.html # 搜索结果 │ └── 404.html # 未找到 ├── parts/ # 可复用模板部件 │ ├── header.html # 站点页眉 │ └── footer.html # 站点页脚 └── patterns/ # 区块样板 ├── hero.php ├── features.php └── cta.php
theme.json 配置
theme.json 是区块主题的中央配置，定义 schema 与版本（如 "$schema": "https://schemas.wp.org/trunk/theme.json"、"version": 3）、settings（编辑器可用选项，如 appearanceTools、layout 的 contentSize/wideSize、color 调色板、typography 字体族与字号、spacing 单位与间距尺寸）以及 styles（站点与区块默认样式，包括 color、typography、elements 下的 heading、link、button 等）。
排版建议
字体应美观、独特、有趣，避免 Arial、Inter 等通用字体，选择有辨识度的展示字体搭配精致的正文字体。字号比例保持克制可用：正文 1rem，标题适度缩放（h1 ≤ 2.5–3rem），响应式展示文字用 clamp() 但上限约 3.5rem，避免超过 4rem 的巨型字号。一个可用的 6 级比例示例：0.875rem / 1rem / 1.25rem / 1.75rem / 2.25rem / clamp(2.5rem, 4vw, 3.5rem)。行高：正文 1.5–1.65，标题 1.1–1.3，任何文字不得低于 1.0，通过 theme.json 的 styles.typography.lineHeight 与 styles.elements.heading.typography.lineHeight 应用。
区块模板与模板部件
模板使用 WordPress 区块标记（带 JSON 属性的 HTML 注释）。典型结构为：先引入 header 模板部件，再用 group 包裹 main 内容，最后引入 footer 模板部件。页眉要求：constrained 布局 group、站点适配背景、flex 行包含 site-title（level:0，渲染为 <p> 而非 <h1>）与导航、使用间距预设的内边距。页脚要求：constrained 布局 group、与页眉风格匹配或互补、内容随站点类型变化（版权、社交链接、联系信息等），并在 style.css 中重置页脚外边距。
区块样板
样板是注册可复用区块内容的 PHP 文件，文件头注释包含 Title、Slug、Categories 等字段。
functions.php
保持 functions.php 精简，主要用途包括：Google Fonts 入队（必须使用 enqueue_block_assets 钩子而非 wp_enqueue_scripts，以确保字体在前端和区块编辑器中都加载）以及注册区块样板分类。
生成代码的安全
当 functions.php 输出任何用户来源的值时，使用 WordPress 转义函数：HTML 上下文用 esc_html()，属性上下文用 esc_attr()，URL 上下文用 esc_url()。生成的主题代码中绝不使用 eval()、create_function()、shell_exec()、exec() 或 system()。静态区块主题（默认，内容硬编码）不需要转义，因为 WordPress 核心区块会处理；仅当生成渲染动态数据的 PHP 时才需要转义。
style.css
style.css 包含主题元数据（Theme Name、Theme URI、Author、Description、Version、Requires at least、Tested up to、Requires PHP、License、Text Domain 等）与自定义 CSS。设计中的自定义 CSS（尤其是 theme.json 无法实现的布局与构图技巧，如动画/动效）应始终写入 style.css。
动画与动效
通过 className JSON 属性为区块添加动画类，WordPress 会将其渲染为包裹 div 上的 class，适用于 group、columns、headings、paragraphs、buttons、images 等任意区块。style.css 中可定义入场动画（fade-up、fade-in、slide-in-left、slide-in-right 及对应 keyframes）、交错子元素（stagger-children 配合 nth-child 延迟）、交互过渡（hover-lift、hover-glow）、持续环境动效（float、pulse-subtle）。滚动触发显示需要一小段 IntersectionObserver 脚本，可加入 functions.php（注意 wp_add_inline_script 需要已注册的脚本句柄，更可靠的方式是直接输出内联脚本），配合 style.css 中 .animate-on-scroll 与 .is-visible 的样式，并在 section 级 Group 区块上使用 className: "animate-on-scroll"。每个主题必须在 style.css 中包含 prefers-reduced-motion 媒体查询。动画应优先用于：首屏入场、滚动区块显示、交互元素（卡片 hover-lift、按钮过渡）、1–2 个装饰性环境动画；避免为每个标题、段落和按钮单独加动画。
卡片行布局
对于等高、等宽卡片（可选底部对齐 CTA），使用 Columns（className: "equal-cards"）结构，每列 verticalAlignment: "stretch"，宽度为 100% / 卡片数（2 张 = 50%，3 张 = 33.33%，4 张 = 25%），所有列宽度之和必须恰好为 100%。卡片内图片样式为 style="height:200px;object-fit:cover;width:100%"。需要配套 CSS 使列与卡片 group 使用 flex 纵向布局并撑满高度，底部 CTA 用 margin-top: auto。始终添加重置页脚上边距的 CSS：.wp-site-blocks > footer { margin-block-start: 0; }。
落地页编排
生成首页区块标记时应像落地页设计师而非模板拼装器，每个区块应是视觉上独立的全宽色带，形成节奏与视觉冲击。要点：为每个包裹落地页区块的顶层 Group 添加 "style":{"spacing":{"margin":{"top":"0"}}} 以重置区块上边距；首屏、页眉 group、cover 区块和功能网格应使用 "align":"wide" 或 "align":"full"，仅文字密集的阅读区块使用默认（content）对齐；不要使用 <inner-blocks>，输出完整展开的标记；wp:columns 始终设置 "align":"wide"（除非另有指示）；不要插入 <!-- Hero Section --> 之类的装饰性 HTML 注释，只允许 WordPress 区块注释；每个主要首页区块必须 alignfull（通栏），内部内容可约束，即“全出血包裹、约束内容”模式，不要对首页区块使用不带 "align":"full" 的裸 constrained 布局。区块选择应由站点类型、受众和主要目标决定，例如作品集需要通栏项目画廊、SaaS 需要带清晰价值主张的功能网格、餐厅需要诱人图像与菜单区块、代理机构需要案例研究卡片与社会证明等。
绝对规则
生成内容中任何位置都不得使用 emoji，包括标题、段落、按钮文字及其他文本，适用于所有模板、样板和内容。
限制
本技能资料未提供收费、价格、平台支持范围或具体效果数据，这些信息暂未提供。