二十二十三：來自社區的新默認 WordPress 主題

已發表: 2022-09-30

二十二十三是與 WordPress 6.1 一起推出的全新的默認 WordPress 主題。

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

在他對二十二十二主題的介紹中，Kjell Reigstad 談到了默認主題的未來：

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

Channing Ritter 提出了以下建議：

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

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

輕巧、靈活，並具有來自社區的一組令人驚嘆的風格變化 Meet Twenty Twenty-3，使用 WordPress 6.1 登陸的新的默認 WordPress 主題Click to Tweet

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

頁面佈局和样式

如上所述，二十二十三是二十二十二的精簡版。新的默認主題引人注目的是它的簡單性和輕盈性。 Twenty Twenty-3 非常靈活，非常適合 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 上提供了頁面模板、樣式和二十三的樣式變化的完整預覽。

二十二十三排版

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

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

字體

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

系統字體– 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 字體。您可以在 Adobe Fonts 和 IBM 網站上看到它的預覽。

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

Source Serif Pro是 Adobe Originals 的字體，您可以通過 Adobe Fonts 帳戶免費使用它（閱讀有關 Adobe 字體許可的更多信息）。

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

流體排版和間距

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

新的默認 WordPress 主題在 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設置了最小和最大字體大小值。

除了流體排版，二十三還支持流體間距。

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

主題可以使用新的spacing.spacingScale e 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" ] } }

下面的視頻顯示了流體排版在 2223 中的實際應用。

您可以在設計規範中檢查排版和間距預設。

模板和模板部件

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

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

當您啟動站點編輯器並在您的網站上運行 23-23 時，您將看到包含 11 個模板和 4 個模板部分的列表。

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

您將在二十二三的模板和部件文件夾中找到相應的 HTML 文件。

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

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

自定義模板

除了默認模板外，二十二十三還提供以下自定義模板：

空白的
博客（替代）
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" } ] }