z〇zoz〇女人另类zoz〇,成人性生交大片免费看r链接,大肉大捧一进一出好爽视频mba

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

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

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

先決條件

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

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

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

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

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

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

全球樣式切換器

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

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

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

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

主題樣式變體與兒童主題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 {
  “版本”：2，
  “標(biāo)題”：“栗色”，
  "設(shè)定": {
    “顏色”： {
      “調(diào)色板”：[[
        {“ 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--彩色 - 前景黑暗）”
      }，，
  “元素”：{
      “關(guān)聯(lián)”： {
        “顏色”：{“ text”：“ var（ -  wp-- preset--color-- primary）”}
      }
    }
  }
}

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

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

正如我在上一篇文章中指出的那樣，我一直在研究塊主題，並將其用於我自己的個人項(xiàng)目網(wǎng)站。受到Gutenberg插件中主題樣式變化和WebFonts API功能的啟發(fā)，我開始使用替代深色模式並配置WebFonts API來調(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)頭和頁腳，更易於用戶友好的存檔和搜索頁面。

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

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

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

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

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

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

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

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

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

TT2 Gopher主題顏色和字體組合的簡要概述包括：

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

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

添加和配置WebFonts

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

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

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

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

步驟2：註冊WebFonts

在TT2主題中，本地源Serif Pro WebFonts在其函數(shù)中使用PHP註冊。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文件註冊本地Web字體的能力。 Demo TT2 Gopher主題的JSON摘要顯示了本地工作，請參見amoon主題樣式變化中的本地作品：

 “排版”：{
  “ fontfamilies”：[
    {
      “ fontfamily”：“'工作sans'， - 蘋果系統(tǒng)，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.
      這是給出的
    }
  這是給出的
}

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

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

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

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

這是white.json的示例：

 {
  “版本”：2，
  “標(biāo)題”：“白色”，
  "設(shè)定": {
    “顏色”： {
      “調(diào)色板”：[[
        {“ 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）”}
    }，，
    “核心/郵政標(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文件中註冊的源serif pro字體。

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

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

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

總結(jié)

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

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