雖然比原計劃晚了一點，但我們正在獲得一個新的WordPress預設主題。它的名字是2022！
新的WordPress預設主題隨即將釋出的WordPress 5.9版本一起提供。我們很想了解更多關於新主題的資訊，因此我們在執行WordPress 5.9的本地開發環境中安裝並測試了2022 。
在結束我們的想法之前，我們將向您展示我們的結果，為您帶來對新WordPress主題來龍去脈的深入概述。
新的WordPress預設主題2022預覽（圖片來源：WordPress.org）
2022被設計為有史以來最靈活、最輕量級和可自定義的預設主題。它為測試區塊、樣板和模板提供了一個很好的遊樂場。
作為一個區塊主題，它將幫助您更好地探索全站點編輯、全域性樣式、導航區塊和新的影象庫，這是WordPress 5.9中最受期待的功能。
我們必須馬上說2022是第一個預設區塊主題！
新主題最雄心勃勃的目標之一是賦予使用者權力。有了這麼多開箱即用的樣板和模板，使用者只需單擊幾下即可構建複雜的佈局。剩下的只是樣式定製。
從技術的角度來看，寫關於2022主題的文章與寫WordPress 5.9附帶的最新和最強大的功能沒有太大區別。但是2022為我們提供了一個放大鏡，可以更好地欣賞新的站點編輯功能並更好地瞭解平臺的未來。
因此，我們在這裡向您介紹新主題。
首先，我們將探索使用者將使用WordPress 5.9和2022體驗到的新站點編輯流程。
之後，我們將深入探討在2022主題中實現的主要塊主題功能。您將瞭解全域性樣式、區塊樣板、模板和模板元件。
但是關於2022主題和WordPress區塊主題還有很多話要說。因此，作為附加章節，我們將簡要介紹如何利用theme.json檔案來擴充套件2022主題的功能。
讓我們開始工作並深入瞭解全新的WordPress預設主題2022。
2022主題帶來新的站點編輯流程
幾個完整的站點編輯功能成為WordPress 5.9的核心。使用安裝了2022等區塊主題的最新WordPress版本的站點所有者將很快能夠：
- 使用更多區塊和樣板建立和編輯文章和頁面
- 通過全域性樣式介面自定義theme.json檔案中定義的設定和樣式
- 為頁面和文章建立和編輯模板
- 為頁首、頁尾和其他模板區域建立和編輯模板部分
隨著所有這些功能合併到核心，WordPress核心貢獻者一直在討論資訊架構的演變，並重新設計了整個站點編輯流程。
啟用2022主題後，您可能會注意到的第一件事是站點編輯器的入口點不再位於WordPress儀表板的主選單中，而是已移至外觀選單下。
WordPress 5.9中的新外觀選單
將模板和樣式編輯功能放在同一個外觀選單下應該可以簡化編輯體驗。它應該使您更容易理解您正在訪問的功能與您的頁面呈現相關。
編輯器選單項開啟站點的主頁模板。根據您的閱讀設定，這可以是您的最新文章頁面或靜態頁面。
WordPress 5.9中的站點編輯器與2022主題
現在，點選左上角的WordPress圖示會顯示一個新的站點編輯器導航選單，包括三個選單項：站點、模板和模板部件。
讓我們仔細看看。
編輯器導航選單
站點選項開啟主頁模板（最新的部落格文章或靜態主頁）。
從模板選單項中，您將獲得可用模板的列表。您可以單擊列表中的任何模板以在編輯器中啟動它。
在撰寫本文時，2022主題提供了11個模板。
2022主題提供的模板
單擊右側的省略號 ( ︙ ) 圖示可清除自定義項。
清除模板自定義
與主題模板不同，自定義模板只能重新命名或刪除（但您可以在文章編輯器中編輯自定義模板）。
重新命名/刪除自定義模板
Template Parts選單項列出了您可以在編輯器中開啟以進行自定義的可用模板部件。
您會發現預設情況下將四個模板部分新增到2022主題。將游標懸停在修改後的模板上會顯示一個工具提示，讓您知道模板已被自定義。
2022主題模板部分
您可以通過單擊右側的省略號 ( ︙ ) 圖示來清除這些自定義。
清除模板元件自定義
編輯模板和模板部件
編輯器提供了自定義模板和模板部分結構的介面。
在這裡，您可以輕鬆新增或編輯區塊和樣板，您的更改將自動應用於使用該模板的每個頁面。
編輯單個文章模板
下圖顯示了編輯器中的404頁面模板。這是一個非常簡單的模板，只包括一個標題、一個段落和一個搜尋框。儘管如此，它還是讓我們很好地理解了UI的工作原理。
模板編輯器中的2022主題的404區塊模板
在這裡，您可以進行編輯和自定義模板以最好地滿足您的需求。例如，您可能希望新增圖片文章網格樣板以增加訪問者的參與度並邀請他們瀏覽您網站的內容。
自定義2022主題的404區塊模板
模板編輯器頂部的標題下拉選單顯示了可用模板區域的列表。相同的列表出現在“設定”側邊欄中的“模板”選項卡中。
2022主題中的模板區域
通過單擊任何模板區域（例如頁首），您將被直接帶到您要編輯的模板部分。
如果單擊右側的省略號圖示，您將訪問獨立模板部件編輯器。
省略號圖示啟動獨立模板部件編輯器
模板部分編輯器還提供了一對可拖動的手柄，允許您檢查模板在不同螢幕解析度下的行為。
調整模板零件預覽尺寸
一旦您對更改感到滿意，請儲存您的編輯並返回主模板編輯器以檢查最終結果。
如果您想深入瞭解新的資訊架構，您可能需要檢視以下文章：
2022主題的核心： theme.json的快速概述
為了全面瞭解2022主題和區塊主題（如Bricksy）是如何工作的，讓我們看一下基於theme.json檔案的新主題配置和樣式機制。
這種新機制在WordPress 5.8中引入，允許主題開發人員配置編輯器並從中央配置點新增功能支援。
在2022主題中，theme.json檔案的結構如下：
{
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}
讓我們快速瀏覽一下每個部分。
版本
version欄位描述規範版本，當前為2.
設定
settings部分定義了全域性或塊級別的設定。在頂層定義的設定會影響所有塊，但塊可以單獨覆蓋全域性設定。在2022主題中，您會發現以下設定：
{
"settings": {
"appearanceTools": true,
"color": {
"duotone": [...],
"gradients": [...],
"palette": [...]
},
"custom": {...},
"spacing": {...},
"typography": {
"dropCap": false,
"fontFamilies": [...],
"fontSizes": [...]
},
"layout": {...}
}
}
設定預設值稱為presets，用於根據特定命名約定，生成CSS自定義屬性和類名：
- CSS自定義屬性：
--wp--preset--{preset-category}--{preset-slug} - CSS類名：
.has-{preset-slug}-{preset-category}
一旦主題定義了它的預設，相應的CSS自定義屬性就可以用來設定部分中的塊和元素的樣式styles。
風格
styles部分是主題定義塊和元素預設樣式的地方。例如，請參閱以下核心按鈕區塊的2022主題樣式：
{
"version": 2,
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--typography--font-size--normal)"
}
}
}
}
}
您會注意到屬性宣告中使用的CSS自定義屬性。
自定義模板
customTemplates部分是主題宣告其自定義模板的地方。name和title欄位是必需的。主題還可以通過設定postTypes屬性來宣告什麼文章型別可以使用模板。
2022主題提供了四個自定義模板：
{
"version": 2,
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "page-large-header",
"title": "Page (Large Header)",
"postTypes": [
"page"
]
},
{
"name": "single-no-separators",
"title": "Single Post (No Separators)",
"postTypes": [
"post"
]
},
{
"name": "page-no-separators",
"title": "Page (No Separators)",
"postTypes": [
"page"
]
}
]
}
您將在block-templates資料夾中找到相應的.html檔案。
2022主題的區塊模板資料夾
模板部件
templateParts部分包括模板部件定義：
{
"version": 2,
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "header-large-dark",
"title": "Header (Dark, large)",
"area": "header"
},
{
"name": "header-small-dark",
"title": "Header (Dark, small)",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}
name和title欄位是必需的。主題還可以宣告一個area術語，模板部分將在編輯器中呈現。
2022主題模板部件
模板部件.html檔案位於template-parts資料夾中。
現在您對2022主題的theme.json有了更多的瞭解，我們可以更深入地探索主題的功能和新的編輯介面。
讓我們深入瞭解2022主題的全域性樣式。
2022主題中的全域性樣式
如果您檢視2022主題的style.css，您可能會驚訝地發現它包含最少數量的CSS宣告。原因是樣式是在基於區塊的主題的theme.json檔案中宣告的。
WordPress 5.9將更進一步，引入了一項新功能，該功能使區塊主題使用者能夠從名為Global Styles的使用者介面自定義站點元素的外觀。
可以從位於編輯器右上角的新樣式圖示訪問全域性樣式介面（另請參閱全域性樣式介面）。
單擊該圖示會顯示一個新的樣式側邊欄，其中包括三個單獨的面板：
- 預覽面板，顯示您的自定義設定的預覽
- 一個全域性樣式面板，提供對排版、顏色和佈局的特定控制元件組的訪問
- 一個Blocks專案，提供對塊級樣式設定的訪問
2022主題中的樣式側邊欄
2022主題的調色盤
顏色面板可以幫助您編輯可用的調色盤，併為背景、文字或連結分配或更改顏色。
在調色盤面板中，您可以自定義主題或預設調色盤，甚至可以建立自定義調色盤。
2022主題中的顏色設定
您找到生成顏色控制元件的程式碼了嗎？
如果沒有，請在您最喜歡的程式碼編輯器中開啟2022主題的theme.json。您會發現以下調色盤宣告：
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}
]
}
}
}
下圖顯示了上面的程式碼如何匹配2022主題的調色盤。
2022主題的調色盤
現在讓我們假設您要更改特定塊的預設背景顏色。為區塊的背景選擇不同的顏色只會將不同的CSS變數分配給元素的background-color屬性。下圖提供了一個示例：
2022主題的原色用作背景色
就這樣！您無需向定製器新增一行自定義CSS程式碼或為此建立子主題。
但是，讓我們通過一些額外的例子繼續探索2022主題的全域性樣式。
排版設定
排版面板是您可以在全球範圍內為網站的文字和連結元素自定義排版樣式的地方。
每個專案都提供對一組控制元件的訪問，以便您自定義字型系列、大小和行高。
2022主題中的排版設定
您想知道生成這些控制元件的程式碼是什麼嗎？
開啟2022主題的theme.json並找到typography部分。您將看到以下設定：
{
"version": 1,
"settings": {
"appearanceTools": true,
"typography": {
"dropCap": false,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Normal",
"size": "1.125rem",
"slug": "normal"
},
{
"name": "Medium",
"size": "1.75rem",
"slug": "medium"
},
{
"name": "Large",
"size": "clamp(1.75rem, 3vw, 2.25rem)",
"slug": "large"
},
{
"name": "Huge",
"size": "clamp(2.5rem, 4vw, 3rem)",
"slug": "huge"
}
]
},
}
您可能希望從上面的程式碼中看到兩個字型系列和五個字型大小。你猜對了。
以下是上面的程式碼如何轉換為全域性樣式排版設定：
2022主題中的排版樣式
您可能會猜到是什麼設定生成了Line height控制元件。在二十二十二中，您不會找到特定的設定，因為它是由appearanceTools屬性啟用的，這是幾個設定宣告的快捷方式（請參閱下一節）。
佈局和外觀工具
全域性樣式側邊欄中的最後一個元素是Layout。在撰寫本文時，它僅包含一個padding控制元件。
2022主題中的佈局設定
在2022主題中，佈局面板由appearanceTools 設定屬性啟用，這是一個布林值，可用於一次啟用多個設定：
{
"settings": {
"appearanceTools": true
}
}
"appearanceTools": true只需替換以下宣告塊：
{
'settings': {
'border': {
'color': true,
'radius': true,
'style': true,
'width': true
},
'color': {
'link': true
},
'spacing': {
'blockGap': true,
'margin': true,
'padding': true
},
'typography': {
'lineHeight': true
}
}
}
好的——您現在希望瞭解在theme.json檔案中宣告的設定如何匹配相應的全域性樣式控制元件。
要獲得新的WordPress預設主題的完整圖片，我們還缺少一塊拼圖：區塊樣板。
2022主題區塊樣板
可以說2022主題主要是一組樣板的集合——而且確實如此。在2022主題中，您會發現大量現成的區塊樣板，您可以從中進行選擇，為您的網頁構建令人驚歎且不可預測的巢狀塊結構。
這裡的關鍵詞是使用者授權。這很合適，因為使用區塊樣板，您可以構建各種各樣的東西，從吸引人的作品集到單頁促銷網站，即使您對HTML或CSS 一無所知！
WordPress 5.9通過新的Pattern Explorer對樣板系統進行了重大改進，該工具允許您以全屏模式瀏覽樣板。
2022主題中的樣板資源管理
新工具還使您能夠直接從樣板目錄快速輕鬆地匯入區塊樣板。這為WordPress使用者和開發人員開闢了新的可能性，因此它的使用量在未來可能會大幅增加。
WordPress樣板目錄
2022主題包括五個類別的大量樣板（超過65種）。
2022主題樣板類別
這套堅實的樣板與模板和模板元件完美搭配，新的預設主題，帶來真正令人驚歎的編輯體驗。
帶有雙色調的分層影象
帶有標題和詳細資訊的視訊
兩張帶文字的圖片
如果您還沒有機會嘗試區塊樣板，我們將通過一個簡單的示例向您展示為什麼它們被認為是如此強大的工具。
假設您想從Index和Single Post模板中刪除預設頁尾，並將其替換為不同的2022區塊樣板。
從外觀選單或WordPress前端工具欄按鈕啟動站點編輯器以自定義索引模板。
單擊索引按鈕以顯示標題下拉選單，其中顯示頁面上可用的模板區域列表。單擊頁尾旁邊的省略號按鈕，然後單擊編輯頁尾。
模板檢查器
如上所述，這將啟動隔離的模板部件編輯器。
獨立模板部分編輯器中的預設2022主題頁尾
現在開啟塊插入器並單擊Patterns。
啟動新的Pattern Explorer工具，選擇Twenty Twenty-Two Footers類別，然後選擇您選擇的頁尾。
2022主題中的樣板管理器
現在根據您的需要新增和編輯區塊。
在獨立模板部件編輯器中編輯頁尾
當您對更改感到滿意時，儲存標題並重新檢查您的網站。
下圖比較了具有不同頁首和頁尾自定義的三個模板（索引、單個文章和沒有分隔符的單個文章）：
在不同的2022主題模板中比較頁首和頁尾自定義
以子主題擴充套件2022主題
但是，一旦您對區塊主題的結構有了很好的瞭解，您就會發現為2022主題或任何其他塊主題建立子主題並不困難。
因此，讓我們弄清楚如何自定義基於2022主題的網站的外觀和感覺。
1. 設定2022子主題
在您的/wp-content/themes目錄中，建立一個新資料夾並將其命名為您喜歡的任何名稱（根據主題開發標準）。在此示例中，我們將子主題資料夾命名為twentytwentytwo-child。
現在你需要一個style.css檔案。開啟您喜歡的程式碼編輯器並建立以下樣式表：
/* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */
與往常一樣，您可以根據需要編輯欄位。
您的子主題現在可供預覽。您可以在外觀 > 主題管理螢幕中啟用它。
2.自定義全域性設定
從WordPress 5.9開始，帶有theme.json檔案的子主題會繼承父主題的設定。如果孩子的theme.json定義了一組樣式，那麼這些樣式將應用在其父樣式之上。
因此，我們可以建立一個僅包含一小部分自定義設定和樣式定義的theme.json檔案，而不是重新定義我們所有的原始選擇。
如何宣告自定義調色盤
在為2022主題構建子主題時，最簡單的任務是替換調色盤。您需要做的就是在您子主題的theme.json中定義一個新的調色盤，如下所示：
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#FFFFFF",
"name": "Foreground"
},
{
"slug": "background",
"color": "#001F29",
"name": "Background"
},
{
"slug": "primary",
"color": "#D6FDFF",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FDFCDC",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#FED9B7",
"name": "Tertiary"
},
{
"slug": "accent",
"color": "#E94435",
"name": "Accent"
}
]
}
}
}
儲存您的檔案並返回到站點編輯器。上面定義的調色盤應該已經取代了預設的2022主題的調色盤。
子主題調色盤
顏色將按順序顯示在調色盤本身上，它們的名稱應遵循最佳實踐和Github上討論的命名約定。
您可以在Carolina Nymark的深入概述中閱讀更多關於theme.json顏色選項的資訊。
如何宣告自定義雙色調濾鏡
您還可以使用自定義過濾器集替換預設的雙色調顏色。
為此，只需在子主題中新增以下程式碼。與palette屬性處於同一級別的theme.json設定：
{
"version": 2,
"settings": {
"color": {
"palette": [...],
"duotone": [
{
"colors": [
"#001F29",
"#FFFFFF"
],
"slug": "default-filter",
"name": "Default filter"
}
]
}
}
}
儲存您的檔案並在區塊編輯器中檢查結果。您應該只看到一個雙色調濾鏡。
子主題雙色調濾鏡
3.自定義區塊樣式
正如我們之前提到的，使用WordPress 5.9，您現在可以從全域性樣式介面自定義theme.json設定和樣式。
僅當區塊在相應的block.json檔案中宣告支援特定功能時，才可以從全域性樣式介面自定義塊樣式。但是您可以覆蓋子主題的theme.json中的預設區塊設定。
現在假設您要覆蓋文章標題和組區塊樣式。您需要做的就是定義要新增或覆蓋的樣式，如下所示：
{
"version": 2,
"settings": {...},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif"
},
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"spacing": {
"padding": "var(--wp--custom--spacing--small)"
}
},
"core/group": {
"spacing": {
"margin": {
"top": "0",
"bottom": "0"
}
}
}
}
}
}
在上面的示例中，我們更改了core/post-title的字型系列、背景顏色和填充值，以及core/group的頂部和底部邊距。
下圖顯示了在公共站點上的結果：
自定義的文章標題欄
我們暫時不會深入探討子主題，因為它超出了本文的範圍。同時，您會在Github上找到更多關於2022主題子主題的示例。
小結
在仔細研究新的WordPress預設主題2022及其功能（使其成為有史以來最靈活的預設主題）時，我們公佈了WordPress 5.9引入的新資訊架構。我們甚至偷看了新的全域性樣式介面。
許多令人興奮的新功能即將推出，而且隨著時間的推移，新的編輯環境似乎變得更加強大、可靠和實用。
雖然許多新的WordPress功能正在開發中，但其他功能正在消失或重要性下降。許多使用者想知道定製器會發生什麼以及如何最好地保持與現有主題的向後相容性。
但是，您不應該期望突然從傳統主題跳躍到單一界限中的阻止主題。我們目前有四種不同型別的主題可供選擇：
- 區塊主題：為FSE設計的主題
- 通用主題：可與定製器和站點編輯器一起使用的主題
- 混合主題：支援FSE功能的經典主題，如theme.json
- 經典主題：帶有PHP模板、functions.php等的主題。
所以，暫時不要擔心——如果您還沒有準備好切換到區塊主題，仍然有很多解決方案可供選擇。
評論留言