WordPress学习小组
Group Type 专业
Active 6 時, 34 分前
WordPress学习小组
WordPress Twenty Twenty-Five 主题：终极实操指南
- This topic has 0 則回覆, 1 個參與人, and was last updated 4 months, 3 weeks ago by
Brave.
-
作者文章
-
-
2026-03-03 00:51 #33590
Brave管理員适用环境： WordPress 6.7+｜PHP 7.2+ 主题类型： 全站编辑（FSE, Full Site Editing）区块主题 活跃安装量： 700,000+（截至 2025 年） 设计师： Beatriz Fialho（同 Twenty Twenty-Four 设计师）
1. 主题架构总览
Twenty Twenty-Five 完全基于区块（FSE），几乎不依赖传统 PHP 模板逻辑，通过 四层架构 实现一切：
层级 文件 作用 🎯 核心配置 theme.json定义颜色、字体、间距、布局等全部设计令牌（Design Tokens） 📄 模板 templates/*.html定义页面级布局骨架（首页、文章、存档、404 等） 🧩 模板部件 parts/*.html可复用的页面区域（页头、页脚、侧边栏） 🎨 区块模式 patterns/*.php预构建的内容布局组件（英雄区、CTA、定价表等） functions.php：仅 167 行
在传统主题中不可想象的精简程度。它只做 5 件事：
- ✅ 注册 9 种文章格式（aside、audio、chat、gallery、image、link、quote、status、video）
- ✅ 注册编辑器样式
- ✅ 注册一个”对号列表”区块样式
- ✅ 注册两个模式分类（Pages 和 Post formats）
- ✅ 注册一个动态区块绑定（自动显示文章格式名称）
适用场景
该主题专为多种用途而设计：
- 📝 博客 — 个人博客、新闻杂志
- 🖼️ 作品集 — 摄影师、设计师展示
- 📰 杂志网站 — 多栏新闻布局
- 🏢 商业网站 — 企业官网、着陆页
2. 设计系统详解
2.1 颜色调色板（8 色系统）
主题禁用了 WordPress 默认调色板/渐变/双色调，使用自定义的 8 色体系：
色槽 名称 默认值 用途说明 base基底色 #FFFFFF纯白页面背景 contrast对比色 #111111近黑正文文字、按钮背景 accent-1强调色 1 #FFEE58明黄Section-3 背景 accent-2强调色 2 #F6CFF4浅粉紫Section-2 背景 accent-3强调色 3 #503AA8深紫Section-4 背景 accent-4强调色 4 #686868中灰日期、作者等辅助文字 accent-5强调色 5 #FBFAF3奶白Section-1 背景、代码块背景 accent-6强调色 6 color-mix(...)分割线、边框（动态半透明） 💡 关键点：
accent-6是动态的——它会根据当前文字颜色自动计算 20% 透明度（color-mix(in srgb, currentColor 20%, transparent)），在暗色和亮色背景上都能正确显示。🖱️ Gutenberg 操作： 选中任何区块 → 右侧面板「颜色」→ 即可看到这 8 种颜色。修改
base和contrast会改变全站底色和文字色；修改accent-1到accent-5会同时改变所有使用该颜色的 Section 样式。2.2 字体系统
默认激活的 2 个字体家族：
字体 类型 字重范围 用途 Manrope 几何无衬线体 200–800（可变字体） 全站默认字体 Fira Code 等宽字体 300–700（可变字体） 代码块 内置但未默认激活的 7 个字体家族（通过样式变体激活）：
字体 风格特点 Beiruti 阿拉伯风格无衬线 Literata 衬线体，72pt 光学尺寸 Vollkorn 经典衬线体 Fira Sans 无衬线体 Platypi 个性衬线体 Ysabeau Office 优雅无衬线 Roboto Slab 粗衬线体 💡 添加更多字体： 外观 → 编辑器 → 样式 → 排版 → 管理字体 → 安装字体 → 从 Google Fonts 库中选择安装。
2.3 字号系统（5 级流式字号）
级别 大小 流式范围 典型用途 Small 0.875rem固定 日期、标签、辅助信息 Medium 1rem1rem → 1.125rem正文、导航 Large 1.38rem1.125rem → 1.375rem默认正文大小、h3 X-Large 1.75rem1.75rem → 2remh2 XX-Large 2.15rem2.15rem → 3remh1 ⚠️ 注意： 主题默认正文用的是 Large 号字，字重仅 300（极细），行高 1.4。这创造了轻盈通透的阅读体验，但在某些屏幕上可能偏细。
2.4 间距系统（7 级响应式间距）
级别 名称 大小 20 Tiny 10px30 X-Small 20px40 Small 30px50 Regular clamp(30px, 5vw, 50px)60 Large clamp(30px, 7vw, 70px)70 X-Large clamp(50px, 7vw, 90px)80 XX-Large clamp(70px, 10vw, 140px)💡 关于
clamp()： 较大间距（50–80）使用clamp()函数，会在手机上自动缩小、大屏上自动放大，无需额外媒体查询。2.5 布局尺寸
属性 值 说明 内容宽度 645px偏窄，优化阅读体验 宽幅宽度 1340px全幅区块的最大限制 3. 模板体系
3.1 内置模板一览（8 个）
模板 文件 功能 博客首页 home.html默认文章列表页 通用索引 index.html终极回退模板 单篇文章 single.html文章详情（含特色图片、作者、评论） 单页 page.html页面（特色图片 + 标题 + 内容） 无标题页面 page-no-title.html无标题无特色图片（适合落地页） 归档页 archive.html分类/标签/作者归档 搜索页 search.html搜索结果（含搜索框 + 文章列表） 404 页 404.html两栏布局：左图右文 + 搜索框 3.2 统一结构模式
所有模板遵循相同的**”三明治”结构**：
┌─────────────────────────────┐ │ 页头模板部件（Header） │ ├─────────────────────────────┤ │ <main> │ │ ├─ constrained 布局 │ │ ├─ margin-top: spacing-60 │ │ └─ 具体内容 │ ├─────────────────────────────┤ │ 页脚模板部件（Footer） │ └─────────────────────────────┘3.3 模板管理操作
操作 方法 查看/编辑 外观 → 编辑器 → 模板 → 点击任一模板 添加模板 点击”添加新模板”按钮，从列表中选择类型 删除模板 仅可删除自创模板：点击模板旁三点菜单 → 删除 重置模板 编辑模板时 → 设置侧边栏 → 模板三点菜单 → 重置 更换设计 编辑模板 → 设置侧边栏 → “设计”选项卡 → 选择替代方案 3.4 博客首页布局变体
“博客首页”模板提供 6 种替代布局，可直接切换：
布局 特点 注意事项 默认 标准垂直列表，特色图片 3:2 — 新闻博客主页 杂志式三栏（25%/50%/25%），100px 大标题页头 — 图片博客主页 3 列网格，方形图片 1:1，极简风格 ⚠️ 必须为文章设置特色图片 带特色文章网格的新闻博客 网格 + 精选文章突出显示 — 纯文本博客 纯文字列表，无图片，带分割线 — 带侧边栏新闻博客 垂直侧边栏导航 + 主内容区 — 🖱️ 切换方法： 外观 → 编辑器 → 模板 → 选择”博客主页” → 设置侧边栏 → “设计”选项卡 → 选择替代布局。
4. 模板部件（Template Parts）
共 7 个模板部件：3 个页头 + 3 个页脚 + 1 个侧边栏。
4.1 页头选择（3 + 额外变体）
页头 特点 Header（默认） 站点标题在左，导航在右，简洁水平布局 Header Large Title 站点标题 100px 超大字号在左，导航垂直堆叠在右，底部分割线 Vertical Header 粘性定位、100vh 高度、站点标题竖排显示、导航始终为汉堡菜单 💡 更多选择： 除上述三种外，在模板编辑器中还可选择居中头部、带栏目头部、透明背景头部、深色背景简单头部等额外变体。
4.2 页脚选择（3 + 额外变体）
页脚 特点 Footer（默认） 站点 Logo + 标题 + 标语 + 两列导航链接 + 底部版权信息 Footer Columns 大号标题 + 标语在左，两个带标题的导航列在右 Footer Newsletter 超大标题”Stories.” + 订阅 CTA 按钮 + 版权信息，使用 is-style-section-3着色💡 额外选择： 居中页脚、带社交链接页脚等。
4.3 侧边栏
显示”Other Posts”标题 + 4 篇最新文章（标题 + 日期），仅在特定模板中使用。
4.4 操作方法
操作 方法 查看全部 外观 → 编辑器 → 模板部件 切换页头/页脚 编辑模板 → 选中页头/页脚区块 → 工具栏”替换” 或 设置侧边栏”设计”选项卡 重置 从样板列表中选择 → 三点菜单 → 重置 5. 样式变体系统
🌟 这是 Twenty Twenty-Five 最强大的功能！ 实现了一个四层可组合的设计系统。
5.1 完整样式变体（9 种，含默认）
变体 基底色 对比色 标题字体 正文字体 情绪关键词 Default（默认） #FFFFFF纯白#111111近黑Manrope Manrope 经典黑白 Evening（夜晚） #1B1B1B暗#F0F0F0亮灰Manrope Manrope 暗色、沉稳 Noon（正午） #F8F7F5暖白#191919近黑Beiruti Literata 温暖、编辑风 Dusk（黄昏） #E2E2E2浅灰#3B3B3B深灰Vollkorn Fira Code 技术/文学 Afternoon（午后） #DAE7BD鼠尾草绿#516028橄榄Platypi Ysabeau Office 自然、清新 Twilight（暮光） #131313极暗#FFFFFF白Roboto Slab Manrope 大胆、高对比 Morning（清晨） #DFDCD7暖灰#191919近黑Literata Ysabeau Office 柔和、沉思 Sunrise（日出） #330616深酒红#FFFFFF白Platypi Literata 浪漫、戏剧化 Midnight（午夜） #4433A6深靛紫#79F3B1薄荷绿Literata Fira Sans 超现实、赛博 ⭐ 特别注意： Midnight 是唯一定义了双色调图像滤镜的变体——所有图片会被重新着色为靛紫 + 薄荷绿，创造统一的视觉语言。
🖱️ 一键切换： 外观 → 编辑器 → 右上角样式图标（半黑半白的圆形）→ “浏览样式” → 预览并选择。
5.2 可独立使用的子层（核心亮点：混搭机制）
主题将每个完整变体拆解为可独立使用的模块，实现自由混搭：
🎨 仅颜色变体（8 个） — 只改颜色，不改字体
- 文件位置：
styles/colors/01-evening.json到08-midnight.json - 用途示例：想用 Midnight 的颜色但保留默认 Manrope 字体
🔤 仅字体预设（7 个） — 只改字体，不改颜色
- 文件位置：
styles/typography/typography-preset-1.json到7.json
完整对应关系表：
完整变体 颜色层文件 字体层文件 Evening colors/01-evening—（默认字体） Noon colors/02-noonpreset-1（Beiruti + Literata）Dusk colors/03-duskpreset-2（Vollkorn + Fira Code）Afternoon colors/04-afternoonpreset-3（Platypi + Ysabeau Office）Twilight colors/05-twilightpreset-4（Roboto Slab + Manrope）Morning colors/06-morningpreset-5（Literata + Ysabeau Office）Sunrise colors/07-sunrisepreset-6（Platypi + Literata）Midnight colors/08-midnightpreset-7（Literata + Fira Sans）💡 可组合公式： 颜色 × 字体 × 区域样式 × 区块样式 = 几乎无限的视觉组合。例如：Midnight 的颜色 + Afternoon 的字体 + Section-3 的区域样式 = 主题作者从未预想过的全新设计。
5.3 段落样式（Section Styles）
5 种区域级配色方案，可应用于任何 Group、Columns 或 Column 区块：
样式 背景 → 文字 默认效果 适用场景 Section-1 accent-5→contrast奶白背景 微妙区分区域 Section-2 accent-2→contrast粉紫背景 醒目重点区域 Section-3 accent-1→contrast明黄背景 高注意力区域（CTA 等） Section-4 accent-3→accent-2深紫背景 + 粉紫文字 深色区域 Section-5 contrast→base黑底白字（反转配色） 对比强烈的区域 🖱️ 操作方法： 选中 Group 区块 → 右侧面板底部”样式” → 选择 section-1 到 section-5。这些区域样式会自动确保内部链接、日期、分割线等元素颜色正确。
5.4 区块样式变体
样式 适用区块 效果 Display 标题、段落 超大流式字号（ 2.2rem → 3.5rem），用于英雄标题Subtitle 标题、段落 中大字号（ 1.5rem → 1.75rem），用于副标题Annotation 标题、段落 小号 + 圆角边框 + 紧凑内边距 = 药丸标签形态 Post Terms-1 文章分类/标签 药丸形带边框的分类标签 Checkmark 列表 列表项标记变为 ✓ 对号 6. 区块模式（Patterns）
共计 70 个区块样板，涵盖完整页面到细粒度组件。
6.1 整页级模式（一键生成完整页面）
模式名称 适用场景 核心特点 Business Home 企业首页 英雄区 + 服务介绍 + 团队照片 + CTA Landing Book 图书推广页 大型封面图 + 购买链接 + 摘要 Landing Event 活动着陆页 日程表 + 场地 + RSVP Landing Podcast 播客着陆页 全幅封面 + 最新剧集 Portfolio Home 作品集首页 图片网格 + 简介 Shop Home 电商首页 产品网格 + CTA Coming Soon 即将上线页 全屏背景 + 倒计时文案 CV / Bio 简历页 个人信息 + 经历 Link in Bio（3 种） 链接树页面 类似 Linktree 的链接页 🖱️ 操作方法： 新建页面 → 点击「+」→ 选择「模式」标签 → 找到「Pages」分类 → 选择任意整页模式，一键填充整个页面！
6.2 组件级模式分类总览
分类 数量 包含内容 关于（About） 7 个人/团队介绍 横幅（Banners） 19 英雄区、活动、书籍介绍等 号召性用语（CTA） 13 订阅、定价、活动 RSVP 等 联系（Contact） 3 联系表单/信息 特色（Featured） 16 精选内容展示 页脚（Footers） 5 各类页脚变体 画廊（Gallery） 1 图片画廊 头部（Headers） 5 各类页头变体 媒体（Media） 2 媒体展示 页面（Pages） 11 全页样板 文章形式（Post Formats） 3 音频、链接等 文章（Posts） 4 文章列表/展示 服务（Services） 3 3 列服务介绍 推荐语（Testimonials） 3 2 列 / 6 列 / 大型推荐语 文本（Text） 3 评论、文章导航、FAQ 未分类 3 其他 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. 菜单管理
默认菜单结构
菜单 位置 默认状态 头部菜单 Header 仅包含示例页面（Sample Page） 页脚菜单 ×2 Footer 包含一系列空的自定义链接（无目标地址） ⚠️ 首要任务： 安装后请立即编辑或删除页脚的空链接占位符！
菜单操作速查
操作 步骤 编辑菜单项 点击项目 → 工具栏”链接”符号 → “编辑链接”（铅笔图标）→ 修改文本/地址 → 保存 删除菜单项 点击项目 → 工具栏三点”选项”菜单 → 滚动到底部 → 删除 添加菜单项 选中父级导航区块 → 点击”+”按钮 自动添加新页面 使用”页面列表（Page List）”作为菜单，新页面会自动出现 8. 实操指南：快速上手
8.1 一键切换网站风格
- 进入 外观 → 编辑器
- 点击右上角样式图标（🎨 半圆形）
- 选择**「浏览样式」**
- 预览并选择 9 种完整样式变体之一
- 也可以分别选择颜色和字体进行混搭
8.2 切换博客风格
- 进入 外观 → 编辑器 → 模板
- 选择要修改的模板（如 Home 或 Single）
- 点击编辑，然后可以：
- 在设置侧边栏”设计”选项卡中选择替代布局
- 或手动替换整个模板内容
8.3 更换页头/页脚
- 编辑任意模板
- 点击页头/页脚的模板部件区块
- 在工具栏中选择替换，或在设置侧边栏”设计”选项卡中选择
- 从多种页头/页脚中选择
8.4 使用 Section 样式创建视觉层次
- 插入一个 Group 区块
- 在右侧面板选择样式 → 选择 section-1 到 section-5
- 整个区域（包括内部所有区块）会自动应用对应的背景/文字配色
- 在一个页面中交替使用不同 section 样式来创建视觉节奏
8.5 构建着陆页（完整流程）
步骤 1：新建页面 步骤 2：页面模板选择 → "无标题页面（Page No Title）"（右侧面板 → 模板） 步骤 3：从模式库中依次插入组件： ├── 🦸 一个 Hero 模式 → 开场 ├── 🔧 一个 Services 模式 → 介绍服务 ├── ⭐ 一个 Testimonials 模式 → 展示推荐 ├── 📢 一个 CTA 模式 → 行动号召 └── 💰 一个 Pricing 模式 → 展示价格 步骤 4：每个组件之间用 Section 样式交替着色8.6 自定义颜色的正确方式
- 进入 外观 → 编辑器 → 样式 → 颜色
- 你会看到 8 个颜色槽位
- 修改
base和contrast→ 改变全站底色和文字色 - 修改
accent-1到accent-5→ 同时改变所有使用该颜色的 Section 样式 accent-6建议保持为半透明——它自动用于分割线和边框
8.7 在博客页面显示摘要而非全文
默认情况下，博客主页显示全文。改为摘要：
- 在文档概览中找到**”内容（Content）”区块**
- 在其下方添加”摘要（Excerpt）”区块
- 删除”内容”区块
8.8 使用 Openverse 添加免费图片
WordPress 6.7 集成了 Openverse 媒体库：
- 插入图片时，选择 媒体 → Openverse
- 搜索关键词
- 插入免费的版权图片（通常为 CC0 协议）
9. 进阶自定义
9.1 创建子主题
对于区块主题，创建子主题的需求不如经典主题那么强烈，但如果需要：
- 安装 Create Block Theme 插件
- 转到 外观 → Create Block Theme
- 选择”创建子主题（Create a Child）”
- 填写信息并创建
9.2 启用图片博客模板
- 外观 → 编辑站点 → 模板
- 选择”博客主页”→ 设置侧边栏”设计”选项卡 → 选择“图片博客主页”
- 对”单篇文章”模板重复上述步骤，选择对应图片博客单页设计
- ⚠️ 务必为每篇文章设置特色图片！
9.3 制作粘性头部（Sticky Header）
- 打开模板（如博客主页）
- 选中头部 → 将其”分组（Group）”
- 在分组设置中 → 关闭”内部区块使用内容宽度”
- 在”位置（Position）”选项中 → 选择“粘性（Sticky）”
- 在”样式”选项卡中 → 为分组设置一个实色背景（防止滚动时透明重叠）
9.4 改善深色模式下日历区块的易读性
在某些深色样式中，日历区块文字对比度可能不够：
- 在样式编辑器中 → 点击”修订”图标旁三点菜单 → 选择**”额外 CSS”**
- 添加以下代码：
.wp-block-calendar table:where(:not(.has-text-color)) { color: #fff; }- 如果表头对比度仍有问题 → 在”区块样式”中选择日历区块 → 手动设置文本颜色为深色、链接颜色为浅色
9.5 为自定义文章类型（CPT）创建模板
如果使用插件（如 ACF）创建了自定义文章类型（例如”电影 Movie”）：
- 在模板视图中点击”添加新模板”
- 选择”单项：电影（Single item: Movie）”
- 自定义布局以显示自定义字段（如年份、评分等）
9.6 使用竖排文字（writing-mode）
主题在
theme.json中启用了writingMode: true，可以对任何文字区块设置竖排显示。💡 这在 Vertical Header 中已被使用（站点标题使用
vertical-rl模式）。10. 无障碍性（Accessibility）
基础特性
特性 状态 跳过链接（Skip Link） ✅ 头部包含 正文链接下划线 ✅ 有（导航链接无） 键盘焦点样式 ✅ 黑色轮廓 地标区域划分 ✅ 已划分 导航 aria-label ✅ 可在区块设置 > 高级 > 菜单名称中设置 颜色对比度
样式变体 AA 标准 AAA 标准 备注 Default（默认） ✅ 通过 ✅ 通过 最安全选择 其他变体 ⚠️ 部分场景 ⚠️ 部分场景 深色变体在日历等区块上可能对比度不足 ⚠️ 重要提示： 只有默认样式变体必须符合”无障碍就绪（accessibility-ready）”标准。如果不确定，使用默认样式最为稳妥。
翻译支持
Twenty Twenty-Five 目前有 26 种翻译版本，包括法语、德语、西班牙语、意大利语、波斯语和简体中文。
11. 技术亮点与设计哲学
11.1 现代 CSS 特性
特性 应用场景 color-mix()按钮悬停效果（85% 对比色 + 透明）和 accent-6 动态色 clamp()响应式间距和字号，无需媒体查询 text-wrap: pretty自动减少标题中的”寡行”和”孤字” CSS 可变字体 所有字体均为单文件可变字体，大幅减少请求数 11.2 模式委托模式（Pattern Delegation）
所有模板部件的 HTML 文件只有一行——实际内容委托给 PHP 模式文件。好处：
- ✅ 所有文字均可通过
esc_html_e()进行国际化翻译 - ✅ 可以使用 PHP 动态表达式
- ✅ 保持模板系统和实际标记的清晰分离
11.3 可组合设计系统
最优雅的部分是四层可组合：
颜色（8种）× 字体（7种）× 区域样式（5种）× 区块样式（5种） = 几乎无限的视觉组合12. 注意事项与局限
项目 说明 建议 ⚠️ 内容宽度较窄 645px，适合阅读，不适合大量图片/表格 频繁使用宽幅对齐 ⚠️ 默认字重极轻 300，在某些屏幕上可能偏细 在编辑器中测试实际显示效果 ⚠️ 模式中的图片 26+ 张 CC0 图片仅为占位演示 必须替换为你自己的内容 ⚠️ 导航链接 模式中的导航链接均指向 #需手动配置实际链接 ⚠️ 页脚空链接 默认页脚包含空的自定义链接 安装后立即编辑或删除 ⚠️ 自定义模板 仅一个自定义模板（Page No Title） 需更多模板则创建子主题或在编辑器中手动创建 ⚠️ 深色变体对比度 部分深色变体在日历等区块上对比度可能不足 使用额外 CSS 修复，或选用默认变体 小结： Twenty Twenty-Five 是迄今为止最好的默认全站编辑（FSE）主题。它通过四层可组合设计系统（颜色 × 字体 × 区域样式 × 区块样式）实现了几乎无限的视觉组合可能；70 个区块样板覆盖了从企业官网到个人博客的所有常见场景；26 种语言翻译让它非常适合多语言网站。无论你是博客作者、设计师还是企业用户，这个主题都能以最少的代码提供最大的灵活性。
-
-
作者文章
- 抱歉，回覆主題必需先登入。