通過全站編輯和theme.json徹底改變WordPress排版方式

儘管媒體數量激增，但文字仍是網際網路的支柱。這意味著您為網站選擇的字型將是佈局和設計的一個重要方面。

WordPress 字型設計可以喚起人們的情緒，有助於品牌塑造等。WordPress 中的全站編輯（FSE）功能可以讓使用者自定義排版，而 theme.json 檔案則可以幫助開發人員構建能夠利用這一功能的 WordPress 主題。

本文探討了 WordPress 中 FSE 和 theme.json 的排版。不過，討論還包括一些關鍵背景，例如您使用的技術、需要牢記的技術注意事項，以及我們在設計中使用字型的演變過程。

網頁字型設計：簡史

如果回顧一下早期的網頁設計，就會發現儘管佈局多種多樣，但字型的表現形式卻始終如一。這一方面是可用性，另一方面是必要性。簡而言之，如果沒有現在的技術，網路上的文字只能使用電腦上的字型。

對於 90 年代中後期的網路衝浪者來說，只有少數幾種可預見的字型： Times New Roman、Arial、Helvetica、Georgia 和 Verdana。後兩種字型是微軟委託設計的，無論在什麼時代都能很好地呈現在網路上。

Verdana 和 Georgia 字型的樣本

這種原始的字型選擇具有一致性和可靠性，但缺乏靈活性。Google Fonts 和 Adobe Fonts 等服務使用 WOFF 檔案格式，讓您可以訪問數以千計的字型庫，而且嵌入過程簡單明瞭。

Google 字型主介面

這為您提供了更大的空間來提高可讀性、建立獨特的設計以及為您的網站量身定製使用者體驗（UX）。缺點包括潛在的效能影響（如內容佈局變化）、依賴第三方服務來顯示網站上最重要的元素以及隱私問題。

這導致許多網頁設計師放棄字型庫，重新考慮使用系統字型。在應用 “系統字型堆疊”時，您可以更快地處理和控制，優先使用本地字型，同時使用後備選項，這是一種可靠的方法。

WordPress和排版

WordPress 非常重視排版，以幫助您建立具有吸引力和可讀性的內容。縱觀其歷史，WordPress 的預設主題都使用在美觀和功能之間取得平衡的字型搭配。

當前的預設主題使用系統字型堆疊，呈現出簡潔、現代和高效能的效果。舊版預設主題則使用 Noto Sans 和 Noto Serif（用於二〇一五）以及 Montserrat 和 Merriweather（用於二〇一六）等字型搭配。

為了展示這種字型設計的 “生命輪迴”，Twenty Sixteen 使用 Helvetica 和 Georgia 作為備用選項。Twenty Ten 預設主題只使用 Helvetica、Arial 和 Georgia：

來自 WordPress.org 的 Twenty Ten 演示頁面

雖然這些選擇為每個主題中的 WordPress 設計定下了基調，但它們也能啟發您密切關注如何使用排版，而這正是 WordPress FSE 可以幫助您做到的。

全站編輯和theme.json簡要介紹

FSE 和theme.json是您在 WordPress 中管理排版的核心，因此瞭解這兩者至關重要。FSE 利用塊編輯器並新增更多功能，成為站點編輯器。

WordPress 網站編輯器介面與區塊編輯器非常相似，但具有更多自定義範圍。

這在很多方面統一了網站設計選項：

• 您可以對整個網站而不僅僅是內容使用塊編輯器的編輯方法。
• 模板庫是設定的一部分，因此您可以使用與內容相同的工具來編輯模板庫。
• 網站編輯器中也有樣式設定，並提供全域性設定方案。
• 網站編輯不需要任何程式碼就能實現任何可用選項。這就縮小了開發與終端使用者設計之間的差距。

您可以將 theme.json 檔案視為 FSE 的開發版本。您需要掌握 JavaScript Object Notation（JSON）知識才能使用該檔案，但這是大多數網站所有者都能做到的。它是一箇中央配置檔案，用於管理全域性樣式和設定。

在程式碼編輯器中展示的 theme.json 檔案

每個設定都使用 option:value 的鍵/值對，可以通過多種方式實現：

• 定義全域性調色盤。
• 設定字型家族和大小。
• 配置特定塊的樣式
• 管理間距和佈局偏好。

利用 theme.json，您可以建立更一致、更可定製的主題，而無需使用自定義 CSS（儘管這也是可能的）。theme.json 的適應性和靈活性意味著它是為 WordPress 開發主題的關鍵組成部分。最佳方法是在所有主題設計中以不同方式使用這兩種方法，排版也不例外。

在WordPress網站編輯器中設定排版

如果您知道如何使用區塊編輯器，也可以使用網站編輯器。在 WordPress 中，導航到外觀 > 編輯器介面。這將顯示網站編輯器的主螢幕：

網站編輯器主螢幕

左側導航欄中的樣式螢幕提供了一些全域性設計選項，其中包括排版更改：

WordPress 網站編輯器中的不同樣式預設選項

在大多數情況下，針對不同排版方面的單獨設定會給你帶來更大的價值。樣式螢幕頂部有兩個小圖示，可以開啟更多選項：樣式手冊和編輯樣式鉛筆圖示。

網站編輯器中的樣式編輯圖示

此外，你還可以在元素級別和每個區塊設定排版選項。

字型庫

編輯樣式>排版螢幕會顯示字型庫，不過在站點編輯器中並沒有這個明確的名稱。您可以通過幾種方式處理字型和排版：

• 可以上傳和管理自定義字型。
• 可以在 WordPress 中直接使用 Google 字型。
• 使用 PHP 建立字型庫。

要從網站編輯器側邊欄的排版部分訪問字型庫，請單擊管理字型圖示：

WordPress 網站編輯器中的管理字型圖示

在這裡，庫選項卡會顯示當前為主題註冊的字型，並顯示哪些字型處於活動狀態：

WordPress 字型庫介面

點選其中任何一個，即可啟用或停用個別字型：

網站編輯器字型庫中當前啟用的字型

在上傳選項卡上，你可以使用拖放式上傳對話方塊來安裝自己的 TTF、WOFF、WOFF2 和 OTF 格式字型。

安裝字型選項卡會連線到 Google 字型，因此你可以在主題中使用該庫。請注意，這種方法是從你的網站而不是 Google CDN 下載和提供字型：

WordPress 網站編輯器中的 Google 字型庫

在這裡，從綜合列表中選擇要安裝的字型，然後點選安裝按鈕。一旦顯示成功通知，這些字型就會顯示在庫選項卡上：

WordPress 例項的已安裝字型

這樣，您就可以像在網站上使用其他字型一樣使用這些字型了。現在，您需要對它們進行自定義，以滿足您的需求。

樣式手冊

選擇和設定字型的危險之一是，你不知道它與配色方案、佈局和格式化的組合效果如何。樣式手冊非常有價值，它可以讓你預覽不同元素的排版設定。

網站編輯器樣式手冊

選擇眼睛圖示將開啟樣式手冊，這裡有五個選項卡：

• 文字：在這裡可以處理段落、標題、列表和其他以文字為主的元素。
• 媒體：在這裡，你可以調整圖片、視訊和音訊設計演示。
• 設計：該部分整理了結構設計方面的內容，如列、分隔符和按鈕。
• 小工具：該介面有兩個元素：動態生成，如存檔和評論列表。你還可以在這裡使用搜尋欄、社交媒體圖示和標籤雲。
• 主題：這裡主要是網站標題元素，如標題、標語、導航和徽標。

如果點選風格手冊中的某個元素，側邊欄中就會出現各種選項。在這裡，你要處理的是每個區塊的排版設定，而不是專門的元素：

您可以直接在樣式表中編輯排版

您也可以從網站編輯器主頁的樣式>區塊部分進入相同的介面。無論如何，你所看到的選項都能讓你詳細定製每個區塊的排版（以及更多內容）。

在網站編輯器中調整排版選項

對於所有區塊和元素，你都可以使用相同的核心選項。下面是面板中每個選項的概述。

字型型別和大小

字型下拉選單非常簡單：選擇要應用到特定元素或區塊的字型：

從排版選項卡中的可用選項中選擇字型

在網站編輯器中，字型大小預設的自定義功能最少。您可以從小到特大之間的範圍內選擇字型大小：

WordPress 在網站編輯器中提供了字型大小預設

如果編輯 theme.json，你可以更改這些預設值，但不能在網站編輯器中更改。設定自定義字型大小按鈕提供了一種使用大小單位陣列設定自定義字型大小的方法：

選擇自定義字型大小和單位

在網站編輯器中還有更多調整排版的方法，包括通常使用 CSS 的方法。

外觀、行高和字間距

外觀下拉選單看起來很簡單：從一個龐大的列表中選擇一種字型重量，它就會應用到你的文字中。不過，你通常不會擁有每個權重的所有可用字型。

WordPress 網站編輯器中的外觀下拉選單

我們的測試表明，WordPress 不會過濾這個列表，只顯示可用的字型權重。此外，如果您選擇的權重沒有匹配的字型，它還會應用 “最近匹配”。例如，我們在示例網站中使用了 Cardo Normal、Cardo Bold 和 Cardo Bold。選擇 Semi Bold、Bold、Extra Bold 或 Black 時，只使用 Cardo Bold：

在 WordPress 網站編輯器中更改文字外觀

行高不使用預設值，可平衡字型選擇、外觀和大小。 該值會在每行之間留出更多空間，當文字看起來很擁擠時，它通常是一種實用的方法：

在 WordPress 網站編輯器中更改行高

字母間距與此類似，它遵循 CSS 的習慣，在自然間距的基礎上自行增加：

你可以將字母間距拉得太大，使其無法使用

與自定義字型大小一樣，你可以選擇不同的測量單位。在這裡，選擇一個相對值通常是更好的方法。WordPress 將字母間距設定為 CSS 預設的 “正常”。這可以讓瀏覽器選擇數值，根據我們的經驗，這是最理想的方法。

通常的做法是使用較小的正字母間距值（通常不超過 0.12rem/em ），而幾乎不使用負間距。

最後一組選擇–字母大小寫–可讓您選擇文字的大寫、小寫或句子大小寫。您還可以刪除大小寫。這非常有利於保持字型的一致性，因為在建立內容時，你不需要特別使用特定的大小寫。

如何使用theme.json定義WordPress主題的排版

網站編輯器非常適合沒有技術知識的網站使用者。 theme.json 檔案可以確保網站編輯器為使用者提供定製網站所需的內容。該配置檔案是主題的開發基礎。

我們不會深入研究整個 theme.json 檔案的結構和格式，但我們會研究如何在其中定義、設定和應用排版。

瞭解theme.json結構和定義全域性設定

我們使用 JSON 來定義 theme.json 中的所有元素，其中包括排版。typography 元素巢狀在該檔案的 settings 物件下。在此基礎上，你可以巢狀更多元素、屬性和物件來構建網站的排版：

{
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"slug": "system-font",
"name": "System Font"
}
],
"fontSizes": [
{
"slug": "small",
"size": "13px",
"name": "Small"
},
{
"slug": "medium",
"size": "20px",
"name": "Medium"
}
]
}
}
}

所有這些元素都遵循類似的模式。最容易理解的預設設定是全域性設定。這些設定可以直接巢狀，但也可以為單個塊定義排版設定：

"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--primary)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.5"
}
},
"core/heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--secondary)",
"fontWeight": "700"
}
}
}
}

這種方法使用了 block 屬性，併為每個目標 Block 設定了特定的名稱空間。雖然增加了兩個巢狀層，但這種方法別無選擇。無論如何，你都有很多屬性可以使用。

註冊字型

在網站編輯器介面中，你可以對排版進行相同程度的自定義，在某些情況下甚至更多。在核心層面上，你可以將字型堆疊巢狀到 fontFamilies 屬性中，然後為其命名：

• fontFamily 對映到 font-family CSS值，是你希望在主題中使用的字型堆疊。
• name 是你在網站編輯器中選擇字型時看到的內容，因此它將是可讀的。
• slug 新增到自定義 CSS 屬性中，以便進一步使用。

對於系統字型來說，這很簡單：

…
"typography": {
"fontFamilies": [
{
"name": "Primary",
"slug": "primary",
"fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
},
{
"name": "Secondary",
"slug": "secondary",
"fontFamily": "system-ui, sans-serif"
}

註冊自定義網路字型需要使用 fontFace 屬性並定義一些屬性：

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
"fontFace": [
{
"fontFamily": "Open Sans",
"fontWeight": "300 800", // This is a range of font weight values.
"fontStyle": "normal", // This has to be a valid CSS font-style value.
"fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
"src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
},
…

註冊字型後，您可以從網站編輯器的各種下拉選單中選擇字型。

請注意，有幾種方法可以為主題註冊字型。有網站編輯器介面中的字型庫、典型的 PHP 查詢和 Create Block Theme 外掛：

來自 WordPress.org 的 Create Block Theme 外掛的頭圖

這是一個用於建立主題的模板，也可以讓你註冊和定義排版。一旦你以合適的方式註冊了字型（我們推薦使用字型庫），你就可以開始研究字型大小了。

在theme.json中設定字型大小和預設值

字型設計的另一個核心任務是設定字型大小。這需要使用 fontSizes 屬性，併為網站編輯器定義預設值：

"settings": {
"typography": {
"fontSizes": [
{
"slug": "small",
"size": "12px",
"name": "Small"
},
{
"slug": "x-large",
"size": "32px",
"name": "Extra Large"
}
]
}
}

與其他排版設定一樣，WordPress 會使用您提供的標題為每個預設生成自定義 CSS 屬性：

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPress 預設禁用流體排版，但您可以使用布林值將其開啟。這是一個可以在全域性級別設定的選項…

{
"version": 2,
"settings": {
"typography": {
"fluid": true
}
}
}

……或您定義的每個預設和尺寸：

{
"name": "Medium",
"size": "1.25rem",
"slug": "md",
"fluid": {
"min": "1rem",
"max": "1.5rem"
}
},

通過 min 和 max，您可以確定所定義的每種流體字型大小的可縮放範圍。

實現高階排版功能

theme.json 提供了與網站編輯器相同的全套選項。您可以根據自己主題的預設設定自定義網站的排版：

"styles": {
"typography": {
"letterSpacing": "0.02em",
"textTransform": "uppercase",
"textDecoration": "underline",
"lineHeight": "1.55rem",
"fontStyle": "normal"
}
}

您可以選擇啟用或禁用這些選項。每個選項都有一個布林值，這意味著網站編輯器也有一些自定義選項。除了網站編輯器提供的功能外，你還可以進行一些定製：

• customFontSize 預設開啟，使用者可以輸入自定義字型大小，但如果想嚴格控制可用選項，也可以禁用它。
• dropCap 預設為假，但如果啟用，使用者就可以選擇為任何段落塊的首字母啟用大寫。
• textColumns 可以為塊中的任何文字啟用列選項，預設情況下是關閉的。
• writingMode 啟用了在站點編輯器中更改文字方向的選項。使用者可以在水平和垂直文字之間進行選擇。

theme.json 的範圍意味著你應該首先在這裡工作，尤其是在建立主題時。網站編輯器中的選項可以讓您或您的使用者完善 WordPress 的排版。

如何使用 theme.json 實現排版：一個實用示例

FSE 使 WordPress 的設計和開發變得前所未有的簡單。更重要的是，選擇和實現這些字型的一些一般過程更加簡單明瞭。這其中有些是由於設計趨勢的影響，但也有一些工具可以填補您沒有平面設計師可以提供幫助的空白。

我們可以從您選擇的核心字型開始。

1. 搭配互補字型
2. 找到合適的絕對大小和相對大小
3. 在 theme.json 中應用預設值

1. 配對互補字型

在如何選擇字型和排版方面寫了這麼多文章是有原因的。因為這可能是一項棘手的任務。例如，你必須考慮網站的品牌、目的以及想要傳達的資訊。

不過，由於當前的設計趨勢，這方面的工作要少得多。這是因為正文可以使用系統字型，特別是主要的作業系統（OS）字型。你唯一的任務就是選擇與之搭配的字型。

這並不是一本關於如何搭配字型的教程，但我們有一些技巧可以傳授給大家：

• 用於正文的作業系統字型通常是無襯線字型。這就意味著要尋找一種襯線字型或另一種無襯線字型，它們看起來與眾不同、獨一無二、引人注目。
• 保持簡潔，如果作業系統字型與設計相匹配，可以考慮只使用作業系統字型。
• 測試不同的組合，因為你可以感受到哪些字型可以搭配使用（哪些不可以）。

Playfair Display 是系統字型堆疊的一對好搭檔，它是一種襯線谷歌字型：

Playfair Display 的 Google 字型樣本頁

使用一對字型時，不僅要考慮它們在頁面上的大小，還要考慮它們之間的相互關係。

2. 找到正確的絕對大小和相對大小

選擇字型大小也很關鍵，因為錯誤的絕對大小會破壞使用者體驗/使用者介面。這也是您可能希望堅持使用預設值的一個方面。不過，我們鼓勵您在此進行嘗試，因為每種配對都有自己的字型空間。

Typescale 是一款出色的工具，無論您需要什麼，它都能幫助您建立合適的 WordPress 排版：

Typescale 網站

該工具最出色的地方之一就是比例選擇。它基本上可以幫你完成很多選擇字型大小的工作。我們在這裡選擇的是大三度字型，係數為 1.2，基本尺寸為 16px：

Typeface 中的字型縮放選項

在中間的面板中，你可以看到每個標題和段落的字型大小，並可以選擇多種計量單位。請注意，Typescale 還允許你更改字母間距、行高、字型重量等：所有這些都可以在theme.json 中自定義。

3. 在 theme.json 中應用預設值

一旦有了合適的字型和大小，就可以在 theme.json 檔案中實現它們。下面是一個典型 theme.json 檔案的示例：

{
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"slug": "ubuntu-sans",
"name": "Ubuntu Sans"
},
{
"fontFamily": "\"Playfair Display\", serif",
"slug": "playfair",
"name": "Playfair Display"
}
],
"fontSizes": [
{
"slug": "small",
"size": "13px",
"name": "Small"
},
{
"slug": "medium",
"size": "16px",
"name": "Medium"
},
{
"slug": "large",
"size": "20px",
"name": "Large"
},
{
"slug": "x-large",
"size": "25px",
"name": "Extra Large"
},
{
"slug": "huge",
"size": "31px",
"name": "Huge"
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--system)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.8"
},
"blocks": {
"core/paragraph": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
},
"core/heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--playfair)",
"fontWeight": "700"
}
},
"core/post-title": {
"typography": {
"fontSize": "var(--wp--preset--font-size--huge)"
}
}
}
}
}

您也可以將這些字型應用於任何區塊，甚至可以考慮以獨特的方式為每個標題設計樣式。建立一個一致的、層次分明的 WordPress 排版系統，它將成為主題設計的基礎。這將確保整個網站的外觀協調一致，而網站編輯器將為您提供更好的靈活性和自定義功能。

小結

FSE 日漸成熟，而 theme.json 是整個 WordPress 編輯方法的核心。排版是一個關鍵因素，WordPress 提供了開發人員級別的工具，可以訪問以前需要掌握 CSS 和 PHP 才能訪問的元素。

有了網站編輯器的直觀介面和 theme.json 的適應性，您就可以建立能增強網站美感、與您的品牌產生共鳴並提升整體使用者體驗的排版。

我們很想聽聽您在 WordPress 排版方面的經驗，以及 FSE 是否是您成功的關鍵。請在下面的評論中與我們分享您的想法。