如何在WordPress 6.0塊主題中創建樣式變化-css教學-PHP中文網

本文適用於那些對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文章中，賈斯汀推測，主題作者可以通過與網站訪問者的設置聯繫來利用這一新功能，而某些用戶可能更喜歡調整其網站，從而提供季節性或基於事件的設計外觀。這可能還早一點，但是只有時間才能說明主題作者和用戶如何利用這一強大功能。