如何在WordPress 6.0区块主题中创建风格变化

前端小工
251 阅读13分钟

全局样式是块状主题的一个特征，是创建块状主题时我最喜欢的部分之一。在WordPress中，全局风格变化的概念是在Gutenberg 12.5中引入的，这将允许主题作者用不同的颜色、字体、排版、间距等组合创建一个块状主题的交替变化。不同的theme.json 文件存储在/styles 文件夹下，"让用户在同一主题中快速、轻松地切换不同的外观"。

全局样式面板UI正在积极开发迭代中。关于这个功能开发的更多细节可以在这个GitHub票据（#35619）上找到并跟踪。

在这篇文章中，我将通过使用文件上的备用/styles/theme.js，创建一个概念验证的全局样式变化，并只通过交换调色板来创建具有不同颜色模式的子主题。

内容表

前提条件

这篇文章是为那些对WordPress块状主题有基本了解，并且对全站编辑器（FSE）界面有一定了解的人准备的。如果你是块状主题和FSE的新手，你可以从CSS-Tricks的这个WordPress块状主题和网站编辑器文档的 深度介绍开始。这个全站编辑网站是学习所有FSE功能的最新教程指南之一，包括本文中讨论的块状主题和样式变化。

全局风格的变化

为了了解一些背景情况，让我们简单介绍一下全局风格的变化。Twenty Twenty-Two（TT2）主题负责人和Automattic设计总监Kjell Reigstad通过这条推文和GitHub票#292介绍了全局风格变化，作为子主题。在票据中，Kjell指出，它们最初的目的是作为备用的颜色模式和字体组合，但它们可以用来构建简单的子主题。

Kjell的这个例子演示了如何从侧边栏的选项中选择不同的风格组合。

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

  • 地质学家，有蓝色、奶油色、石板色、黄色的变化
  • 具有黑色、绿色、红色、白色和黄色版本的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 "的子主题文件结构。

这里是在管理仪表板上点击样式图标后的最终结果（位于外观→编辑器）。

Animated GIF showing the theme variations in WordPress.

在WordPress管理界面中行走，选择 "蓝色"、"栗色 "和 "粉色 "样式。

点击 "其他样式"按钮（最近修改为 "浏览器样式"），除了它的原始样式外，还显示 "蓝色"、"栗色 "和 "粉色 "颜色样式图标。

要改变和选择一种风格，选择你喜欢的变体，并点击保存按钮（右上角），它显示在浏览器的前端。

在Gutenberg 13.0中，为备用样式变体添加标签和带有悬停动画效果的文件名是可用的。

第一步：设置和安装

首先，安装并设置一个带有一些假内容的WordPress网站。对于这个演示，我做了一个全新的WordPress安装，激活了Twenty Twenty-Two主题，并添加了Gutenberg测试数据。

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

第二步：创建一个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.

浏览器窗口中演示主题的默认外观截图。

第三步：创建JSON文件

在你的子主题的root 文件夹中创建/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 属性的值与它们各自的blue 和pink 的十六进制颜色值交换。

第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黑暗模式插件添加一个黑暗模式的切换。WP Engine和WPBeginner 的Erin Myers描述了如何使用WP黑暗模式插件，而Brenda Barron在WPExplorer的这篇文章中列出了其他黑暗模式插件的选择。

在没有插件的情况下，在WordPress的块状主题中创建一个黑暗模式涉及几个步骤。一年多以前，Ari Stathopoulos在GitHub上为TT1 Blocks主题创建了一个黑暗支持。看看这里的例子，它涉及到一些JavaScript知识来创建[资产](http://(github.com/WordPress/t…](github.com/WordPress/t… functions.php文件。

在这个简短的视频中，Automattic的Anne McCarthy演示了通过在TT2/styles 文件夹中添加kllejr的gist 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 方式在一个块状主题中实现。

目前，该功能仅适用于与块状主题捆绑的字体，由于隐私问题，不支持谷歌托管的字体。关于Webfonts API发展现状的更多细节，在这篇使WordPress核心的文章和这篇WP Tavern文章中有所涉及。

第一步：下载并在块主题中添加字体

TT2主题将Source Serif Pro字体文件添加到主题的assets/fonts 文件夹中。另外两个字体--Work Sans 和Public Sans --也在他的GitHub仓库中提供。

第二步：注册网络字体

在TT2主题中，本地的Source Serif Pro webfonts在其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 。自从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的浅色（左）和深色（右）主题的并排比较。

总结

在不使用插件的情况下，用不同的排版和颜色组合创建一个块状主题的风格变化已被大大简化。这是我最喜欢的块状编辑器的功能之一，我打算在我的个人项目中应用。

在我看来，主题风格的变化对于块状主题来说绝对是一个游戏规则的改变者，有了这个方便的功能，可能就不需要儿童主题了，甚至也不需要很多熟知的块状主题。一些精心设计的基础块状主题，类似于Automattic主题团队的block-canvas或blockbase（GitHub上正在进行的基础块状主题），可以用主题风格变化来定制。

avatar
文章
阅读
粉丝