如何在 WordPress 6.0 块主题中创建样式变体

Avatar of Ganesh Dahal
Ganesh Dahal 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度！

块主题的一项功能——全局样式，是我最喜欢的块主题创建部分之一。WordPress 中的“全局样式变体”的概念是在Gutenberg 12.5中引入的，它允许主题作者创建块主题的替代变体，这些变体具有颜色、字体、排版、间距等的不同组合。存储在/styles文件夹下的不同theme.json文件“允许用户在同一主题中快速轻松地在不同的外观之间切换”。

全局样式面板 UI 处于积极的开发迭代中。有关此功能开发的更多详细信息可以在此处找到并跟踪：此 GitHub 票证（#35619）。

在本文中，我将逐步介绍如何使用备用/styles/theme.json 文件创建全局样式变体的概念验证，并通过仅交换调色板来创建具有不同颜色模式的子主题。

目录

先决条件

本文面向那些对 WordPress 块主题有基本了解，并且熟悉使用完整站点编辑器（FSE）界面的人员。如果您不熟悉块主题和 FSE，可以从 CSS-Tricks 上的这篇WordPress 块主题深度介绍和站点编辑器文档开始。这个完整站点编辑网站是学习所有 FSE 功能（包括本文讨论的块主题和样式变体）的最新的教程指南之一。

全局样式变体

为了提供一些背景信息，让我们简要概述一下全局样式变体。Twenty Twenty-Two（TT2）主题负责人和 Automattic 设计总监Kjell Reigstad 通过这条推文和GitHub 票证 #292引入了全局样式变体作为子主题。在该票证中，Kjell 指出，它们最初旨在作为备用颜色模式和字体组合，但它们可用于构建简单的子主题。

Kjell 的此示例演示了如何从侧边栏中提供的选项中选择不同的样式组合。

从那时起，Automattic 主题团队一直在试验该概念以创建可变子主题（仅可变颜色和字体），包括以下内容

  • geologist，具有蓝色、奶油色、石板色、黄色变体
  • quadrat，具有黑色、绿色、红色、白色和黄色版本

全局样式切换器

Gutenberg 12.5 版本引入了全局样式切换器，它允许用户通过存储在/styles文件夹下的不同theme.json文件快速轻松地在同一主题中切换不同的外观。

允许通过theme.json切换全局样式变体的概念已在 GitHub 上讨论了一段时间。Gutenberg 的首席工程师Matias Ventura 最近将其添加到WordPress 6.0 路线图中，使其重新受到重视。

拥抱由json变体驱动的样式替代方案。这在围绕新默认主题的各种视频中都有所暗示，并且应该在 6.0 中完全揭示和展示。其中一个并行目标是仅使用样式创建 TT2 的几个不同的变体。（35619）

Matias Ventura，“6.0 预览路线图”

主题样式变体切换器的最新开发迭代可用于 Gutenberg 13.0，并包含在 WordPress 6.0 中。在此探索 WordPress 6.0视频中，Automattic 产品联络员 Anne McCarthy 对其主要功能进行了概述，包括本文讨论的样式变体和 Webfonts API（从 5:18 开始）。

主题样式变体与子主题

在我之前的文章中，我简要介绍了构建块子主题。全局样式变体模糊了alternate-theme.json和子主题之间的界限。例如，最近发布的alante-dark子主题与其父主题之间的唯一区别在于子主题中的alternate.json文件，它会覆盖全局主题样式，如下所示

Screenshot of the Visual Studio Code UI displaying the contents of alante-dark.
alante-dark 主题。

同样，WordPress 目录中的两个最近的Alara子主题——Framboise和Richmond——仅在其单个theme.json文件中有所不同。

第 1 节：创建主题样式变体

在子主题文件夹的根目录下，创建一个/styles文件夹，其中包含作为 JSON 文件的样式变体。在此演示示例中，我创建了 Twenty Twenty-Two 的theme.json调色板的三个变体——blue.json、maroon.json和pink.json——方法是交换前景和背景颜色

Screenshot of the Visual Studio Code UI displaying the child theme file structure of "blue.json", "maroon.json", and "pink.json" in the styles directory.
“blue.json”、“maroon.json”和“pink.json”在 styles 目录中的子主题文件结构。

这是在从管理面板（位于**外观→编辑器**）中单击样式图标后的最终结果

Animated GIF showing the theme variations in WordPress.
逐步浏览 WordPress 管理界面以选择“蓝色”、“栗色”和“粉色”样式。

单击其他样式按钮（最近修订为浏览器样式），除了其原始样式外，还会显示“蓝色”、“栗色”和“粉色”颜色样式图标。

要更改和选择样式，请选择您喜欢的变体，然后单击保存按钮（右上角），该按钮显示在浏览器的前端。

在Gutenberg 13.0中提供了为备用样式变体添加标签和使用悬停动画效果的文件名。

步骤 1：设置和安装

首先，使用一些虚拟内容安装和设置一个 WordPress 站点。对于此演示，我进行了新的 WordPress 安装，激活了 Twenty Twenty-Two 主题，并添加了Gutenberg 测试数据。

本文讨论的主题样式变体和 WebFonts API 需要安装和激活 Gutenberg 13.0 插件或 WordPress 6.0。

步骤 2：创建 TT2 子主题

在这个演示子主题示例中，让我们稍微更改一下正文颜色与页眉和页脚颜色的区别，并将所有网站内容居中。

The lower part of the site design are not visible because it is not scrolled into view. Site navigation is present in the header. A large banner image with a bird is visible. A date and title for the latest blog entry is also visible.
演示主题在浏览器窗口中默认外观的屏幕截图。

步骤 3：创建 JSON 文件

在子主题的根文件夹中创建/styles，并在其中创建blue、maroon和pink.json文件。

__ style.css
__ theme.json
__ functions.php
__ index.php
__ templates
__ ...
__ parts
__ ...
__ styles
__ blue.json
__ maroon.json
__ pink.json

步骤 4：创建备用主题 JSON 文件

接下来，在/styles文件夹下创建具有所需调色板的alternate-theme.json文件。对于此演示示例，我创建了三个调色板（blue、maroon和pink）。以下是maroon.json的代码。

{
  "version": 2,
  "title": "Maroon",
  "settings": {
    "color": {
      "palette": [
        { "slug": "foreground", "color": "#7C290F", "name": "Foreground" },
        { "slug": "background", "color": "#ffffff", "name": "Background" },
        { "slug": "foreground-dark", "color": "#000000", "name": "Foreground Dark" },
        { "slug": "background-body", "color": "#ffd8be", "name": "Background Body" },
        { "slug": "primary", "color": "#000000", "name": "Primary" },
        { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" },
        { "slug": "tertiary", "color": "#55ACEE", "name": "Tertiary" }
      ]
  },
  "typography": {}
},
"styles": {
  "color":
      {
        "background": "var(--wp--preset--color--background-body)",
        "text": "var(--wp--preset--color--foreground-dark)"
      },
  "elements": {
      "link": {
        "color": { "text": "var(--wp--preset--color--primary)" }
      }
    }
  }
}

另外两个备用blue.json和pink.json文件交换了foreground和background-body、foreground-dark和primary color属性的值，并使用它们各自的蓝色和粉红色十六进制颜色值。

第 2 部分：用例示例

正如我在我之前的文章中提到的，我一直在研究块主题并将其用于我自己的个人项目网站。受Gutenberg插件中的主题样式变体和Webfonts API功能的启发，我开始调整我的正在进行的块主题，添加了备用的深色模式，并配置了Webfonts API。

在本节中，我将逐步引导您了解我如何创建TT2 Gopher Blocks，这是我为本文创建的正在进行的块主题的演示姊妹主题。该主题包括使用主题样式变体和Webfonts API创建的栗色、深色和浅色模式，这些模式在Gutenberg 12.8 版本中可用。

Showing the homepage we are creating with style variations in WordPress.
显示使用带有栗色默认颜色的 TT2 Gopher 主题的示例网站的屏幕截图。

TT2 Gopher 主题的一些亮点包括居中、单列内容显示、独特的页眉和页脚，以及更用户友好的归档和搜索页面。

TT2 Gopher Blocks的副本可在GitHub 存储库中获取，您可以将其分叉并自定义。

在 WordPress 上创建暗模式

首先，关于暗模式的一些背景信息。暗模式是一种个人偏好，开发人员提供它或其他模式切换开关，例如在此网站上，对于大多数普通开发人员来说，这不是一项小任务。创建暗模式在 CSS-Tricks 上有很好的介绍，包括这篇完整的暗模式指南和暗模式排版。

在 WordPress 网站中，我们可以使用WP Dark Mode插件添加暗模式切换。WP Engine 的Erin Myers和WPBeginner描述了如何使用 WP Dark Mode 插件，而 Brenda Barron 在这篇 WPExplorer 文章中列出了其他暗模式插件选项。

在没有插件的情况下，在 WordPress 块主题中创建暗模式需要几个步骤。一年前，Ari Stathopoulos 在 GitHub 上为 TT1 Blocks 主题创建了暗模式支持。查看此处的示例，它涉及一些 JavaScript 知识来创建资源（例如，切换器、自定义、编辑器模式支持）、深色CSS 变量和扩展的functions.php文件。

在这段简短的视频中，Automattic 的 Anne McCarthy 演示了如何通过在 TT2 的/styles文件夹中添加kllejr 的 JSON 代码片段，轻松创建 TT2 块主题的深色模式全局样式变体。

创建演示 TT2 Gopher 块主题

TT2 Gopher 是默认Twenty Twenty-Two主题的非常简单且经过修改的版本。它包含三种主题样式变体——栗色、深色和白色。

描述每个自定义步骤超出了本文的范围，但您可以从我深入介绍 WordPress 块主题的文章以及 WordPress.org 上的块编辑器手册中了解更多信息。

TT2 Gopher 主题颜色和字体组合的简要概述包括

  • 浅色模式
    • 页眉为白色，页脚具有烟熏的正文背景颜色。
    • Open Sans 是主要字体。
  • 暗模式
    • 页眉和页脚为黑色，正文背景使用较浅的深色。
    • Source Serif Pro 是主要字体。
  • 栗色模式
    • 页眉和页脚均为深栗色，正文背景为较浅的黄色。
    • Work Sans 是主要字体。

让我简要介绍一下我如何创建主题样式变体。

添加和配置网络字体

Gutenberg 12.8 插件引入了一个新的Webfonts API，允许作者以“性能友好、隐私友好和面向未来的方式”加载本地（捆绑）字体。此功能可以在块主题中以 PHP 方式或theme.json方式实现。

目前，此功能仅适用于与块主题捆绑在一起的字体，不支持Google 托管字体，因为存在隐私问题。有关 Webfonts API 开发当前状态的更多详细信息，请参阅这篇 make WordPress core 文章和这篇 WP Tavern 文章。

步骤 1：在块主题中下载并添加字体

TT2 主题将 Source Serif Pro 字体文件添加到主题的assets/fonts文件夹中。GitHub 存储库中还提供了另外两种字体——Work Sans和Public Sans。

步骤 2：注册网络字体

在 TT2 主题中，本地Source Serif Pro网络字体在其functions.php文件中使用 PHP 注册。

function twentytwentytwo_get_font_face_styles() {
  return "
  @font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) . "') format('woff2');
  }
  @font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ) . "') format('woff2');
  }
  ";
}

Gutenberg 12.8 引入了使用theme.json文件注册本地网络字体的能力。演示 TT2 Gopher 主题中的以下theme.json代码片段显示了如何在栗色主题样式变体中注册本地 Work Sans 网络字体。

"typography": {
  "fontFamilies": [
    {
      "fontFamily": "'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif",
      "slug": "work-sans",
      "name": "Work Sans",
      "fontFace": [
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "400", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] },
        { "fontFamily": "Work Sans", "fontDisplay": "block", "fontWeight": "700", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf" ] }
      ]
    }
  ]
}

关于如何在区块主题中注册和使用本地网络字体的更多信息，请参阅本教程和这篇WP Tavern文章。

创建主题样式变体

按照上一节中描述的步骤，我在子主题的/styles文件夹中创建了theme.json文件的两个备用版本——white.json和black.json，其中包含不同的颜色和字体组合。

此功能需要theme.json的版本2。从Gutenberg 12.5开始，还可以在theme.json中添加标题，以便在站点编辑器中显示样式标签，或者默认情况下将显示文件名（不带扩展名）。

这是一个white.json的示例

{
  "version": 2,
  "title": "White",
  "settings": {
    "color": {
      "palette": [
        { "slug": "foreground", "color": "#000000", "name": "Foreground" },
        { "slug": "background", "color": "#f2f2f2", "name": "Background" },
        { "slug": "background-header", "color": "#ffffff", "name": "Background header" },
        { "slug": "primary", "color": "#0d0d0d", "name": "Primary" },
        { "slug": "secondary", "color": "#F0EAE6", "name": "Secondary" },
        { "slug": "tertiary", "color": "#eb3425", "name": "Tertiary" },
        { "slug": "quaternary", "color": "#7c7e83", "name": "Quaternary" }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
        "fontFamily": "\"Public Sans\", sans-serif",
        "name": "Public Sans",
        "slug": "public-sans",
        "fontFace": [
          { "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:.assets/fonts/publicSans/PublicSans-VariableFont_wght.ttf.woff2" ] },
          { "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/publicSans/PublicSans-Italic-VariableFont_wght.ttf.woff2" ] }
        ]
      }
    ]
  }
},
"styles": {
  "blocks": {
    "core/image": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/post-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
    },
    "core/query-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
    },
    "core/post-featured-image": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/site-logo": {
      "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" }
    },
    "core/site-title": {
      "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)", "fontWeight": "normal" }
    }
    },
    "color": { "background": "var(--wp--preset--color--background)", "text": "var(--wp--preset--color--foreground)" },
    "elements": {
      "h1": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--colossal)" }
      },
      "h2": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "600", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" }
      },
      "h3": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--custom--typography--font-size--huge)" }
      },
      "h4": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "300", "fontSize": "var(--wp--preset--font-size--x-large)" }
      },
      "h5": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "700", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
      },
      "h6": {
        "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontWeight": "400", "textTransform": "uppercase", "fontSize": "var(--wp--preset--font-size--medium)" }
      },
      "link": {
        "color": { "text": "var(--wp--custom--color--foreground)" }
      }
    },
    "typography": { "fontFamily": "var(--wp--preset--font-family--public-sans)", "fontSize": "var(--wp--preset--font-size--normal)" }
  }
}

此代码交换了来自theme.json的颜色调色板，还注册并定义了本地Public Sans字体文件。

black.json也非常相似，并使用在functions.php文件中注册的Source Serif Pro字体。

Screenshot of the light color theme on the left. And screenshot of the dark color theme on the right. The heading navigation and first blog entry are visible.
TT2 Gopher的浅色（左）和深色（右）颜色主题的并排比较。

带有主题样式变体的区块主题示例

  • Twenty Twenty-Two——第一个包含样式变体的默认主题。其与WordPress 6.0捆绑在一起的更新版本1.2包含三种样式变体——“蓝色”、“粉色”和“瑞士”——允许用户快速在不同的视觉样式之间切换。
  • Frost——一个具有深色主题样式变体的实验性区块主题。
  • Alara——拥有超过100个活跃安装，并包含7个样式变体。
  • Wabi——为Rich Tabor网站提供支持，包含3个样式变体和300多个活跃安装。
  • Brisky——拥有超过600个安装和一个深色主题样式变体。
  • Pendant——Automattic主题团队在GitHub上开发的主题，包含3个主题样式变体。

在这篇WP Tavern文章中，Justin推测主题作者可以通过将其与网站访问者的设置绑定来利用此新功能，而一些用户可能更喜欢调整他们的网站，使其具有基于季节或事件的设计外观。这可能还为时尚早，但只有时间才能证明这个强大的功能将如何被主题作者和用户所利用。

总结

创建具有不同排版和颜色组合的区块主题的样式变体变得非常简单，无需使用插件。这是我最喜欢的区块编辑器功能之一，我计划在我的个人项目中应用它。

在我看来，主题样式变体绝对是区块主题的改变游戏规则，有了这个方便的功能，可能就不需要子主题，甚至不需要许多千篇一律的区块主题了。一些设计良好的基础区块主题，类似于Automattic主题团队的block-canvas或blockbase（GitHub上正在开发中的基础区块主题），可以使用主题样式变体进行自定义。

资源

暗模式

嘘！创建一个DigitalOcean账户，并获得$200免费信用额度用于基于云的托管和服务。

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.