学习使用全站编辑主题（FSE）进行站点设计

一、什么是块主题

1.1 块主题的诞生背景

在WordPress中，块主题（Block Themes）是一种新兴的概念，它与块编辑器紧密相关，为网站构建提供了创意和灵活性。块主题的出现使得创建和定制网站的过程更加直观和模块化。

在传统的WordPress编辑器中，内容的创建通常是基于大段的文本和HTML代码。但是，随着WordPress 5.0版本的发布，引入了全新的块编辑器（Gutenberg），它将内容划分为各种独立的块。每个块代表一个特定类型的内容，例如段落、标题、图像、视频、引用等。这些块可以自由组合和排列，使得内容创作过程更加灵活和直观。

随着WordPress 5.9版本（2022年1月）的发布，全站编辑（Full Site Editing，简称FSE）功能正式成为核心功能，标志着块主题从实验性质走向生产就绪。截至WordPress 6.5+（2024年及以后的版本），块主题生态已经高度成熟，成为WordPress官方推荐的主题开发方向。

1.2 块主题的核心理念

块主题的概念建立在块编辑器的基础上。传统的WordPress主题通常是基于整个页面的布局和设计，而块主题则将重点放在每个块上。块主题提供了一种以块为单位进行设计和定制的方式，使得网站的外观和布局更加多样化和个性化。

通过块主题，你可以使用各种预定义的块来构建你的网站。这些块包括文本块、标题块、图像块、图库块、列块、按钮块、小部件块等等。每个块都具有自己的样式和设置选项，你可以自由地调整块的属性，以满足你的设计需求。

🔑 核心概念解读：

1.3 块主题 vs 经典主题：关键差异

理解块主题与经典主题的区别，对于选择合适的开发路径至关重要：

1.4 theme.json：块主题的核心配置文件

theme.json 是块主题的"大脑"，它是一个 JSON 格式的配置文件，用于声明主题支持的功能、默认样式和编辑器设置。理解 theme.json 的结构对于深度定制块主题至关重要。

theme.json 的主要功能包括：

• 🎨 定义调色板：设置品牌色彩、渐变色供编辑器使用
• 📝 配置排版系统：字体族、字号预设、行高等
• 📐 设置间距规范：边距、内距的可选值
• 🔧 启用/禁用编辑器功能：如是否允许自定义颜色、是否显示某些控件
• 🖼️ 定义布局宽度：内容宽度、宽屏宽度等
• ✨ 设置默认块样式：为特定块预设样式

基础 theme.json 结构示例：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0073aa", "name": "Primary" },
        { "slug": "secondary", "color": "#23282d", "name": "Secondary" }
      ]
    },
    "typography": {
      "fontFamilies": [...],
      "fontSizes": [...]
    },
    "spacing": {
      "units": ["px", "em", "rem", "%"]
    }
  },
  "styles": {
    "color": { "background": "var(--wp--preset--color--white)" }
  }
}

1.5 扩展能力：自定义块

除了预定义的块，开发人员还可以创建自定义块，从而扩展块主题的功能。这使得网站设计和内容布局的可能性更加丰富和灵活。开发人员可以根据特定的需求创建定制块，使得网站的功能和外观与众不同。

自定义块的开发通常使用以下技术栈：

• React.js：用于构建块的编辑器界面
• @wordpress/scripts：官方提供的构建工具
• Block API：WordPress 提供的块注册和管理接口
• PHP：用于服务端渲染（可选）

1.6 小结 📋

区块主题是基于块编辑器的一种创新概念，它提供了一种直观和模块化的方式来构建和定制WordPress网站。通过使用各种预定义的块和自定义块，块主题为网站设计师和开发人员带来了更多的创意和灵活性。无论是个人博客、商业网站还是电子商务平台，块主题都为用户提供了一种更加直观和便捷的网站创建体验。

💡 关键要点回顾：

• 块主题是WordPress未来的发展方向，掌握它意味着掌握WordPress的未来
• theme.json 是块主题的核心，控制着主题的几乎所有方面
• 全站编辑让非技术用户也能深度定制网站
• 模板和模板部件的概念是理解FSE的基础

二、如何启用块主题（全站编辑主题）

2.1 查找块主题的多种途径

要寻找块主题，你可以按照以下步骤进行操作：

方法一：通过WordPress.org官方主题库

打开WordPress.org的主题页面：在网页浏览器中输入 https://wordpress.org/themes/tags/full-site-editing/，该页面专门收集了与完整站点编辑相关的主题。

过滤块主题：在主题页面上，你会看到一个过滤器，你可以使用它来筛选块主题。将过滤器设置为"完整站点编辑"以显示与块编辑器兼容的主题列表。

浏览可用的主题：在块主题列表中，你可以看到许多精心设计的主题。这些主题已经考虑到了完整的网站编辑，并与块编辑器无缝协作。通过阅读每个主题的详细信息和预览，你可以选择适合你需求和喜好的主题。

下载和安装主题：一旦你找到满意的块主题，点击主题的"下载"按钮，它将为你提供主题的ZIP文件。然后，在WordPress后台的"外观"菜单下选择"主题"，点击"添加新主题"，再点击"上传主题"按钮，选择你下载的主题ZIP文件并安装。

方法二：直接在WordPress后台搜索

更便捷的方式是直接在WordPress后台进行操作：

1. 登录WordPress后台 → 进入 外观 → 主题
2. 点击「添加新主题」按钮
3. **点击「功能筛选」**→ 勾选「全站编辑」选项
4. 浏览筛选结果，找到心仪的主题后点击「安装」
5. 安装完成后点击「启用」

⚠️ 注意：启用块主题后，你的外观菜单将发生变化——传统的「自定义」选项将被「编辑器（站点编辑器）」取代。

2.2 官方默认块主题推荐

WordPress官方从Twenty Twenty-Two开始，每年发布的默认主题都是块主题。这些主题代表了块主题的最佳实践：

🎯 学习建议：初学者建议从 Twenty Twenty-Four 或 Twenty Twenty-Five 开始，因为它们的设计更成熟，文档更完善，且代表了块主题的当代标准。

2.3 定制主题

安装主题后，你可以在WordPress站点的"外观"菜单下找到该主题。根据主题的设置和选项，你可以对主题进行进一步的定制，包括全局样式、块设置、导航菜单、页面和模板等。

定制块主题的主要入口：

• 🎨 外观 → 编辑器（站点编辑器）：全站编辑的主入口
• 📄 外观 → 编辑器 → 模板：管理所有页面模板
• 🧩 外观 → 编辑器 → 模板部件：管理页眉、页脚等可复用组件
• 🎭 外观 → 编辑器 → 样式：调整全局颜色、排版、间距
• 📦 外观 → 编辑器 → 模式：访问和管理可复用的块模式（Patterns）

通过按照上述步骤，你将能够找到适合你需求的块主题，并将其应用于你的WordPress网站。这将为你提供更大的灵活性和创作自由，使你能够直观地设计和定制网站，而无需复杂的编码。

三、设计知识101：什么是UI与UX

在现代数字化时代，用户体验的重要性越来越受到重视。UI（用户界面）和UX（用户体验）是实现优秀用户体验的关键要素。

3.1 什么是UI？

UI是用户界面（User Interface）的缩写，它涉及用户与产品或系统的交互界面。UI设计关注的是用户在使用产品时的视觉外观、布局和交互元素等方面。UI设计师通常考虑颜色、排版、图标、按钮等来创造令人愉悦和易于使用的界面。良好的UI设计能够提高产品的可用性和吸引力。

🖌️ UI设计的核心要素：

3.2 什么是UX？

UX是用户体验（User Experience）的缩写，它关注用户与产品或系统的整体体验。UX设计师更关注用户在使用产品时的情感、需求和目标。UX设计的目标是创造一个令用户满意、易于使用和有效的体验。UX设计师通过用户研究、用户旅程地图、信息架构等方式，确保产品能够满足用户的期望和需求。

🧠 UX设计的核心维度：

3.3 UI和UX的关系

UI和UX是紧密相关的概念，它们在设计过程中相互影响。良好的UI设计可以增强用户体验，而优秀的UX设计需要有良好的UI支持。UI设计师和UX设计师通常需要密切合作，共同努力创造出令人满意的产品。

🔗 一个形象的比喻：

如果把网站比作一座房子：

• UX设计 决定了房子的户型——房间如何布局、动线是否合理、住起来是否舒适
• UI设计 决定了房子的装修——墙面什么颜色、家具什么风格、看起来是否美观

两者缺一不可：再美的装修，如果户型不合理，住着也不舒服；再好的户型，如果装修粗糙，也会影响居住体验。

3.4 UI和UX的作用

1. 提升用户满意度：良好的UI和UX设计可以使用户在使用产品时感到愉悦和满意，从而提高用户的忠诚度和满意度。
2. 增强产品的可用性：好的UI设计可以使产品界面简洁明了、易于理解和操作，提高产品的可用性和易用性。
3. 减少用户的认知负荷：通过合理的UI设计，可以减少用户在使用产品时需要进行的思考和决策，提高用户的效率和舒适度。
4. 增加产品的市场竞争力：在竞争激烈的市场中，良好的UI和UX设计可以为产品赋予独特的品牌形象和竞争优势，吸引更多用户和客户。

3.5 设计过程中的UI和UX

在产品设计过程中，UI和UX设计通常与其他设计阶段相互交织。UI设计师和UX设计师需要与产品经理、开发人员和其他设计师紧密合作，确保产品的外观和功能相互补充。他们通过用户研究、原型设计、测试和迭代等方法来不断改进和优化界面和体验。

📊 现代UX设计流程（双钻模型 Double Diamond）：

发现（Discover）→ 定义（Define）→ 开发（Develop）→ 交付（Deliver）
     ↓                    ↓                    ↓                  ↓
  用户研究            问题定义             创意方案            产品发布
  竞品分析            需求文档             原型设计            迭代优化
  数据收集            设计策略             用户测试            效果追踪

3.6 在WordPress/FSE环境下应用UI/UX原则

将UI/UX理论应用到WordPress块主题设计中，需要关注以下实践要点：

UX层面的考量：

UI层面的执行：

3.7 本章小结 📋

总之，UI和UX是提升用户体验的关键要素。良好的UI设计可以使产品外观美观、易于使用，而优秀的UX设计可以提供令人满意、有效和愉悦的用户体验。UI和UX设计在现代数字化产品的成功中起着至关重要的作用。通过合理的UI和UX设计，可以提高用户满意度、产品可用性，并为产品赋予市场竞争力。在设计过程中，UI和UX设计师需要密切协作，与其他设计师和开发人员紧密合作，不断改进和优化产品的界面和体验。通过注重UI和UX设计，你可以创造出令用户满意的数字产品，提升用户体验并赢得市场竞争优势。

四、古登堡站点的设计：样式调整、内容结构层次和功能设定

设计一个出色的古登堡站点需要考虑样式调整、内容结构层次和功能设定三个方面。

4.1 样式调整

样式调整是设计古登堡站点的关键之一。通过调整样式，可以定制站点的外观和风格，使其与品牌形象一致。使用CSS技术可以更改字体、颜色、边距、背景等样式属性，以满足特定的设计要求。将样式调整应用于古登堡站点的各个组件，如标题、段落、按钮等，可以提高站点的整体一致性和美观性。

🎨 在FSE中进行样式调整的三个层级：

🔧 全局样式面板详解：

进入路径：外观 → 编辑器 → 点击右上角「样式」图标（半黑半白的圆形）

可调整的内容包括：

• 排版（Typography）
  • 文本：正文字体、大小、行高
  • 链接：链接颜色、悬停效果
  • 标题：H1-H6的字体、大小、颜色
  • 按钮：按钮文字样式
• 颜色（Colors）
  • 调色板管理
  • 背景色、文字色
  • 链接颜色配置
• 布局（Layout）
  • 内容宽度（默认宽度）
  • 宽幅宽度（Wide width）
  • 内边距设置
• 块（Blocks）
  • 针对特定块类型的样式覆盖
  • 例如：所有按钮块的圆角设置

4.2 内容结构层次调整或增加细化

古登堡站点的内容结构层次对于用户体验和信息传达非常重要。通过调整或增加细化内容结构层次，可以使站点的信息更有条理性和易读性。使用古登堡的块编辑功能，可以轻松创建各种内容组件，如文章列表、图像库、媒体播放器等。通过将内容组件组织成逻辑结构，并使用标题、子标题、列表等元素，可以使用户更轻松地浏览和理解站点的内容。

📐 内容结构的层次化思维：

页面级结构：

├── 页眉（Header）
│   ├── 站点Logo
│   ├── 主导航
│   └── 辅助操作（搜索/CTA按钮）
├── 主内容区（Main Content）
│   ├── Hero区域
│   ├── 内容区块1
│   ├── 内容区块2
│   └── ...
├── 侧边栏（可选）
└── 页脚（Footer）
    ├── 导航链接
    ├── 联系信息
    └── 版权声明

内容块级结构（以一个服务介绍区块为例）：

├── 组块（Group） - 作为容器
│   ├── 标题块（H2）- 区块主标题
│   ├── 段落块 - 区块引言描述
│   └── 列块（Columns）
│       ├── 列1：图标+标题+描述
│       ├── 列2：图标+标题+描述
│       └── 列3：图标+标题+描述

💡 结构优化建议：

1. 使用组块（Group）作为逻辑容器：将相关内容包裹在组块中，便于整体控制背景、间距和布局
2. 合理使用标题层级：确保H1→H2→H3的语义正确，有利于SEO和无障碍
3. 利用行块（Row）和堆叠块（Stack）：控制水平和垂直方向的元素排列
4. 善用间隔块（Spacer）：精确控制元素间距，但避免过度使用

4.3 功能设定

古登堡提供了丰富的功能设定选项，使站点更具交互性和个性化。通过添加古登堡块的插件或自定义开发块，可以为站点增加各种功能，如表单、社交媒体分享、图片轮播等。根据站点的需求，选择合适的功能块，并进行相应的定制和配置，可以提供更丰富的用户体验和功能扩展。

🧩 常用功能块及其用途：

📦 推荐的功能增强插件：

以下插件可以扩展古登堡的功能块库：

⚠️ 选择插件的原则：

• 优先使用核心块，只在必要时添加插件
• 选择持续更新、评价良好的插件
• 注意插件的性能影响
• 避免功能重复的多个插件

4.4 组件化设计

将古登堡站点分解为组件是一种有效的设计方法。通过将每个站点元素（如标题、导航栏、页脚）视为独立的组件，可以更好地管理和调整站点的样式、内容和功能。组件化设计使得对站点的修改和更新更加模块化和灵活，同时也提高了站点的可维护性和可扩展性。使用古登堡的块编辑功能，可以轻松创建和复用各种组件，使站点设计更加高效和一致。

🔄 WordPress块模式（Patterns）系统：

块模式是块主题中实现组件化的核心机制。它允许你将一组块保存为可复用的模板片段。

创建自定义模式的方法：

1. 在编辑器中创建：
   • 选中一组块 → 点击工具栏的三点菜单 → 选择「创建模式」
   • 给模式命名并选择分类
   • 可选择是否「同步」（同步模式修改会影响所有使用位置）
2. 从模式库导入：
   • 访问 WordPress.org Patterns 目录
   • 复制模式代码，粘贴到编辑器中

同步模式 vs 非同步模式：

4.5 本章小结

总之，设计一个出色的古登堡站点需要考虑样式调整、内容结构层次和功能设定三个方面。通过调整样式、调整或增加细化内容结构层次以及选择和定制功能块，可以实现古登堡站点的个性化和用户友好性。同时，将站点分解为组件，并使用古登堡的块编辑功能，可以实现模块化和灵活的设计，提高站点的可维护性和可扩展性。通过综合考虑这些方面，你将能够设计出令人印象深刻的古登堡站点，为用户提供优秀的用户体验和功能。

🎯 设计清单（Design Checklist）：

• ☐ 在 theme.json / 全局样式中建立设计规范
• ☐ 定义清晰的内容层次结构
• ☐ 创建可复用的块模式库
• ☐ 优化模板和模板部件
• ☐ 测试响应式表现（桌面/平板/手机）
• ☐ 验证无障碍合规性
• ☐ 检查Core Web Vitals性能指标

五、FSE 设计进阶：极简实现 animate-fade-up 动画

在 FSE 架构下，应当追求"资源按需加载"和"无阻塞渲染"。通过原生 JavaScript 的 IntersectionObserver 接口，我们可以实现高性能的滚动触发动画。

5.1 核心动画逻辑 (JavaScript)

将以下代码放入网站编辑器的 "页脚 (Footer)"模板部分，使用 "自定义 HTML"区块 插入。

这段代码采用了性能最优的"一次性触发"逻辑：一旦元素进入视野并完成动画，浏览器将停止监测该元素，释放系统资源。

<script>
/**
 * FSE 极简滚动动画逻辑
 * 性能优化：使用 IntersectionObserver 并执行 unobserve
 */
(function() {
  const observerOptions = {
    threshold: 0.15 // 当 15% 的元素进入视野时触发
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 添加激活类名
        entry.target.classList.add('is-visible');
        // 一次性动画：触发后取消观察，节省内存
        observer.unobserve(entry.target);
      }
    });
  }, observerOptions);

  // 确保在页面加载后执行
  const initAnimation = () => {
    document.querySelectorAll('.animate-fade-up').forEach(el => {
      observer.observe(el);
    });
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initAnimation);
  } else {
    initAnimation();
  }
})();
</script>

5.2 视觉表现层 (CSS)

将以下 CSS 放入网站编辑器的 "样式 (Styles) → 额外 CSS (Additional CSS)" 中。

这里使用了更高级的 cubic-bezier（贝塞尔曲线），比起普通的 ease-out，它会让动画在结束时有一种轻微的"阻尼感"，视觉效果更高端。

/* 初始状态：透明且下移 */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px); /* 30px 位移比 50px 更显细腻 */
  transition: 
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform; /* 提升 GPU 硬件加速 */
}

/* 激活状态：完全显示 */
.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 针对减损动画的用户设置（无障碍优化） */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

5.3 如何在 FSE 编辑器中使用

作为设计师，你无需再触碰代码，只需在设计界面进行操作：

1. 在 Site Editor 中选中任何区块（如：组、列、图片或标题）
2. 打开右侧设置面板的 "高级 (Advanced)" 选项卡
3. 在 "额外 CSS 类 (Additional CSS Class(es))" 输入框中，填入：animate-fade-up

5.4 为什么这个方案对速度"零影响"？

5.5 设计师贴士 💡

首屏注意：建议不要给首屏最顶部的元素（如 Hero Banner）添加滚动动画。首屏元素应当立即呈现，以获得最佳的视觉性能评分。

层级感：你可以通过给不同区块设置不同的 transition-delay（在高级 CSS 类里手动加一点内联样式），实现"错落有致"的入场效果。

更多动画变体（可选扩展）：

/* 从左侧滑入 */
.animate-fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 缩放入场 */
.animate-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, 
              transform 0.6s ease-out;
}
.animate-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

更新JavaScript以支持多种动画类：

const initAnimation = () => {
  const animationClasses = [
    '.animate-fade-up', 
    '.animate-fade-left', 
    '.animate-scale-in'
  ];
  document.querySelectorAll(animationClasses.join(',')).forEach(el => {
    observer.observe(el);
  });
};

通过这种方式，你不仅保持了网站的极速，还展示了作为顶级设计师对 Web 标准的深刻理解。

六、课程延伸阅读与资源

为了帮助你进一步深入学习FSE和块主题开发，以下是一些推荐的官方资源：

官方文档

学习路径建议

初学者 → 使用官方默认块主题实践
    ↓
进阶者 → 学习 theme.json 定制
    ↓
开发者 → 创建自定义块和模式
    ↓
专家 → 开发完整的块主题