亚洲精品欧美二区三区中文字幕,国产成人精品白浆久久69

全球風(fēng)格是塊主題的一個(gè)功能，是我最喜歡創(chuàng)建塊主題的部分之一。 Gutenberg 12.5中引入了WordPress中全球樣式變化的概念，這將使主題作者能夠創(chuàng)建具有不同顏色，字體，字體，版式，間距等不同組合的塊主題的替代變化。不同的主題等。json文件存儲(chǔ)在 /樣式下 /樣式文件夾中。

全球樣式面板UI正在積極開(kāi)發(fā)迭代中。有關(guān)此功能開(kāi)發(fā)的更多詳細(xì)信息，可以在此GitHub票（＃35619）上找到和跟蹤。

在本文中，我將使用備用 /styles/theme.json文件創(chuàng)建概念驗(yàn)證的全局樣式變化，並僅通過(guò)交換調(diào)色板來(lái)創(chuàng)建具有不同顏色模式的兒童主題。

先決條件

本文適用於那些對(duì)WordPress封鎖主題的基本了解的人，以及使用完整站點(diǎn)編輯器（FSE）接口的熟悉程度。如果您不熟悉主題和FSE，則可以通過(guò)對(duì)WordPress Block Block主題和網(wǎng)站編輯器文檔進(jìn)行深入的介紹在CSS-Tricks上開(kāi)始。這個(gè)完整的網(wǎng)站編輯網(wǎng)站是最新的教程指南之一，旨在學(xué)習(xí)所有FSE功能，包括本文討論的塊主題和樣式變體。

全球風(fēng)格的變化

對(duì)於某些背景，讓我們簡(jiǎn)要概述全球樣式變化。二十二十二（TT2）主題負(fù)責(zé)人和汽車(chē)設(shè)計(jì)總監(jiān)Kjell Reigstad通過(guò)此推文和GitHub Ticket＃292引入了全球樣式變體，作為兒童主題。 Kjell在門(mén)票中指出，它們最初是作為替代色圖案和字體組合的，但可以用於構(gòu)建簡(jiǎn)單的孩子主題。

來(lái)自Kjell的示例演示瞭如何從側(cè)邊欄中可用的選項(xiàng)中選擇不同樣式組合。

從那時(shí)起，汽車(chē)主題團(tuán)隊(duì)一直在嘗試該概念以創(chuàng)建可變的兒童主題（僅可變顏色和字體），其中包括以下內(nèi)容：

藍(lán)色，奶油，石板，黃色變化的地質(zhì)學(xué)家
Quadrat，黑色，綠色，紅色，白色和黃色版本

全球樣式切換器

Gutenberg 12.5發(fā)行版推出了一個(gè)全局樣式切換器，該切換器將通過(guò)不同的主題在同一主題中快速，輕鬆地在不同的主題中切換。JSON文件存儲(chǔ)在A /樣式文件夾下。

允許通過(guò)主題切換全局樣式變化的概念已在GitHub上討論了一段時(shí)間。 Gutenberg的首席工程師Matias Ventura最近將其添加到WordPress 6.0路線(xiàn)圖中，使其重新重視它。

擁抱風(fēng)格交替由JSON變化驅(qū)動(dòng)。這是在新的默認(rèn)主題的各種視頻中取笑的，應(yīng)在6.0中完全揭幕並介紹。平行目標(biāo)之一是創(chuàng)建一些僅使用樣式製成的TT2的不同變化。（35619）
Matias Ventura，“初步路線(xiàn)圖到6.0”

Gutenberg 13.0可以使用主題樣式變化切換器的最新開(kāi)發(fā)迭代，並包含在WordPress 6.0中。在此探索WordPress 6.0視頻中，Automattic產(chǎn)品聯(lián)絡(luò)Anne McCarthy概述了其主要功能，包括樣式變化和WebFonts API（從開(kāi)始5:18）（開(kāi)始5:18）。

主題樣式變體與兒童主題

在上一篇文章中，我簡(jiǎn)要介紹了建築塊兒童主題。全球風(fēng)格的變化模糊了替代theme.json和Child主題之間的界限。例如，最近發(fā)布的Alante-Dark兒童主題與其父主題之間的唯一區(qū)別是Child主題中的JSON文件，該文件覆蓋了這樣的全局主題樣式：

同樣，WordPress目錄中最近的兩個(gè)Alara兒童主題（Framboise and Richmond）僅在其單個(gè)主題上有所不同。

第1節(jié)：創(chuàng)建主題樣式變化

在您的子主題文件夾的根源下，創(chuàng)建A /樣式文件夾，該文件夾將樣式變化作為JSON文件。在此演示示例中，我創(chuàng)建了二十二個(gè)主題的三個(gè)變體。json調(diào)色板 - blue.json，maroon.json和pink.json-通過(guò)交換前景和背景顏色：

這是單擊管理儀表板（位於外觀→編輯器）的樣式圖標(biāo)後的最終結(jié)果：

單擊其他樣式按鈕（最近修訂為瀏覽器樣式），該按鈕顯示“藍(lán)色”，“栗色”和“粉紅色”顏色樣式圖標(biāo)，此外其原始樣式。

要更改和選擇樣式，請(qǐng)選擇您的首選變體，然後單擊“保存”按鈕（頂端），該按鈕顯示在瀏覽器的前端。

在Gutenberg 13.0中可以使用將標(biāo)籤添加到具有懸停動(dòng)畫(huà)效果的替代樣式變化和文件名。

步驟1：設(shè)置和安裝

首先，安裝並設(shè)置一個(gè)帶有一些虛擬內(nèi)容的WordPress網(wǎng)站。對(duì)於此演示，我進(jìn)行了一個(gè)新的WordPress安裝，激活了二十二十個(gè)主題，並添加了Gutenberg測(cè)試數(shù)據(jù)。

本文討論的主題樣式變化和WebFonts API需要安裝和激活Gutenberg 13.0插件或WordPress 6.0。

步驟2：創(chuàng)建一個(gè)TT2兒童主題

在此演示子主題示例中，讓我們從標(biāo)頭和頁(yè)腳顏色中稍微改變身體顏色，並以所有網(wǎng)站內(nèi)容為中心：

步驟3：創(chuàng)建JSON文件

在孩子主題的根文件夾中使用藍(lán)色，栗色和粉紅色。

 __ style.css
__主題
__ functions.php
__ index.php
__模板
__ ...
__ 部分
__ ...
__樣式
__藍(lán)色
__ Maroon.json
__粉紅色

步驟4：創(chuàng)建替代主題JSON文件

接下來(lái)，創(chuàng)建帶有所需顏色托盤(pán) /樣式文件夾的備用theme.json文件。在此演示示例中，我創(chuàng)建了三個(gè)調(diào)色板（藍(lán)色，栗色和粉紅色）。這是Maroon.json的代碼：

 {
  “版本”：2，
  “標(biāo)題”：“栗色”，
  "設(shè)定": {
    “顏色”： {
      “調(diào)色板”：[[
        {“ slug”：“前景”，“顏色”：“＃7c290f”，“ name”：“前景”}，，
        {“ slug”：“ background”，“ color”：“ #ffffff”，“ name”：“ background”}，
        {“ slug”：“前景黑暗”，“顏色”：“＃000000”，“名稱(chēng)”：“前景dark”}，
        {“ slug”：“ background-body”，“ color”：“＃ffd8be”，“ name”：“ background Body”}，
        {“ slug”：“ primary”，“ color”：“＃000000”，“名稱(chēng)”：“ primary”}，
        {“ slug”：“ secondary”，“ color”：“＃ffe2c7”，“ name”：“ secondary”}，
        {“ slug”：“ tertiary”，“ color”：“＃55ace”，“ name”：“ tertiary”}
      這是給出的
  }，，
  “排版”：{}
}，，
“樣式”：{
  “顏色”：
      {
        “背景”：“ var（-wp-- preset-彩色 - 背景）”，“
        “ text”：“ var（-wp-- preset--彩色 - 前景黑暗）”
      }，，
  “元素”：{
      “關(guān)聯(lián)”： {
        “顏色”：{“ text”：“ var（ -  wp-- preset--color-- primary）”}
      }
    }
  }
}

其他兩個(gè)替代藍(lán)色。JSON和PINK。jSON提交了前景和背景體，前景 - 黑暗和主顏色屬性的交換值，其各自的藍(lán)色和粉紅色六角形顏色值。

第2節(jié)：用例的示例

正如我在上一篇文章中指出的那樣，我一直在研究塊主題，並將其用於我自己的個(gè)人項(xiàng)目網(wǎng)站。受到Gutenberg插件中主題樣式變化和WebFonts API功能的啟發(fā)，我開(kāi)始使用替代深色模式並配置WebFonts API來(lái)調(diào)整我的工作中的塊主題。

在本節(jié)中，我將引導(dǎo)您瀏覽如何創(chuàng)建TT2 Gopher Blocks ，這是我為本文創(chuàng)建的工作中塊主題的演示兄弟姐妹。該主題包括使用主題樣式變體和WebFonts API創(chuàng)建的栗色，深色和淺色模式，該模式與Gutenberg 12.8版本一起使用。

TT2 Gopher主題的一些亮點(diǎn)包括中心，單欄內(nèi)容顯示，獨(dú)特的標(biāo)頭和頁(yè)腳，更易於用戶(hù)友好的存檔和搜索頁(yè)面。

TT2 Gopher塊的副本可在GitHub存儲(chǔ)庫(kù)中找到，您可以分叉並自定義。

在WordPress上創(chuàng)建暗模式

首先，在黑暗模式下進(jìn)行一些背景。 Dark Mode是個(gè)人喜好，開(kāi)發(fā)人員像本網(wǎng)站一樣提供它或其他模式切換開(kāi)關(guān)，對(duì)於大多數(shù)常規(guī)開(kāi)發(fā)人員而言，這並不是一件小事。在CSS-tricks上，創(chuàng)建深色模式已覆蓋，包括黑暗模式和暗模式版式的完整指南。

在WordPress站點(diǎn)中，我們可以使用WP Dark Mode插件添加一個(gè)暗模式切換。 WP Engine和WPBeginner的Erin Myers描述瞭如何使用WP DAMP模式插件，而B(niǎo)renda Barron在此WPExplorer帖子中列出了其他Dark Mode插件選項(xiàng)。

在WordPress中創(chuàng)建一個(gè)黑模式?jīng)]有插件的主題涉及幾個(gè)步驟。一年多以前，Ari Stathopoulos在Github上為T(mén)T1塊主題創(chuàng)造了黑暗的支持。查看此處的示例，它涉及一些JavaScript知識(shí)來(lái)創(chuàng)建資產(chǎn)（例如，toggler，customize，oditor-mode-support），深色CSS變量和擴(kuò)展的function.php文件。

在這個(gè)簡(jiǎn)短的視頻中，Automattic的Anne McCarthy展示了通過(guò)在TT2 /樣式文件夾中添加Kllejr的JSON摘要，創(chuàng)建具有全球樣式變化的TT2塊主題的暗模式是多麼簡(jiǎn)單。

創(chuàng)建演示TT2 Gopher塊主題

TT2 Gopher是默認(rèn)的二十二十二個(gè)主題的非常簡(jiǎn)單和修改的版本。它包括三種主題樣式變體 - 栗色，黑暗和白色。

描述每個(gè)自定義步驟都超出了本文的範(fàn)圍，但是您可以從我對(duì)WordPress Block主題的深入介紹以及WordPress.org上的Block Editor手冊(cè)中了解更多信息。

TT2 Gopher主題顏色和字體組合的簡(jiǎn)要概述包括：

光模式
- 標(biāo)頭是白色的，頁(yè)腳具有煙熏的身體背景顏色。
- Open Sans是主要字體。
黑暗模式
- 標(biāo)題和頁(yè)腳是黑色的，身體背景為淺色。
- 源Serif Pro是主要字體。
栗色模式
- 標(biāo)頭和頁(yè)腳都是深色的栗色，具有較淺的淡黃色身體背景。
- 工作是主要字體。

讓我簡(jiǎn)短地介紹您如何創(chuàng)建主題樣式變體。

添加和配置WebFonts

Gutenberg 12.8插件推出了一種新的WebFonts API，該插件使作者可以“以易於友好，對(duì)隱私友好且未來(lái)的防護(hù)方式加載本地（捆綁）字體?！笨梢砸訮HP方式或主題為主題以塊主題實(shí)現(xiàn)此功能。

當(dāng)前，此功能僅適用於與塊主題捆綁在一起的字體，並且由於隱私問(wèn)題而不支持Google託管字體。此Make WordPress Core文章和WP Tavern文章涵蓋了有關(guān)WebFonts API開(kāi)發(fā)當(dāng)前狀態(tài)的更多詳細(xì)信息。

步驟1：下載並添加塊主題字體

TT2主題將源Serif Pro字體文件添加到主題的資產(chǎn)/字體文件夾中。 He Github存儲(chǔ)庫(kù)還提供了另外兩種字體 - SANS和公共SANS。

步驟2：註冊(cè)WebFonts

在TT2主題中，本地源Serif Pro WebFonts在其函數(shù)中使用PHP註冊(cè)。php文件：

函數(shù)twytwentytwo_get_font_face_styles（）{
  返回 ”
  @font-face {
    字體家庭：“源Serif Pro”；
    字體重量：200 900；
    字體風(fēng)格：正常；
    字體拉伸：正常；
    字體 - 播放：交換；
    src：url（'“”。get_theme_file_uri（'資產(chǎn)/fonts/sourceserif4variable-roman.ttf.woff2'）。”'）格式（'woff2'）;
  }
  @font-face {
    字體家庭：“源Serif Pro”；
    字體重量：200 900；
    字體風(fēng)格：斜體；
    字體拉伸：正常；
    字體 - 播放：交換；
    SRC：url（'。
  }
  ”
}

Gutenberg 12.8引入了使用theme.json文件註冊(cè)本地Web字體的能力。 Demo TT2 Gopher主題的JSON摘要顯示了本地工作，請(qǐng)參見(jiàn)amoon主題樣式變化中的本地作品：

 “排版”：{
  “ fontfamilies”：[
    {
      “ fontfamily”：“'工作sans'， - 蘋(píng)果系統(tǒng)，Blinkmacsystemfont，'Helvetica neue'，'Helvetica'，sans-serif'，sans-serif”，
      “ slug”：“工作界”，
      “名稱(chēng)”：“工作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.
      這是給出的
    }
  這是給出的
}

本教程和本W(wǎng)P Tavern文章中描述了有關(guān)如何在塊主題中註冊(cè)和使用本地WebFonts的其他信息。

創(chuàng)建主題樣式變化

按照上一節(jié)中描述的步驟，我創(chuàng)建了兩個(gè)主題的替代版本。

此功能需要theme.json的版本2。由於Gutenberg 12.5，因此也可以在theme.json上添加標(biāo)題，以在網(wǎng)站編輯器或文件名稱(chēng)（無(wú)擴(kuò)展名）中顯示樣式標(biāo)籤（默認(rèn)情況下）。

這是white.json的示例：

 {
  “版本”：2，
  “標(biāo)題”：“白色”，
  "設(shè)定": {
    “顏色”： {
      “調(diào)色板”：[[
        {“ slug”：“前景”，“顏色”：“＃000000”，“名稱(chēng)”：“前景”}，，
        {“ 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”，
        “名稱(chēng)”：“ 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）”}
    }，，
    “核心/郵政標(biāo)題”：{
      “字體”：{“ 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）”}
    }，，
    “核心/站點(diǎn)詞”：{
      “字體”：{“ 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）”}
      }，，
      “關(guān)聯(lián)”： {
        “顏色”：{“ text”：“ var（ -  wp--custom----彩色 -  foreground）”}
      }
    }，，
    “排版”：{“ fontfamily”：“ var（-wp----- preset-- font-font-font-fort-public-sans）”，“ fontsize”：“ var（-wp-------------------------- fort-size-normal）”}
  }
}

該代碼從theme.json交換調(diào)色板，還登記並定義了本地的公共sans字體文件。

black.json也非常相似，並且使用functions.php文件中註冊(cè)的源serif pro字體。

具有主題樣式變化的塊主題的示例

二十2歲 - 第一個(gè)默認(rèn)主題，包括樣式變體。它更新的1.2，與WordPress 6.0捆綁在一起，包括三種樣式變體：“藍(lán)色”，“粉紅色”和“瑞士” - 使用戶(hù)可以快速在不同的視覺(jué)樣式之間交換。
霜凍 - 具有深色主題樣式變化的實(shí)驗(yàn)塊主題。
Alara - 具有100多個(gè)主動(dòng)安裝，並包含7種樣式變體。
WABI - 為Rich Tabor網(wǎng)站提供動(dòng)力的WABI包含3種樣式的變體和300個(gè)主動(dòng)安裝。
Brisky - 具有600多個(gè)安裝和一種深色主題樣式變化。
吊墜 - GitHub開(kāi)發(fā)的Automattic主題團(tuán)隊(duì)的主題包含3種主題樣式變化。

在這篇WP Tavern文章中，賈斯汀推測(cè)，主題作者可以通過(guò)與網(wǎng)站訪問(wèn)者的設(shè)置聯(lián)繫來(lái)利用這一新功能，而某些用戶(hù)可能更喜歡調(diào)整其網(wǎng)站，從而提供季節(jié)性或基於事件的設(shè)計(jì)外觀。這可能還早一點(diǎn)，但是只有時(shí)間才能說(shuō)明主題作者和用戶(hù)如何利用這一強(qiáng)大功能。

總結(jié)

創(chuàng)建具有不同版式和顏色組合的塊主題的樣式變化已被大大簡(jiǎn)化，而無(wú)需使用插件。這是我計(jì)劃在個(gè)人項(xiàng)目中應(yīng)用的Block編輯器的最喜歡的功能之一。

我認(rèn)為，主題樣式的變化絕對(duì)是塊主題的遊戲規(guī)則改變者，並且有了這一方便的功能，可能不需要孩子主題，甚至不需要許多cooky-cutter塊主題?？梢酝ㄟ^(guò)主題樣式變化來(lái)定制一些精心設(shè)計(jì)的基本塊主題，類(lèi)似於Automattic主題團(tuán)隊(duì)的塊或塊（GitHub的工作中的基本主題）類(lèi)似。