二〇二三：來自社羣的新預設WordPress主題

二〇二三（Twenty Twenty-Three）是與 WordPress 6.1 一起推出的全新的預設 WordPress 主題。

這是一個極簡主義主題，沒有影象或附加功能。它提供了最佳的入門主題來構建模板和樣式變化，並測試最新版本的 WordPress 引入的所有功能。該主題可以被視為一個真正的開發和測試環境，儘管極簡風格、響應能力和輕便性使其成為建立適合各種用途的部落格和網站的不錯選擇。

在他對二〇二〇主題的介紹中，Kjell Reigstad 談到了預設主題的未來：

theme.json、區塊樣板和塊模式等創新使主題開發變得更加簡單，併為使用者提供了自定義網站的新方法。有理由相信社羣可以利用這一切在未來幾年為我們的使用者構建更頻繁和多樣化的主題和定製解決方案。

Channing Ritter 提出了以下建議：

如果我們沒有強調主題本身，而是強調了由社羣成員設計的一組自以為是的風格變化怎麼辦？我們可以使用二〇二二作為一個新主題的基礎，該主題被剝離和最小化——一張空白的畫布，讓各種風格的變化大放異彩。

這就是新的二〇二三預設主題所發生的事情。社羣被要求積極參與設計預設的 WordPress 主題，我們喜歡這樣，因為它使新主題成為真正參與工作的結果。

二〇二三主題預覽

但在揭示與新的 WordPress 預設主題捆綁在一起的樣式變化之前，讓我們先了解一下二〇二三的基本功能以及它可以適用的內容。

1. 頁面佈局和樣式
2. 二〇二三排版
3. 模板和模板部件
4. 全域性樣式和樣式變化

頁面佈局和樣式

如上所述，二〇二三是二〇二二的精簡版。新的預設主題引人注目的是它的簡單性和輕盈性。二〇二三非常靈活，非常適合 Gutenberg 的最新站點編輯功能，例如模板編輯、全域性樣式變體、流體排版和區塊樣板模式。

因此，毫不奇怪，在本文顯示的螢幕截圖中，您會看到沒有任何花裡胡哨但非常適合定製和測試的最小頁面。

舉個例子，下圖顯示了帶有和不帶有特色圖片的單個文章頁面。

二〇二三中帶有和不帶有特色影象的單個文章預覽

下圖將主頁與存檔頁面進行了比較。

主頁與二〇二三中的存檔頁面相比

即使新主題是二〇二〇的簡化版本，與之前的預設主題相比，二〇二三也呈現出一些關鍵的差異。

首先，標題的大小已減小，預設襯線字型已替換為系統無襯線字型。

二〇二三主題中的標題大小

此外，還應用了不同的調色盤。您可以在theme.json的以下程式碼中看到新的二〇二三調色盤定義：

{
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#9DFF20",
"name": "Primary",
"slug": "primary"
},
{
"color": "#345C00",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#F6F6F6",
"name": "Tertiary",
"slug": "tertiary"
}
]
},
}
}

二〇二三主題預設顏色

但新的預設主題的主要特點是它的風格變化集。二〇二三帶有十種全域性風格變體，每一種都展示了顏色、字型系列和字型大小的不同組合。

二〇二三全域性風格

您將在二〇二三種樣式資料夾中找到相應的 JSON 檔案。

Figma上提供了頁面模板、樣式和二十三的樣式變化的完整預覽。

Figma上的二〇二三風格變化預覽

二〇二三排版

在像二〇二三這樣的極簡主題中，排版在使文字可讀、網站吸引人以及最終為訪問者提供有益的瀏覽體驗方面發揮著關鍵作用，無論裝置和螢幕大小如何。

為此，二〇二三帶有一組新的字型系列，並使用 WordPress 6.1 引入的流體排版。

字型

二〇二三具有一組用於風格變化的新字型，其特點是簡單和多樣：

• System Font–var(--wp--preset--font-family--system-font)
• IBM Plex Mono——var(--wp--preset--font-family--ibm-plex-mono)
• Inter——var(--wp--preset--font-family--inter)
• Source Serif Pro–var(--wp--preset--font-family--source-serif-pro)
• DM Sans –var(--wp--preset--font-family--dm-sans)

IBM Plex Mono是 IBM Plex 字型集的一部分，這是在 SIL 開放字型許可 ( OFL ) 下發布的新的企業 IBM 字型。您可以在 Adob​​e Fonts 和 IBM 網站上看到它的預覽。

ibm.com 上的 IBM Plex Mono 庫

Inter 是由 Rasmus Andersson 為計算機螢幕製作和設計的免費開源字型系列。您可以在 Rasmus Andersson 的網站或 Google Fonts 上預覽和下載字型系列。

Rasmus Andersson 網站上的 Inter 字型預覽

Source Serif Pro 是 Adob​​e Originals 的字型，您可以通過 Adob​​e Fonts 帳戶免費使用它（閱讀有關 Adob​​e 字型許可 的更多資訊）。

fonts.adobe.com 上的 Source Serif Pro 預覽

DM Sans 是另一種在 SIL 開放字型許可證 ( OFL )下獲得許可的字型，由 Colophon Foundry 委託 Google 委託，由 Colophon Foundry、Jonny Pinhorn 和 Indian Type Foundry 設計。

Google 字型上的 DM Sans 預覽

流體排版和間距

二〇二三使用 WordPress 6.1 引入的流體排版和間距預設。

新的預設 WordPress 主題提供了一個很好的流暢排版實現示例，您可以將其用作模板，在您的主題中新增對此功能的支援。

以下程式碼顯示了theme.json的settings.typography.fluid和settings.typography.fontSizes[]屬性定義：

"settings": {
...
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"size": "1rem",
"slug": "small"
},
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.75rem",
"slug": "large",
"fluid": false
},
{
"size": "2.25rem",
"slug": "x-large",
"fluid": false
},
{
"size": "10rem",
"slug": "xx-large",
"fluid": {
"min": "4rem",
"max": "20rem"
}
}
]
}
}

typography.fluid設定增加了對流暢排版的支援，同時typography.fontSizes[].fluid設定了最小和最大字型大小值。

除了 Fluid Typography，Twenty-3 還支援流體間距。

在 WordPress 6.1 之前，只能在編輯器中設定自定義間距值。這意味著在 WordPress 6.1 之前，主題作者無法為填充、邊距和間隙指定固定值。這導致了一些限制。例如，在不同主題之間輕鬆傳輸間距設定或在不同站點之間複製和貼上內容和塊模式時保持間距值是不可能的。

主題可以使用新的spacing.spacingScale或者spacing.spacingSizes設定宣告流體間距支援（在Theme.json 中閱讀更多內容：新增間距大小預設）。在二〇二三中，這是通過以下設定完成的：

"settings": {
"spacing": {
"spacingScale": {
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "30"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "40"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "50"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "60"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "70"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "80"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
}
}

下面的視訊顯示了流體排版在二〇二三中的實際應用。

您可以在 Design Specification 中檢查排版和間距預設。

模板和模板部件

使用二〇二三，您將看到 WordPress 6.1 附帶的所有功能和站點編輯改進。

對於模板和模板部件尤其如此。

二〇二三的模板

當您啟動站點編輯器並在您的網站上執行二〇二三主題時，您將看到包含 11 個模板和 4 個模板部件的列表。

下圖顯示了站點編輯器中的 404 模板。

二〇二三主題404頁面模板

您將在二〇二三的模板和部件資料夾中找到相應的 HTML 檔案。

二〇二三主題模板

下圖顯示了編輯模式下的 Comments 模板部分：

編輯評論模板部分

您會發現在theme.json中定義的自定義模板和模板部分。

自定義模板

除了預設模板外，二〇二三還提供以下自定義模板：

• Blank
• 部落格（替代）
• 404
• 帶有特色圖片
• 帶封面

這些模板在theme.json中定義如下：

{
"customTemplates": [
{
"name": "blank",
"postTypes": [
"page",
"post"
],
"title": "Blank"
},
{
"name": "blog-alternative",
"postTypes": [
"page"
],
"title": "Blog (Alternative)"
},
{
"name": "404",
"postTypes": [
"page"
],
"title": "404"
},
{
"name": "with-featured-image",
"postTypes": [
"page",
"post"
],
"title": "With Featured Image"
},
{
"name": "with-cover-block",
"postTypes": [
"page",
"post"
],
"title": "With Cover Block"
}
],
}

模板部件

模板部件定義如下。

{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "uncategorized",
"name": "comments",
"title": "Comments"
},
{
"area": "uncategorized",
"name": "post-meta",
"title": "Post Meta"
}
]
}

全域性樣式和樣式變化

如上所述，從 WordPress 6.0 開始，主題作者可以將多組樣式與其主題捆綁在一起，使使用者能夠在樣式變體之間切換而無需更改主題。

這個偉大的 WordPress 功能是新預設主題的主要特點，因為二〇二三提供了十種預建樣式組合可供選擇。

二〇二三種全域性風格

您可以在站點編輯器的全域性樣式介面中瀏覽這些樣式。在這裡你可以

• 從瀏覽樣式面板切換全域性樣式。
• 自定義排版設定——文字、連結、標題和按鈕
• 編輯預設顏色或更改特定元素的顏色
• 自定義主要內容區域的佈局
• 自定義特定元素的外觀

在二〇二三中自定義文字、顏色和佈局

再次值得注意的是，在創造如此多的風格變化時，社羣參與至關重要。在二〇二三專案啟動後，收到了來自 8 個不同國家的 19 位貢獻者的 38 份提交（您可以在 GitHub 上探索所有專案）。

在 38 種風格中，選擇了 10 種款式：

• Pitch 是預設樣式的深色版本，它使用 Rasmus Andersson 的 Inter 字型系列。

Pitch 是二〇二三的黑暗變體

• Canary 使用單一型別大小和窄列寬。它還使用了一個有趣的邊界半徑效果。

Canary 使用單一型別大小和窄列寬

• Electric 為整個網站的所有排版使用了大膽的顏色。
• Pilgrimage 是基本主題的彩色深色版本。
• Marigold 是基本風格的柔軟和愉快的變化。
• Block-Out 在影象上具有雙色調效果。
• Whisper 展示了一些自定義元素，例如頁面邊緣的邊框、按鈕樣式和獨特的連結下劃線。
• Sherbet 具有獨特的明亮多彩外觀

Sherbet 具有獨特的多彩外觀

• Grapes 因其令人愉悅的調色盤和字型組合而被選中。

樣式變化最酷的一點是，您不必一定是前端開發人員來建立樣式。

如果您對編碼感到滿意，您可以選擇 23 種樣式資料夾中的.json檔案之一，並將其​​用作模板來構建您的樣式變體。

但如果編碼不是你的事，你可以使用官方的 Create Block Theme 外掛，你可以從 WordPress.org 外掛目錄免費下載。

首先，安裝並啟用外掛，然後導航到樣式編輯器。在這裡，根據您的喜好自定義顏色、排版和佈局並儲存您的更改。

在全域性樣式介面中自定義樣式

對更改感到滿意後，在 WordPress 管理選單的外觀下找到建立區塊主題。

建立區塊主題選單項

檢查列表中的最後一項：建立樣式變化。您將被要求為您的風格變化指定一個名稱。輸入名稱並單擊建立主題。這將在主題的樣式資料夾中建立一個新的.json檔案。

建立樣式變化

現在您可以進一步自定義您的樣式，甚至將其匯出到其他 WordPress 安裝。

建立塊主題外掛是一個有價值的工具，可以充分利用最新版本的 WordPress 提供的主題和模板建立功能。當您使用它時，您可能會檢視所有其他選項：

• 匯出二〇二三
• 建立二〇二三的子主題
• 克隆二〇二三
• 覆蓋二〇二三
• 建立空白主題
• 建立樣式變體

自定義樣式變體出現在樣式瀏覽器中

小結

乍一看，新的預設 WordPress 主題可能看起來像是一種無特色的空盒子，但仔細觀察，它遠不止於此，因為它允許您充分利用最新的 WordPress 站點編輯功能。

在二〇二三（Twenty Twenty-Three）中，您將看到許多要自定義的模板和模板部分，一組 10 種樣式變體可用作建立獨特網站的基礎，並支援 WordPress 6.1 中可用的所有新功能，從 Fluid Typography 和改進的模板系統。

對於二〇二三，感覺是網站外觀和功能之間的差異現在很明顯。主題的唯一功能是規範網站的外觀，將功能新增到外掛中。從這個角度來看，二〇二三做得很好，為 WordPress 使用者提供了所有最新的古騰堡網站編輯功能。自定義網站的外觀從未如此簡單。