Decentralization? We're still early!

WordPress Twenty Twenty-Five 主题:终极实操指南

  • WordPress Twenty Twenty-Five 主题:终极实操指南

    發布人 Brave 2026-03-03 00:51

    目录

    适用环境: 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 件事:

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

    适用场景

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

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

    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强调色 6color-mix(...)分割线、边框(动态半透明)

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

    🖱️ Gutenberg 操作: 选中任何区块 → 右侧面板「颜色」→ 即可看到这 8 种颜色。修改 basecontrast 会改变全站底色和文字色;修改 accent-1accent-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 级流式字号)

    级别大小流式范围典型用途
    Small0.875rem固定日期、标签、辅助信息
    Medium1rem1rem → 1.125rem正文、导航
    Large1.38rem1.125rem → 1.375rem默认正文大小、h3
    X-Large1.75rem1.75rem → 2remh2
    XX-Large2.15rem2.15rem → 3remh1

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


    2.4 间距系统(7 级响应式间距)

    级别名称大小
    20Tiny10px
    30X-Small20px
    40Small30px
    50Regularclamp(30px, 5vw, 50px)
    60Largeclamp(30px, 7vw, 70px)
    70X-Largeclamp(50px, 7vw, 90px)
    80XX-Largeclamp(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 近黑ManropeManrope经典黑白
    Evening(夜晚)#1B1B1B#F0F0F0 亮灰ManropeManrope暗色、沉稳
    Noon(正午)#F8F7F5 暖白#191919 近黑BeirutiLiterata温暖、编辑风
    Dusk(黄昏)#E2E2E2 浅灰#3B3B3B 深灰VollkornFira Code技术/文学
    Afternoon(午后)#DAE7BD 鼠尾草绿#516028 橄榄PlatypiYsabeau Office自然、清新
    Twilight(暮光)#131313 极暗#FFFFFFRoboto SlabManrope大胆、高对比
    Morning(清晨)#DFDCD7 暖灰#191919 近黑LiterataYsabeau Office柔和、沉思
    Sunrise(日出)#330616 深酒红#FFFFFFPlatypiLiterata浪漫、戏剧化
    Midnight(午夜)#4433A6 深靛紫#79F3B1 薄荷绿LiterataFira Sans超现实、赛博

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

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

    5.2 可独立使用的子层(核心亮点:混搭机制)

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

    🎨 仅颜色变体(8 个) — 只改颜色,不改字体

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

    🔤 仅字体预设(7 个) — 只改字体,不改颜色

    • 文件位置:styles/typography/typography-preset-1.json7.json

    完整对应关系表:

    完整变体颜色层文件字体层文件
    Eveningcolors/01-evening—(默认字体)
    Nooncolors/02-noonpreset-1(Beiruti + Literata)
    Duskcolors/03-duskpreset-2(Vollkorn + Fira Code)
    Afternooncolors/04-afternoonpreset-3(Platypi + Ysabeau Office)
    Twilightcolors/05-twilightpreset-4(Roboto Slab + Manrope)
    Morningcolors/06-morningpreset-5(Literata + Ysabeau Office)
    Sunrisecolors/07-sunrisepreset-6(Platypi + Literata)
    Midnightcolors/08-midnightpreset-7(Literata + Fira Sans)

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

    5.3 段落样式(Section Styles)

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

    样式背景 → 文字默认效果适用场景
    Section-1accent-5contrast奶白背景微妙区分区域
    Section-2accent-2contrast粉紫背景醒目重点区域
    Section-3accent-1contrast明黄背景高注意力区域(CTA 等)
    Section-4accent-3accent-2深紫背景 + 粉紫文字深色区域
    Section-5contrastbase黑底白字(反转配色)对比强烈的区域

    🖱️ 操作方法: 选中 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)33 列服务介绍
    推荐语(Testimonials)32 列 / 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)
    页脚菜单 ×2Footer包含一系列空的自定义链接(无目标地址)

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

    菜单操作速查

    操作步骤
    编辑菜单项点击项目 → 工具栏"链接"符号 → "编辑链接"(铅笔图标)→ 修改文本/地址 → 保存
    删除菜单项点击项目 → 工具栏三点"选项"菜单 → 滚动到底部 → 删除
    添加菜单项选中父级导航区块 → 点击"+"按钮
    自动添加新页面使用"页面列表(Page List)"作为菜单,新页面会自动出现

    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. 修改 basecontrast → 改变全站底色和文字色
    4. 修改 accent-1accent-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)

    基础特性

    特性状态
    跳过链接(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 种语言翻译让它非常适合多语言网站。无论你是博客作者、设计师还是企业用户,这个主题都能以最少的代码提供最大的灵活性。

    Brave 回复 1 week ago 1 成員 · 0 回复
  • 0 回复

歡迎留言回复交流。

Log in to reply.

讨论開始
00 回复 2018 年 6 月
現在