WordPress 样式变体（Style Variations）完全指南

发布于2024年1月18日2026年7月30日作者:XQcms

在 WordPress 主题开发中，样式变体（Style Variations）是一个让主题设计更加灵活的强大功能。简单来说，它允许你为主题提供多套“皮肤”，用户可以在站点编辑器中一键切换，而无需编写任何代码。本文基于 WordPress 官方文档，结合作者多年的主题开发经验，为你解析样式变体的概念、用法和实战技巧。无论你是主题开发者还是进阶用户，这篇指南都能帮你快速掌握这项技能，让你的 WordPress 站点设计工作流程更加。

什么是样式变体？

样式变体本质上是 theme.json 文件的“替身”。在 WordPress 块主题（Block Theme）中，theme.json 负责定义主题的全局设置（如颜色、字体、间距等）和样式。而样式变体，就是存放在主题 /styles 文件夹下的、具有不同配置的 JSON 文件。

当你激活一个样式变体时，它的配置会像用户通过站点编辑器手动调整一样，被保存到网站的数据库中。这意味着，用户可以随时在多个预设外观之间切换，而不会丢失他们自己的个性化设置。

一个生活化的比喻

想象你正在经营一家餐厅（这就是你的 WordPress 主题）。theme.json 是你的基础菜单（招牌菜、固定装修）。而样式变体，则像是你为不同节日或活动准备的特别菜单：情人节套餐、圣诞套餐、儿童节套餐……它们都是基于基础菜单的变体，但又有各自独特的风格（配色、字体、装饰），用户（餐厅老板）可以随时切换使用。

基础菜单 vs. 节日套餐

theme.json（基础菜单）：存放在主题根目录，是主题的“默认外观”。
样式变体（节日套餐）：存放在 /styles 文件夹，文件名自定义（如 seafood.json），通过 "title" 字段在界面中显示名称。

为什么使用样式变体而不是子主题？

这是很多开发者新手会混淆的地方。两者虽然都能改变主题外观，但适用场景完全不同。

子主题（Child Theme）

子主题是一个完整的、独立的主题，它继承父主题的所有功能，并允许你重写任何部分——包括 PHP 模板文件、CSS、JavaScript，当然也包括 theme.json。它适合需要对主题进行“深度定制”的场景，比如添加新功能、修改模板结构。

样式变体（Style Variation）

样式变体仅仅是一个 JSON 配置文件，它的“权力范围”仅限于 theme.json 所定义的设置和样式。它不能添加新功能，也不能修改 PHP 模板。

核心区别来了：当你切换样式变体时，其配置会写入数据库，被视为“用户定制”。因此，如果你后续更新了主题中的该样式变体文件，用户的网站不会自动更新——因为他们已经“拥有”了这份数据。而子主题的 theme.json 更新后，用户会立即看到变化。

什么时候用谁？

如果只是提供不同的配色、字体方案 → 用样式变体。
如果需要修改模板结构或添加 PHP 功能 → 用子主题。

实战：创建你的一个样式变体

1. 文件结构

假设你的主题名为 restaurant-theme，你想添加一个名为“海洋风”（Ocean Breeze）的样式变体。

你的主题文件夹结构应该像这样：

text

restaurant-theme/
├── theme.json          // 默认配置
├── styles/             // 所有样式变体都放这里
│   └── ocean-breeze.json
├── index.php
└── style.css

2. 编写样式变体文件

打开 ocean-breeze.json，内容结构如下：

json

{
  "version": 2,
  "title": "海洋风",
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0A7E8C",
          "name": "深邃海洋"
        },
        {
          "slug": "secondary",
          "color": "#F2C94C",
          "name": "沙滩阳光"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "\"Dancing Script\", cursive",
          "name": "手写体",
          "slug": "handwriting"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#E8F4F8",
      "text": "#1A3B47"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--handwriting)",
      "fontSize": "1.125rem"
    }
  }
}

解释一下这份配置：

version：必须与主题的 theme.json 版本一致（目前为 2）。
title：这是用户在站点编辑器中看到的名称。
settings：定义可供用户使用的“预设值”，比如颜色调色板、字体列表。
styles：应用这些预设值，定义全局背景色、文字颜色、字体等。

注意：在 styles 中引用 settings 里定义的字体时，需要使用 CSS 自定义属性（变量）格式，即 var(--wp--preset--font-family--slug)。

在用户界面中使用样式变体

当你把上述文件放置好后，用户只需进入站点编辑器（Site Editor） → 点击样式（Styles）面板 → 在浏览样式变体（Browse style variations）区域，就能看到你定义的“海洋风”选项了。

用户点击选中后，该变体的所有配置就会被应用到网站上，并且保存到数据库。

高级技巧与注意事项

1. 变体的“继承”特性

样式变体不是独立存在的，它会与 theme.json 合并。换句话说，你只需要在变体文件中写出与默认配置不同的部分即可。这大大减少了配置文件的体积。

2. 版本更新与用户数据

这是新手容易踩坑的地方。如前所述，一旦用户选择了某个样式变体，该数据就会“固化”到数据库。当你更新主题并修改了该变体的 JSON 文件时，已选择该变体的用户的网站不会同步更新。

如何让用户获得更新？
用户需要手动切换回默认样式，然后再重新选择该变体。这其实是一个“重置”操作，会覆盖数据库中的旧数据。

佳实践：如果你在更新中修复了重要问题，可以在更新日志中提醒用户，并建议他们通过上述方式刷新数据。

3. 更多可以用在变体中的配置

任何 theme.json 支持的属性，都可以用在样式变体中，包括但不限于：

间距（spacing）
边框（border）
阴影（shadow）
自定义 CSS 属性（custom）

你可以尽情发挥想象力，创造出多样化的设计方案。

总结

样式变体是 WordPress 块主题生态中一个具价值的特性。它让“一键换肤”成为可能，大地提升了用户体验，同时降低了主题开发者维护多套设计方案的成本。

关键点回顾：

样式变体是存放在 /styles 文件夹的 JSON 文件，通过 title 字段命名。
它只控制 theme.json 中定义的设置和样式，适合提供不同配色、字体方案。
与子主题不同，变体数据会被写入数据库，主题更新不会自动覆盖用户已选变体。
使用 CSS 自定义变量在 styles 中引用 settings 中定义的值。

掌握样式变体，你就能在主题设计上提供更多可能性，让用户拥有更加个性化的建站体验。对于初学者来说，从创建一个简单的配色变体开始，逐步深入，你会发现它远比想象中强大。