适用环境： WordPress 6.7+｜PHP 7.2+ 主题类型： 全站编辑（FSE, Full Site Editing）区块主题 活跃安装量： 700,000+（截至 2025 年） 设计师： Beatriz Fialho（同 Twenty Twenty-Four 设计师） 

1. 主题架构总览

Twenty Twenty-Five 完全基于区块（FSE），几乎不依赖传统 PHP 模板逻辑，通过 四层架构 实现一切：

functions.php：仅 167 行

在传统主题中不可想象的精简程度。它只做 5 件事：

1. ✅ 注册 9 种文章格式（aside、audio、chat、gallery、image、link、quote、status、video）
2. ✅ 注册编辑器样式
3. ✅ 注册一个"对号列表"区块样式
4. ✅ 注册两个模式分类（Pages 和 Post formats）
5. ✅ 注册一个动态区块绑定（自动显示文章格式名称）

适用场景

该主题专为多种用途而设计：

• 📝 博客 — 个人博客、新闻杂志
• 🖼️ 作品集 — 摄影师、设计师展示
• 📰 杂志网站 — 多栏新闻布局
• 🏢 商业网站 — 企业官网、着陆页

2. 设计系统详解

2.1 颜色调色板（8 色系统）

主题禁用了 WordPress 默认调色板/渐变/双色调，使用自定义的 8 色体系：

💡 关键点： accent-6 是动态的——它会根据当前文字颜色自动计算 20% 透明度（color-mix(in srgb, currentColor 20%, transparent)），在暗色和亮色背景上都能正确显示。

🖱️ Gutenberg 操作： 选中任何区块 → 右侧面板「颜色」→ 即可看到这 8 种颜色。修改 base 和 contrast 会改变全站底色和文字色；修改 accent-1 到 accent-5 会同时改变所有使用该颜色的 Section 样式。

2.2 字体系统

默认激活的 2 个字体家族：

内置但未默认激活的 7 个字体家族（通过样式变体激活）：

💡 添加更多字体： 外观 → 编辑器 → 样式 → 排版 → 管理字体 → 安装字体 → 从 Google Fonts 库中选择安装。

2.3 字号系统（5 级流式字号）

⚠️ 注意： 主题默认正文用的是 Large 号字，字重仅 300（极细），行高 1.4。这创造了轻盈通透的阅读体验，但在某些屏幕上可能偏细。

2.4 间距系统（7 级响应式间距）

💡 关于 clamp()： 较大间距（50–80）使用 clamp() 函数，会在手机上自动缩小、大屏上自动放大，无需额外媒体查询。

2.5 布局尺寸

3. 模板体系

3.1 内置模板一览（8 个）

3.2 统一结构模式

所有模板遵循相同的**"三明治"结构**：

┌─────────────────────────────┐
│   页头模板部件（Header）      │
├─────────────────────────────┤
│   <main>                    │
│   ├─ constrained 布局       │
│   ├─ margin-top: spacing-60 │
│   └─ 具体内容               │
├─────────────────────────────┤
│   页脚模板部件（Footer）      │
└─────────────────────────────┘

3.3 模板管理操作

3.4 博客首页布局变体

"博客首页"模板提供 6 种替代布局，可直接切换：

🖱️ 切换方法： 外观 → 编辑器 → 模板 → 选择"博客主页" → 设置侧边栏 → "设计"选项卡 → 选择替代布局。

4. 模板部件（Template Parts）

共 7 个模板部件：3 个页头 + 3 个页脚 + 1 个侧边栏。

4.1 页头选择（3 + 额外变体）

💡 更多选择： 除上述三种外，在模板编辑器中还可选择居中头部、带栏目头部、透明背景头部、深色背景简单头部等额外变体。

4.2 页脚选择（3 + 额外变体）

💡 额外选择： 居中页脚、带社交链接页脚等。

4.3 侧边栏

显示"Other Posts"标题 + 4 篇最新文章（标题 + 日期），仅在特定模板中使用。

4.4 操作方法

5. 样式变体系统

🌟 这是 Twenty Twenty-Five 最强大的功能！ 实现了一个四层可组合的设计系统。

5.1 完整样式变体（9 种，含默认）

⭐ 特别注意： Midnight 是唯一定义了双色调图像滤镜的变体——所有图片会被重新着色为靛紫 + 薄荷绿，创造统一的视觉语言。

🖱️ 一键切换： 外观 → 编辑器 → 右上角样式图标（半黑半白的圆形）→ "浏览样式" → 预览并选择。

5.2 可独立使用的子层（核心亮点：混搭机制）

主题将每个完整变体拆解为可独立使用的模块，实现自由混搭：

🎨 仅颜色变体（8 个） — 只改颜色，不改字体

• 文件位置：styles/colors/01-evening.json 到 08-midnight.json
• 用途示例：想用 Midnight 的颜色但保留默认 Manrope 字体

🔤 仅字体预设（7 个） — 只改字体，不改颜色

• 文件位置：styles/typography/typography-preset-1.json 到 7.json

完整对应关系表：

💡 可组合公式： 颜色 × 字体 × 区域样式 × 区块样式 = 几乎无限的视觉组合。例如：Midnight 的颜色 + Afternoon 的字体 + Section-3 的区域样式 = 主题作者从未预想过的全新设计。

5.3 段落样式（Section Styles）

5 种区域级配色方案，可应用于任何 Group、Columns 或 Column 区块：

🖱️ 操作方法： 选中 Group 区块 → 右侧面板底部"样式" → 选择 section-1 到 section-5。这些区域样式会自动确保内部链接、日期、分割线等元素颜色正确。

5.4 区块样式变体

6. 区块模式（Patterns）

共计 70 个区块样板，涵盖完整页面到细粒度组件。

6.1 整页级模式（一键生成完整页面）

🖱️ 操作方法： 新建页面 → 点击「+」→ 选择「模式」标签 → 找到「Pages」分类 → 选择任意整页模式，一键填充整个页面！

6.2 组件级模式分类总览

6.3 英雄区 + 横幅 + CTA 组件速查

🦸 英雄区（Hero）— 4 种：

• 全幅图片英雄区
• 图书封面英雄区
• 播客英雄区
• 重叠式封面

🏷️ 横幅（Banner）— 5 种：

• 大标题封面
• 介绍 + 图片
• 海报式
• 关于书籍
• 描述 + 图片网格

📢 行动号召（CTA）— 6 种：

• 居中标题
• 事件列表
• Newsletter 订阅
• 搜索区
• 产品网格链接
• 图书购买链接

💰 定价表： 2 列 / 3 列

6.4 新闻博客首页模式深度解析

template-home-news-blog 是最复杂的模式之一，采用杂志式布局：

┌──────────────────────────────────────────┐
│     左列 25%    │   中列 50%    │  右列 25%  │
│  第1篇 + 第4篇 │  第2篇（主角） │ 第3篇+第5篇│
│  3:2 图片      │  4:3 图片     │  3:2 图片   │
│  大号标题+分类  │  h1+分类+摘要  │  大号标题   │
├──────────────────────────────────────────┤
│          中部区域：2 列，3:2 图片           │
│          x-large 标题 + 分类              │
├──────────────────────────────────────────┤
│     底部区域：3 列网格，4:3 图片            │
│     large 标题 + 分类 + 分页器             │
└──────────────────────────────────────────┘

💡 技术亮点： 使用多个独立的 wp:query 区块并通过 offset 参数错开——不同位置显示不同文章，且每个查询区块可独立调整参数。

7. 菜单管理

默认菜单结构

⚠️ 首要任务： 安装后请立即编辑或删除页脚的空链接占位符！

菜单操作速查

8. 实操指南：快速上手

8.1 一键切换网站风格

1. 进入 外观 → 编辑器
2. 点击右上角样式图标（🎨 半圆形）
3. 选择**「浏览样式」**
4. 预览并选择 9 种完整样式变体之一
5. 也可以分别选择颜色和字体进行混搭

8.2 切换博客风格

1. 进入 外观 → 编辑器 → 模板
2. 选择要修改的模板（如 Home 或 Single）
3. 点击编辑，然后可以：
   • 在设置侧边栏"设计"选项卡中选择替代布局
   • 或手动替换整个模板内容

8.3 更换页头/页脚

1. 编辑任意模板
2. 点击页头/页脚的模板部件区块
3. 在工具栏中选择替换，或在设置侧边栏"设计"选项卡中选择
4. 从多种页头/页脚中选择

8.4 使用 Section 样式创建视觉层次

1. 插入一个 Group 区块
2. 在右侧面板选择样式 → 选择 section-1 到 section-5
3. 整个区域（包括内部所有区块）会自动应用对应的背景/文字配色
4. 在一个页面中交替使用不同 section 样式来创建视觉节奏

8.5 构建着陆页（完整流程）

步骤 1：新建页面
步骤 2：页面模板选择 → "无标题页面（Page No Title）"（右侧面板 → 模板）
步骤 3：从模式库中依次插入组件：
  ├── 🦸 一个 Hero 模式 → 开场
  ├── 🔧 一个 Services 模式 → 介绍服务
  ├── ⭐ 一个 Testimonials 模式 → 展示推荐
  ├── 📢 一个 CTA 模式 → 行动号召
  └── 💰 一个 Pricing 模式 → 展示价格
步骤 4：每个组件之间用 Section 样式交替着色

8.6 自定义颜色的正确方式

1. 进入 外观 → 编辑器 → 样式 → 颜色
2. 你会看到 8 个颜色槽位
3. 修改 base 和 contrast → 改变全站底色和文字色
4. 修改 accent-1 到 accent-5 → 同时改变所有使用该颜色的 Section 样式
5. accent-6 建议保持为半透明——它自动用于分割线和边框

8.7 在博客页面显示摘要而非全文

默认情况下，博客主页显示全文。改为摘要：

1. 在文档概览中找到**"内容（Content）"区块**
2. 在其下方添加"摘要（Excerpt）"区块
3. 删除"内容"区块

8.8 使用 Openverse 添加免费图片

WordPress 6.7 集成了 Openverse 媒体库：

1. 插入图片时，选择 媒体 → Openverse
2. 搜索关键词
3. 插入免费的版权图片（通常为 CC0 协议）

9. 进阶自定义

9.1 创建子主题

对于区块主题，创建子主题的需求不如经典主题那么强烈，但如果需要：

1. 安装 Create Block Theme 插件
2. 转到 外观 → Create Block Theme
3. 选择"创建子主题（Create a Child）"
4. 填写信息并创建

9.2 启用图片博客模板

1. 外观 → 编辑站点 → 模板
2. 选择"博客主页"→ 设置侧边栏"设计"选项卡 → 选择"图片博客主页"
3. 对"单篇文章"模板重复上述步骤，选择对应图片博客单页设计
4. ⚠️ 务必为每篇文章设置特色图片！

9.3 制作粘性头部（Sticky Header）

1. 打开模板（如博客主页）
2. 选中头部 → 将其"分组（Group）"
3. 在分组设置中 → 关闭"内部区块使用内容宽度"
4. 在"位置（Position）"选项中 → 选择"粘性（Sticky）"
5. 在"样式"选项卡中 → 为分组设置一个实色背景（防止滚动时透明重叠）

9.4 改善深色模式下日历区块的易读性

在某些深色样式中，日历区块文字对比度可能不够：

1. 在样式编辑器中 → 点击"修订"图标旁三点菜单 → 选择**"额外 CSS"**
2. 添加以下代码：

.wp-block-calendar table:where(:not(.has-text-color)) {
  color: #fff;
}

1. 如果表头对比度仍有问题 → 在"区块样式"中选择日历区块 → 手动设置文本颜色为深色、链接颜色为浅色

9.5 为自定义文章类型（CPT）创建模板

如果使用插件（如 ACF）创建了自定义文章类型（例如"电影 Movie"）：

1. 在模板视图中点击"添加新模板"
2. 选择"单项：电影（Single item: Movie）"
3. 自定义布局以显示自定义字段（如年份、评分等）

9.6 使用竖排文字（writing-mode）

主题在 theme.json 中启用了 writingMode: true，可以对任何文字区块设置竖排显示。

💡 这在 Vertical Header 中已被使用（站点标题使用 vertical-rl 模式）。

10. 无障碍性（Accessibility）

基础特性

颜色对比度

⚠️ 重要提示： 只有默认样式变体必须符合"无障碍就绪（accessibility-ready）"标准。如果不确定，使用默认样式最为稳妥。

翻译支持

Twenty Twenty-Five 目前有 26 种翻译版本，包括法语、德语、西班牙语、意大利语、波斯语和简体中文。

11. 技术亮点与设计哲学

11.1 现代 CSS 特性

11.2 模式委托模式（Pattern Delegation）

所有模板部件的 HTML 文件只有一行——实际内容委托给 PHP 模式文件。好处：

• ✅ 所有文字均可通过 esc_html_e() 进行国际化翻译
• ✅ 可以使用 PHP 动态表达式
• ✅ 保持模板系统和实际标记的清晰分离

11.3 可组合设计系统

最优雅的部分是四层可组合：

颜色（8种）× 字体（7种）× 区域样式（5种）× 区块样式（5种）
= 几乎无限的视觉组合

12. 注意事项与局限

小结： Twenty Twenty-Five 是迄今为止最好的默认全站编辑（FSE）主题。它通过四层可组合设计系统（颜色 × 字体 × 区域样式 × 区块样式）实现了几乎无限的视觉组合可能；70 个区块样板覆盖了从企业官网到个人博客的所有常见场景；26 种语言翻译让它非常适合多语言网站。无论你是博客作者、设计师还是企业用户，这个主题都能以最少的代码提供最大的灵活性。