全球風格是塊主題的一個功能，是我最喜歡創建塊主題的部分之一。 Gutenberg 12.5中引入了WordPress中全球樣式變化的概念，這將使主題作者能夠創建具有不同顏色，字體，字體，版式，間距等不同組合的塊主題的替代變化。不同的主題等。json文件存儲在 /樣式下 /樣式文件夾中。
全球樣式面板UI正在積極開發迭代中。有關此功能開發的更多詳細信息，可以在此GitHub票（＃35619）上找到和跟踪。
在本文中，我將使用備用 /styles/theme.json文件創建概念驗證的全局樣式變化，並僅通過交換調色板來創建具有不同顏色模式的兒童主題。
本文適用於那些對WordPress封鎖主題的基本了解的人，以及使用完整站點編輯器（FSE）接口的熟悉程度。如果您不熟悉主題和FSE，則可以通過對WordPress Block Block主題和網站編輯器文檔進行深入的介紹在CSS-Tricks上開始。這個完整的網站編輯網站是最新的教程指南之一，旨在學習所有FSE功能，包括本文討論的塊主題和样式變體。
對於某些背景，讓我們簡要概述全球樣式變化。二十二十二（TT2）主題負責人和汽車設計總監Kjell Reigstad通過此推文和GitHub Ticket＃292引入了全球樣式變體，作為兒童主題。 Kjell在門票中指出，它們最初是作為替代色圖案和字體組合的，但可以用於構建簡單的孩子主題。
來自Kjell的示例演示瞭如何從側邊欄中可用的選項中選擇不同樣式組合。
從那時起，汽車主題團隊一直在嘗試該概念以創建可變的兒童主題（僅可變顏色和字體），其中包括以下內容：
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）僅在其單個主題上有所不同。
在您的子主題文件夾的根源下，創建A /樣式文件夾，該文件夾將樣式變化作為JSON文件。在此演示示例中，我創建了二十二個主題的三個變體。json調色板 - blue.json，maroon.json和pink.json-通過交換前景和背景顏色：
這是單擊管理儀表板（位於外觀→編輯器）的樣式圖標後的最終結果：
單擊其他樣式按鈕（最近修訂為瀏覽器樣式），該按鈕顯示“藍色”，“栗色”和“粉紅色”顏色樣式圖標，此外其原始樣式。
要更改和選擇樣式，請選擇您的首選變體，然後單擊“保存”按鈕（頂端），該按鈕顯示在瀏覽器的前端。
在Gutenberg 13.0中可以使用將標籤添加到具有懸停動畫效果的替代樣式變化和文件名。
首先，安裝並設置一個帶有一些虛擬內容的WordPress網站。對於此演示，我進行了一個新的WordPress安裝，激活了二十二十個主題，並添加了Gutenberg測試數據。
本文討論的主題樣式變化和WebFonts API需要安裝和激活Gutenberg 13.0插件或WordPress 6.0。
在此演示子主題示例中，讓我們從標頭和頁腳顏色中稍微改變身體顏色，並以所有網站內容為中心：
在孩子主題的根文件夾中使用藍色，栗色和粉紅色。
__ style.css __主題 __ functions.php __ index.php __模板 __ ... __ 部分 __ ... __樣式 __藍色 __ Maroon.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提交了前景和背景體，前景 - 黑暗和主顏色屬性的交換值，其各自的藍色和粉紅色六角形顏色值。
正如我在上一篇文章中指出的那樣，我一直在研究塊主題，並將其用於我自己的個人項目網站。受到Gutenberg插件中主題樣式變化和WebFonts API功能的啟發，我開始使用替代深色模式並配置WebFonts API來調整我的工作中的塊主題。
在本節中，我將引導您瀏覽如何創建TT2 Gopher Blocks ，這是我為本文創建的工作中塊主題的演示兄弟姐妹。該主題包括使用主題樣式變體和WebFonts API創建的栗色，深色和淺色模式，該模式與Gutenberg 12.8版本一起使用。
TT2 Gopher主題的一些亮點包括中心，單欄內容顯示，獨特的標頭和頁腳，更易於用戶友好的存檔和搜索頁面。
TT2 Gopher塊的副本可在GitHub存儲庫中找到，您可以分叉並自定義。
首先，在黑暗模式下進行一些背景。 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是默認的二十二十二個主題的非常簡單和修改的版本。它包括三種主題樣式變體 - 栗色，黑暗和白色。
描述每個自定義步驟都超出了本文的範圍，但是您可以從我對WordPress Block主題的深入介紹以及WordPress.org上的Block Editor手冊中了解更多信息。
TT2 Gopher主題顏色和字體組合的簡要概述包括：
讓我簡短地介紹您如何創建主題樣式變體。
Gutenberg 12.8插件推出了一種新的WebFonts API，該插件使作者可以“以易於友好，對隱私友好且未來的防護方式加載本地（捆綁）字體。”可以以PHP方式或主題為主題以塊主題實現此功能。
當前，此功能僅適用於與塊主題捆綁在一起的字體，並且由於隱私問題而不支持Google託管字體。此Make WordPress Core文章和WP Tavern文章涵蓋了有關WebFonts API開發當前狀態的更多詳細信息。
TT2主題將源Serif Pro字體文件添加到主題的資產/字體文件夾中。 He Github存儲庫還提供了另外兩種字體 - SANS和公共SANS。
在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字體。
在這篇WP Tavern文章中，賈斯汀推測，主題作者可以通過與網站訪問者的設置聯繫來利用這一新功能，而某些用戶可能更喜歡調整其網站，從而提供季節性或基於事件的設計外觀。這可能還早一點，但是只有時間才能說明主題作者和用戶如何利用這一強大功能。
創建具有不同版式和顏色組合的塊主題的樣式變化已被大大簡化，而無需使用插件。這是我計劃在個人項目中應用的Block編輯器的最喜歡的功能之一。
我認為，主題樣式的變化絕對是塊主題的遊戲規則改變者，並且有了這一方便的功能，可能不需要孩子主題，甚至不需要許多cooky-cutter塊主題。可以通過主題樣式變化來定制一些精心設計的基本塊主題，類似於Automattic主題團隊的塊或塊（GitHub的工作中的基本主題）類似。
以上是如何在WordPress 6.0塊主題中創建樣式變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
