WordPress 6.1 新增的默認(rèn)主題2023功能特色詳解

2023（Twenty Twenty-Three）是與WordPress 6.1一起推出的全新的默認(rèn) WordPress 主題。

這是一個(gè)極簡主義主題，沒有圖像或附加功能。它提供了最佳的入門主題來構(gòu)建模板和樣式變化，并測試最新版本的 WordPress 引入的所有功能。該主題可以被視為一個(gè)真正的開發(fā)和測試環(huán)境，盡管極簡風(fēng)格、響應(yīng)能力和輕便性使其成為創(chuàng)建適合各種用途的博客和網(wǎng)站的不錯(cuò)選擇。

在他對(duì)2022主題的介紹中，Kjell Reigstad 談到了默認(rèn)主題的未來：

theme.json、塊模板（block templates）和塊樣板（block patterns）等創(chuàng)新使主題開發(fā)變得更加簡單，并為用戶提供了自定義網(wǎng)站的新方法。有理由相信社區(qū)可以利用這一切在未來幾年為我們的用戶構(gòu)建更頻繁和多樣化的主題和定制解決方案。

Channing Ritter 提出了以下建議：

如果我們沒有強(qiáng)調(diào)主題本身，而是強(qiáng)調(diào)了由社區(qū)成員設(shè)計(jì)的一組自以為是的風(fēng)格變化怎么辦？我們可以使用2022作為一個(gè)新主題的基礎(chǔ)，該主題被剝離和最小化——一張空白的畫布，讓各種風(fēng)格的變化大放異彩。

這就是新的2023默認(rèn)主題所發(fā)生的事情。社區(qū)被要求積極參與設(shè)計(jì)默認(rèn)的 WordPress 主題，我們喜歡這樣，因?yàn)樗剐轮黝}成為真正參與工作的結(jié)果。

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

頁面布局和樣式

如上所述，2023是2022的精簡版。新的默認(rèn)主題引人注目的是它的簡單性和輕盈性。2023主題 非常靈活，非常適合 Gutenberg 的最新站點(diǎn)編輯功能，例如模板編輯、全局樣式變體、流體排版和塊樣板。

因此，毫不奇怪，在本文顯示的屏幕截圖中，您會(huì)看到?jīng)]有任何花里胡哨但非常適合定制和測試的最小頁面。

舉個(gè)例子，下圖顯示了帶有和不帶有特色圖片的單個(gè)帖子頁面。

下圖將主頁與存檔頁面進(jìn)行了比較。

即使新主題是2022的簡化版本，與之前的默認(rèn)主題相比，2023也呈現(xiàn)出一些關(guān)鍵的差異。

首先，標(biāo)題的大小已減小，默認(rèn)襯線字體已替換為系統(tǒng)無襯線字體。

此外，還應(yīng)用了不同的調(diào)色板。您可以在theme.json的以下代碼中看到新的2023調(diào)色板定義：

{
	"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"
				}
			]
		},
	}
}

但新的默認(rèn)主題的主要特點(diǎn)是它的樣式變化集。2023帶有十種全局樣式變體，每一種都展示了顏色、字體系列和字體大小的不同組合。

您將在2023種樣式文件夾中找到相應(yīng)的 JSON 文件。

Figma上提供了頁面模板、樣式和2023的樣式變化的完整預(yù)覽。

2023排版

在像2023這樣的最小主題中，排版在使文本可讀、網(wǎng)站吸引人以及最終為訪問者提供有益的瀏覽體驗(yàn)方面發(fā)揮著關(guān)鍵作用，無論設(shè)備和屏幕大小如何。

為此，2023帶有一組新的字體系列，并使用 WordPress 6.1 引入的流體排版（Fluid Typography）。

字體

2023具有一組用于風(fēng)格變化的新字體，其特點(diǎn)是簡單和多樣：

• 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 ) 下發(fā)布的新的企業(yè) IBM 字體。您可以在Adob??e Fonts和IBM網(wǎng)站上看到它的預(yù)覽。

Inter是由 Rasmus Andersson 為計(jì)算機(jī)屏幕制作和設(shè)計(jì)的免費(fèi)開源字體系列。您可以在Rasmus Andersson 的網(wǎng)站或Google Fonts上預(yù)覽和下載字體系列。

Source Serif Pro是Adob??e Originals的字體，您可以通過 Adob??e Fonts 帳戶免費(fèi)使用它（閱讀有關(guān)Adob??e 字體許可的更多信息）。

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

流體排版和間距

2023使用WordPress 6.1 引入的流體排版和間距預(yù)設(shè)。

新的默認(rèn) WordPress 主題在 WordPress 主題中提供了一個(gè)很好的流暢排版實(shí)現(xiàn)示例，您可以將其用作模板，在您的主題中添加對(duì)此功能的支持。

以下代碼顯示了theme.jsonsettings.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設(shè)置增加了對(duì)流暢排版的支持，同時(shí)typography.fontSizes[].fluid設(shè)置了最小和最大字體大小值。

除了 Fluid Typography，2023 還支持流體間距。

在 WordPress 6.1 之前，只能在編輯器中設(shè)置自定義間距值。這意味著在 WordPress 6.1 之前，主題作者無法為填充、邊距和間隙指定固定值。這導(dǎo)致了一些限制。例如，在不同主題之間輕松傳輸間距設(shè)置或在不同站點(diǎn)之間復(fù)制和粘貼內(nèi)容和塊模式時(shí)保持間距值是不可能的。

主題可以使用新的 spacing.spacingScale和spacing.spacingSizes設(shè)置聲明流體間距支持（在Theme.json 中閱讀更多內(nèi)容：添加間距大小預(yù)設(shè)）。在2023中，這是通過以下設(shè)置完成的：

"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"
		]
	}
}

下面的視頻顯示了流體排版在 2023主題中的實(shí)際應(yīng)用。

您可以在這里中檢查排版和間距預(yù)設(shè)。

模板和模板部分

使用2023，您將看到 WordPress 6.1 附帶的所有功能和站點(diǎn)編輯改進(jìn)。對(duì)于模板和模板部分尤其如此。

當(dāng)您啟動(dòng)站點(diǎn)編輯器并在您的網(wǎng)站上運(yùn)行 2023 時(shí)，您將看到包含 11 個(gè)模板和 4 個(gè)模板部分的列表。

下圖顯示了站點(diǎn)編輯器中的404 模板。

您將在2023的模板和部分文件夾中找到相應(yīng)的 HTML 文件。

下圖顯示了編輯模式下的評(píng)論 Comments 模板部分：

您會(huì)發(fā)現(xiàn)在theme.json中定義的自定義模板和模板部分。

自定義模板

除了默認(rèn)模板外，2023還提供以下自定義模板：

• 空白的
• 博客（替代）
• 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 開始，主題作者可以將多組樣式與其主題捆綁在一起，使用戶能夠在樣式變體之間切換而無需更改主題。

這個(gè)偉大的 WordPress 功能是新默認(rèn)主題的主要特點(diǎn)，因?yàn)?023提供了十種預(yù)建樣式組合可供選擇。

您可以在站點(diǎn)編輯器的全局樣式界面中瀏覽這些樣式。在這里你可以

• 從瀏覽樣式面板切換全局樣式。
• 自定義排版設(shè)置——文本、鏈接、標(biāo)題和按鈕
• 編輯默認(rèn)顏色或更改特定元素的顏色
• 自定義主要內(nèi)容區(qū)域的布局
• 自定義特定元素的外觀

再次值得注意的是，在創(chuàng)造如此多的風(fēng)格變化時(shí)，社區(qū)參與至關(guān)重要。在2023項(xiàng)目啟動(dòng)后，收到了來自 8 個(gè)不同國家的 19 位貢獻(xiàn)者的 38 份提交（您可以在 GitHub 上瀏覽所有項(xiàng)目）。

在 38 種風(fēng)格中，選擇了 10 種款式：

• Pitch是默認(rèn)樣式的深色版本，它使用Rasmus Andersson 的Inter 字體系列。

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

• Electric為整個(gè)網(wǎng)站的所有排版使用了大膽的顏色。
• Pilgrimage 是基本主題的彩色深色版本。
• Marigold是基本風(fēng)格的柔軟和愉快的變化。
• Block-Out在圖像上具有雙色調(diào)效果。
• Whisper展示了一些自定義元素，例如頁面邊緣的邊框、按鈕樣式和獨(dú)特的鏈接下劃線。
• Sherbet具有獨(dú)特的明亮多彩外觀

• Grapes因其令人愉悅的調(diào)色板和字體組合而被選中。

樣式變體最酷的一點(diǎn)是，您不必一定是前端開發(fā)人員來創(chuàng)建樣式。

如果您對(duì)編碼感到滿意，您可以選擇23 種樣式文件夾中的.json文件之一，并將其??用作模板來構(gòu)建您的樣式變體。

但如果編碼不是你的事，你可以使用官方的Create Block Theme插件，你可以從 WordPress.org 插件目錄免費(fèi)下載。

首先，安裝并激活插件，然后導(dǎo)航到樣式編輯器。在這里，根據(jù)您的喜好自定義顏色、排版和布局并保存您的更改。

對(duì)更改感到滿意后，在 WordPress 管理菜單的外觀下找到創(chuàng)建塊主題。

檢查列表中的最后一項(xiàng)：創(chuàng)建樣式變化。您將被要求為您的風(fēng)格變化指定一個(gè)名稱。輸入名稱并單擊創(chuàng)建主題。這將在主題的樣式文件夾中創(chuàng)建一個(gè)新的.json文件。

現(xiàn)在您可以進(jìn)一步自定義您的樣式，甚至將其導(dǎo)出到其他 WordPress 安裝。

創(chuàng)建塊主題插件是一個(gè)有價(jià)值的工具，可以充分利用最新版本的 WordPress 提供的主題和模板創(chuàng)建功能。當(dāng)您使用它時(shí)，您可能會(huì)查看所有其他選項(xiàng)：

• 導(dǎo)出2023主題
• 創(chuàng)建2023子主題
• 克隆2023主題
• 覆蓋2023主題
• 創(chuàng)建空白主題
• 創(chuàng)建樣式變化

總結(jié)

乍一看，新的默認(rèn) WordPress 主題可能看起來像是一種無特色的空盒子，但仔細(xì)觀察，它遠(yuǎn)不止于此，因?yàn)樗试S您充分利用最新的 WordPress 站點(diǎn)編輯功能。

在2023主題中，您將看到許多要自定義的模板和模板部分，一組 10 種樣式變體可用作創(chuàng)建獨(dú)特網(wǎng)站的基礎(chǔ)，并支持 WordPress 6.1 中可用的所有新功能，從流體排版 Fluid Typography 和改進(jìn)的模板系統(tǒng)。

對(duì)于 2023，感覺是網(wǎng)站外觀和功能之間的差異現(xiàn)在很明顯。主題的唯一功能是規(guī)范網(wǎng)站的外觀，將功能添加到插件中。從這個(gè)角度來看，2023做得很好，為 WordPress 用戶提供了所有最新的古騰堡網(wǎng)站編輯功能。自定義網(wǎng)站的外觀從未如此簡單。

好了，關(guān)于 2023 主題的特色介紹就到這里，如果您很感興趣，可以自己安裝和測試，歡迎在下面分享您的測試感受。