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

全球风格是块主题的一个功能，是我最喜欢创建块主题的部分之一。 Gutenberg 12.5中引入了WordPress中全球样式变化的概念，这将使主题作者能够创建具有不同颜色，字体，字体，版式，间距等不同组合的块主题的替代变化。不同的主题等。json文件存储在 /样式下 /样式文件夹中。

全球样式面板UI正在积极开发迭代中。有关此功能开发的更多详细信息，可以在此GitHub票（＃35619）上找到和跟踪。

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

目录

• 目录
• 先决条件
• 全球风格的变化
• 第1节：创建主题样式变化
• 第2节：用例的示例
• 具有主题样式变化的块主题的示例
• 总结
• 资源

先决条件

本文适用于那些对WordPress封锁主题的基本了解的人，以及使用完整站点编辑器（FSE）接口的熟悉程度。如果您不熟悉主题和FSE，则可以通过对WordPress Block Block主题和网站编辑器文档进行深入的介绍在CSS-Tricks上开始。这个完整的网站编辑网站是最新的教程指南之一，旨在学习所有FSE功能，包括本文讨论的块主题和样式变体。

全球风格的变化

对于某些背景，让我们简要概述全球样式变化。二十二十二（TT2）主题负责人和汽车设计总监Kjell Reigstad通过此推文和GitHub Ticket＃292引入了全球样式变体，作为儿童主题。 Kjell在门票中指出，它们最初是作为替代色图案和字体组合的，但可以用于构建简单的孩子主题。

来自Kjell的示例演示了如何从侧边栏中可用的选项中选择不同样式组合。

从那时起，汽车主题团队一直在尝试该概念以创建可变的儿童主题（仅可变颜色和字体），其中包括以下内容：

• 蓝色，奶油，石板，黄色变化的地质学家
• Quadrat，黑色，绿色，红色，白色和黄色版本

全球样式切换器

Gutenberg 12.5发行版推出了一个全局样式切换器，该切换器将通过不同的主题在同一主题中快速，轻松地在不同的主题中切换。JSON文件存储在A /样式文件夹下。

允许通过主题切换全局样式变化的概念已在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）（开始5:18）。

主题样式变体与儿童主题

在上一篇文章中，我简要介绍了建筑块儿童主题。全球风格的变化模糊了替代theme.json和Child主题之间的界限。例如，最近发布的Alante-Dark儿童主题与其父主题之间的唯一区别是Child主题中的JSON文件，该文件覆盖了这样的全局主题样式：

同样，WordPress目录中最近的两个Alara儿童主题（Framboise and Richmond）仅在其单个主题上有所不同。

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

在您的子主题文件夹的根源下，创建A /样式文件夹，该文件夹将样式变化作为JSON文件。在此演示示例中，我创建了二十二个主题的三个变体。json调色板 - blue.json，maroon.json和pink.json-通过交换前景和背景颜色：

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

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

要更改和选择样式，请选择您的首选变体，然后单击“保存”按钮（顶端），该按钮显示在浏览器的前端。

在Gutenberg 13.0中可以使用将标签添加到具有悬停动画效果的替代样式变化和文件名。

步骤1：设置和安装

首先，安装并设置一个带有一些虚拟内容的WordPress网站。对于此演示，我进行了一个新的WordPress安装，激活了二十二十个主题，并添加了Gutenberg测试数据。

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

步骤2：创建一个TT2儿童主题

在此演示子主题示例中，让我们从标头和页脚颜色中稍微改变身体颜色，并以所有网站内容为中心：

步骤3：创建JSON文件

在孩子主题的根文件夹中使用蓝色，栗色和粉红色。

 __ style.css
__主题
__ functions.php
__ index.php
__模板
__ ...
__ 部分
__ ...
__样式
__蓝色
__ Maroon.json
__粉红色

步骤4：创建替代主题JSON文件

接下来，创建带有所需颜色托盘 /样式文件夹的备用theme.json文件。在此演示示例中，我创建了三个调色板（蓝色，栗色和粉红色）。这是Maroon.json的代码：

 {
  “版本”：2，
  “标题”：“栗色”，
  “设置”： {
    “颜色”： {
      “调色板”：[[
        {“ slug”：“前景”，“颜色”：“＃7c290f”，“ name”：“前景”}，，
        {“ slug”：“ background”，“ color”：“ #ffffff”，“ name”：“ background”}，
        {“ slug”：“前景黑暗”，“颜色”：“＃000000”，“名称”：“前景dark”}，
        {“ slug”：“ background-body”，“ color”：“＃ffd8be”，“ name”：“ background Body”}，
        {“ slug”：“ primary”，“ color”：“＃000000”，“名称”：“ primary”}，
        {“ slug”：“ secondary”，“ color”：“＃ffe2c7”，“ name”：“ secondary”}，
        {“ slug”：“ tertiary”，“ color”：“＃55ace”，“ name”：“ tertiary”}
      这是给出的
  }，，
  “排版”：{}
}，，
“样式”：{
  “颜色”：
      {
        “背景”：“ var（-wp-- preset-彩色 - 背景）”，“
        “ text”：“ var（-wp-- preset--彩色 - 前景黑暗）”
      }，，
  “元素”：{
      “关联”： {
        “颜色”：{“ text”：“ var（ -  wp-- preset--color-- primary）”}
      }
    }
  }
}

其他两个替代蓝色。JSON和PINK。jSON提交了前景和背景体，前景 - 黑暗和主颜色属性的交换值，其各自的蓝色和粉红色六角形颜色值。

第2节：用例的示例

正如我在上一篇文章中指出的那样，我一直在研究块主题，并将其用于我自己的个人项目网站。受到Gutenberg插件中主题样式变化和WebFonts API功能的启发，我开始使用替代深色模式并配置WebFonts API来调整我的工作中的块主题。

在本节中，我将引导您浏览如何创建TT2 Gopher Blocks ，这是我为本文创建的工作中块主题的演示兄弟姐妹。该主题包括使用主题样式变体和WebFonts API创建的栗色，深色和浅色模式，该模式与Gutenberg 12.8版本一起使用。

TT2 Gopher主题的一些亮点包括中心，单栏内容显示，独特的标头和页脚，更易于用户友好的存档和搜索页面。

TT2 Gopher块的副本可在GitHub存储库中找到，您可以分叉并自定义。

在WordPress上创建暗模式

首先，在黑暗模式下进行一些背景。 Dark Mode是个人喜好，开发人员像本网站一样提供它或其他模式切换开关，对于大多数常规开发人员而言，这并不是一件小事。在CSS-tricks上，创建深色模式已覆盖，包括黑暗模式和暗模式版式的完整指南。

在WordPress站点中，我们可以使用WP Dark Mode插件添加一个暗模式切换。 WP Engine和WPBeginner的Erin Myers描述了如何使用WP DAMP模式插件，而Brenda Barron在此WPExplorer帖子中列出了其他Dark Mode插件选项。

在WordPress中创建一个黑模式没有插件的主题涉及几个步骤。一年多以前，Ari Stathopoulos在Github上为TT1块主题创造了黑暗的支持。查看此处的示例，它涉及一些JavaScript知识来创建资产（例如，toggler，customize，oditor-mode-support），深色CSS变量和扩展的function.php文件。

在这个简短的视频中，Automattic的Anne McCarthy展示了通过在TT2 /样式文件夹中添加Kllejr的JSON摘要，创建具有全球样式变化的TT2块主题的暗模式是多么简单。

创建演示TT2 Gopher块主题

TT2 Gopher是默认的二十二十二个主题的非常简单和修改的版本。它包括三种主题样式变体 - 栗色，黑暗和白色。

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

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

• 光模式
  • 标头是白色的，页脚具有烟熏的身体背景颜色。
  • Open Sans是主要字体。
• 黑暗模式
  • 标题和页脚是黑色的，身体背景为浅色。
  • 源Serif Pro是主要字体。
• 栗色模式
  • 标头和页脚都是深色的栗色，具有较浅的淡黄色身体背景。
  • 工作是主要字体。

让我简短地介绍您如何创建主题样式变体。

添加和配置WebFonts

Gutenberg 12.8插件推出了一种新的WebFonts API，该插件使作者可以“以易于友好，对隐私友好且未来的防护方式加载本地（捆绑）字体。”可以以PHP方式或主题为主题以块主题实现此功能。

当前，此功能仅适用于与块主题捆绑在一起的字体，并且由于隐私问题而不支持Google托管字体。此Make WordPress Core文章和WP Tavern文章涵盖了有关WebFonts API开发当前状态的更多详细信息。

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

TT2主题将源Serif Pro字体文件添加到主题的资产/字体文件夹中。 He Github存储库还提供了另外两种字体 - SANS和公共SANS。

步骤2：注册WebFonts

在TT2主题中，本地源Serif Pro WebFonts在其函数中使用PHP注册。php文件：

函数twytwentytwo_get_font_face_styles（）{
  返回 ”
  @font-face {
    字体家庭：“源Serif Pro”；
    字体重量：200 900；
    字体风格：正常；
    字体拉伸：正常；
    字体 - 播放：交换；
    src：url（'“”。get_theme_file_uri（'资产/fonts/sourceserif4variable-roman.ttf.woff2'）。”'）格式（'woff2'）;
  }
  @font-face {
    字体家庭：“源Serif Pro”；
    字体重量：200 900；
    字体风格：斜体；
    字体拉伸：正常；
    字体 - 播放：交换；
    SRC：url（'。
  }
  ”
}

Gutenberg 12.8引入了使用theme.json文件注册本地Web字体的能力。 Demo TT2 Gopher主题的JSON摘要显示了本地工作，请参见amoon主题样式变化中的本地作品：

 “排版”：{
  “ fontfamilies”：[
    {
      “ fontfamily”：“'工作sans'， - 苹果系统，Blinkmacsystemfont，'Helvetica neue'，'Helvetica'，sans-serif'，sans-serif”，
      “ slug”：“工作界”，
      “名称”：“工作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”：“ sans”，“ fontdisplay”：“ block”，“ fontweight”：“ 400”，“ fontstyle”：“ italic”，“ fontstretch”：“ normal”，“ src”，“ src”，“ src”：[file：./ sans/fonts/fonts/fonts/fonts/worksans/worksans/worksans-worksans-workans-itical-itialic-itia-itaik-varghartfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfont。
        {“ fontfamily”：“ sans”，“ fontdisplay”：“ block”，“ fontweight”：“ 700”，“ fontstyle”：“ italic”，“ fontstretch”：“ normal”，“ src”，“ src”，“ src”：[file：./ ands/fonts/fonts/fonts/fonts/forts/forns/forns/forns/forns/forns/forns/worksans-workans-itical-itialic-varghartfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfontfont.
      这是给出的
    }
  这是给出的
}

本教程和本WP Tavern文章中描述了有关如何在块主题中注册和使用本地WebFonts的其他信息。

创建主题样式变化

按照上一节中描述的步骤，我创建了两个主题的替代版本。

此功能需要theme.json的版本2。由于Gutenberg 12.5，因此也可以在theme.json上添加标题，以在网站编辑器或文件名称（无扩展名）中显示样式标签（默认情况下）。

这是white.json的示例：

 {
  “版本”：2，
  “标题”：“白色”，
  “设置”： {
    “颜色”： {
      “调色板”：[[
        {“ slug”：“前景”，“颜色”：“＃000000”，“名称”：“前景”}，，
        {“ 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”}
      这是给出的
    }，，
    “排版”：{
      “ fontfamilies”：[
        {
        “ fontfamily”：“ \” public sans \“，sans-serif”，
        “名称”：“ public sans”，
        “ slug”：“ public-sans”，
        “ fontface”：[
          {“ fontfamily”：“ public sans”，“ fontdisplay”：“ block”，“ fontstyle”：“正常”，“ fontstretch”：“ normal”，“ src”：[file：.assets/fonts/fonts/publicsans/publicsans/publissans-varibles-varibal-variblefoncefont_wght.wghght.ttf.tttttttf.woff.tttf.woff.wff.woff 2
          { "fontFamily": "Public Sans", "fontDisplay": "block", "fontStyle": "italic", "fontStretch": "normal", "src": [ "file:./assets/fonts/publicSans/PublicSans-Italic-VariableFont_wght.ttf.woff2" ] }
        这是给出的
      }
    这是给出的
  }
}，，
“样式”：{
  “块”：{
    “核心/图像”：{
      “ filter”：{“ dunotone”：“ var（ -  wp-- preset-duotone-duotone-default-filter）”}
    }，，
    “核心/邮政标题”：{
      “字体”：{“ fontfamily”：“ var（-wp---- preset-- font-font-fort-public-sans）”，“ fontweight”：“ 700”，“ fontsize”：“ var（-wp-- custom-- custom-- typogragh-- typography-pography-font-font-font-font-size--size-gigantic）”}
    }，，
    “ Core/Query-title”：{
      “字体”：{“ fontfamily”：“ var（-wp--- preset-- font-font-fort-public-sans）”，“ fontweight”：“ 300”，“ fontsize”：“ var（ -  wp-- custom-- custom-- typogragh-typography-pography-font-font-font-font-size---- size-gigantic）”}}
    }，，
    “核心/邮政上图像”：{
      “ filter”：{“ dunotone”：“ var（ -  wp-- preset-duotone-duotone-default-filter）”}
    }，，
    “ Core/site-logo”：{
      “ filter”：{“ dunotone”：“ var（ -  wp-- preset-duotone-duotone-default-filter）”}
    }，，
    “核心/站点词”：{
      “字体”：{“ fontfamily”：“ var（-wp----- preset-- font-font-font-fort-public-sans）”，“ fontsize”：“ var（ -  wp-- preset-preset--font-size-normal），“正常）”，“ fontaight”，“ fontaight”：“ fontaight”}
    }
    }，，
    “颜色”：{“背景”：“ var（ -  wp-- preset--color-background）”，“文本”：“
    “元素”：{
      “ H1”：{
        “排版”：{“ fontfamily”：“ var（-wp---- preset-- font-font-font-fort-public-sans）”，“ fontweight”：“ 600”，“ fontsize”：“ var（-wp-- custom-- custom-- typography-pography-font-font-font-font-size-colossal）”}
      }，，
      “ H2”：{
        “字体”：{“ fontfamily”：“ var（-wp---- preset-- font-font-fort-public-sans）”，“ fontweight”：“ 600”，“ fontsize”：“ var（-wp-- custom-- custom-- typography-pography-pography-font-font-font-font-size------ size-gigantic）”}
      }，，
      “ H3”：{
        “字体”：{“ fontfamily”：“ var（-wp---- preset-- font-font-font-fort-public-sans）”，“ fontweight”：“ 300”，“ fontsize”：“ var（-wp-- custom-- custom-- typograge-proghosem-font-font-font-font-size-huge）”}
      }，，
      “ H4”：{
        “排版”：{“ fontfamily”：“ var（-wp----- preset-- font-font-font-farmily-public-sans）”，“ fontaight”：“ 300”，“ fontsize”：“ var（-wp----------------------------------------- font-font-font-size--size-x-large）”}
      }，，
      “ H5”：{
        “字体”：{“ fontfamily”：“ var（-wp--- preset-- font-font-fort-public-sans）”，“ fontuight”：“ 700”，“ texttransform”：“ uppercase”，“ fontsize”，“ fontsize”，“ fontsize”，“ fontsize”：“
      }，，
      “ H6”：{
        “排版”：{“ fontfamily”：“ var（-wp--------- fort-font-fort-public-sans）”，“ fontuight”：“ 400”，“ texttransform”：“ uppercase”，“ fontsize”，“ fontsize”，“ fontsize”：“ var（-wp------------------------------------------------- font-size-mecium）”}
      }，，
      “关联”： {
        “颜色”：{“ text”：“ var（ -  wp--custom----彩色 -  foreground）”}
      }
    }，，
    “排版”：{“ fontfamily”：“ var（-wp----- preset-- font-font-font-fort-public-sans）”，“ fontsize”：“ var（-wp-------------------------- fort-size-normal）”}
  }
}

该代码从theme.json交换调色板，还登记并定义了本地的公共sans字体文件。

black.json也非常相似，并且使用functions.php文件中注册的源serif pro字体。

具有主题样式变化的块主题的示例

• 二十2岁 - 第一个默认主题，包括样式变体。它更新的1.2，与WordPress 6.0捆绑在一起，包括三种样式变体：“蓝色”，“粉红色”和“瑞士” - 使用户可以快速在不同的视觉样式之间交换。
• 霜冻 - 具有深色主题样式变化的实验块主题。
• Alara - 具有100多个主动安装，并包含7种样式变体。
• WABI - 为Rich Tabor网站提供动力的WABI包含3种样式的变体和300个主动安装。
• Brisky - 具有600多个安装和一种深色主题样式变化。
• 吊坠 - GitHub开发的Automattic主题团队的主题包含3种主题样式变化。

在这篇WP Tavern文章中，贾斯汀推测，主题作者可以通过与网站访问者的设置联系来利用这一新功能，而某些用户可能更喜欢调整其网站，从而提供季节性或基于事件的设计外观。这可能还早一点，但是只有时间才能说明主题作者和用户如何利用这一强大功能。

总结

创建具有不同版式和颜色组合的块主题的样式变化已被大大简化，而无需使用插件。这是我计划在个人项目中应用的Block编辑器的最喜欢的功能之一。

我认为，主题样式的变化绝对是块主题的游戏规则改变者，并且有了这一方便的功能，可能不需要孩子主题，甚至不需要许多cooky-cutter块主题。可以通过主题样式变化来定制一些精心设计的基本块主题，类似于Automattic主题团队的块或块（GitHub的工作中的基本主题）类似。

资源

• 全球样式预设（块编辑手册）
• 允许切换全局样式变体＃35619（github）
• 添加样式引擎＃37978（GitHub）的初始版本
• 全球风格的变化是主题的“皮肤”，已经降落在古腾堡（WP Tavern）
• 全局样式切换器（crittervers.blog）
• 全局样式面板：在“浏览样式”按钮＃40478（github）上进行迭代
• 看看二十一2个即将到来的全球风格变体（WP Tavern）
• 探索WordPress 6.0：样式变化，块锁定UI，写作改进（Anne McCarthy - 视频）
• WordPress 6.0中的新功能：新块，样式切换等等（Aleksandar Savkovic - Cloudways）

黑暗模式

• 让眼睛打开，在WordPress网站（Erin Myers）中添加深色模式
• 网络上黑暗模式的完整指南（Adhuham）
• 假设您将写一篇有关Dark Mode（Chris Coyier）的博客文章

以上是如何在WordPress 6.0块主题中创建样式变化的详细内容。更多信息请关注PHP中文网其他相关文章！