使用子主題為WordPress區塊主題自定義樣式

區塊主題和 theme.json 為您提供了極大的靈活性，這可能讓您覺得子主題似乎已經過時了。但在很多情況下，它們仍然必不可少。

如果您想真正掌控網站的設計，而無需修改父主題的核心檔案，那麼使用子主題仍然是正確的選擇。

在本文中，我們將以 Twenty Twenty-Five 主題為基礎，指導您建立一個具有自己的 style.css 和 functions.php 的區塊子主題。您將學習如何安全地覆蓋樣式、定義自定義區塊樣式，甚至設定您自己的樣式變體。這不僅僅是一個樣式技巧，更是朝著構建您自己的完整區塊主題邁出的堅實一步。

雖然這個練習看起來很簡單，但我們將探討一些可能會讓您犯錯的細節。讓我們從建立自定義子主題開始，然後實現自定義樣式變體。

註冊區塊級子主題

註冊區塊子主題比註冊經典主題簡單得多。

從技術上講，您根本不需要註冊它。當正確命名的子主題資料夾同時包含 theme.json 檔案和 style.css 檔案時，註冊會自動進行。

那麼，為什麼 style.css 檔案仍然必不可少呢？

與以前一樣，它包含一個必需的標頭（如下所示），其中包含 WordPress 用於識別主題的後設資料，包括主題名稱和它所擴充套件的父主題。雖然現在樣式和設定都在 theme.json 中處理，但 style.css 仍然在 WordPress 識別您的主題方面發揮著關鍵作用，即使它不包含任何實際的 CSS。

/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/

除非您想要排隊指令碼或新增基於 PHP 的功能，否則 functions.php 檔案不是必需的。我們稍後會講解這些內容。

如果您不熟悉 theme.json 或想快速複習一下，請檢視我們的指南“在 theme.json 中使用屬性和鍵值對”。

對我們的子主題進行三項基本更改

首先，更新全域性背景和文字顏色，並設定按鈕區塊的樣式。

在子主題的 theme.json 檔案（作為預設樣式）中，我們定義以下內容：

{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}

雖然背景和文字顏色適用於所有樣式變化，但按鈕區塊樣式僅適用於預設變化。

子主題在站點編輯器中使用預設樣式變體。

覆蓋樣式變體

要在不同變體中應用相同的按鈕樣式，最好建立一個與父主題變體命名約定相匹配的 .json 檔案。

例如，要覆蓋 Evening 樣式變體中的按鈕邊框，請在子主題的根目錄（或 /styles 子資料夾內）建立一個名為 01-evening.json 的檔案：

{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}

這裡，我們使用了更寬的虛線邊框來突出按鈕。由於這些樣式更具體，它們會覆蓋 theme.json 中的通用樣式。

注：無需重新定義全域性背景或文字顏色——它們已經從子主題的 theme.json 中繼承。

啟用自定義晚間風格變化的子主題。

建立自定義樣式變體

讓我們更進一步，建立一個名為 Kinsta 的全新樣式變體。此變體繼承子主題的 theme.json 檔案中的全域性設定，並應用其自定義的調色盤和按鈕樣式：

將以下內容儲存為 /styles/kinsta.json：

{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}

這種“Kinsta”變體為我們提供了獨特的外觀，完全建立在子主題的結構內。

站點編輯器介面中突出顯示了新的樣式變體。

如何以及為何要將style.css新增到佇列

在像 Twenty Twenty-Five 這樣的真正的區塊主題中，無需使用 PHP 手動為父主題或子主題新增樣式表。WordPress 核心會根據 theme.json 檔案動態生成 CSS。

但是，如果您想在 style.css 檔案中編寫自定義樣式，則需要手動將其新增到佇列。

注：樣式的新增到佇列沒有一刀切的方法。這取決於父主題如何處理其自身的樣式。對於 Twenty Twenty-Five，父主題和子主題的樣式都必須手動新增到佇列。

// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});

此程式碼確保父主題和子主題的 style.css 檔案均在前端載入。

注：這些更改僅適用於前端。編輯器樣式仍然由 theme.json 控制。編輯器介面的樣式設定不在本文討論範圍內。

要確認您的樣式已正確入隊，請嘗試將以下 CSS 新增到子主題的 style.css 檔案中：

body {
color: #ffff00;
background: #0000ff;
}

這會為所有樣式變體賦予藍色背景和黃色文字顏色——僅在前端生效。

styles.css的一個簡單用例

你可能會想：為什麼要使用 CSS？theme.json 不是應該可以處理所有事情嗎？

不完全是。

例如，theme.json 不支援 :hover 之類的偽類。要為所有按鈕設定懸停效果，可以使用以下 CSS：

.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}

這適用於前端所有變體的所有按鈕區塊。

假設您想將此懸停效果限制在特定的變體或區塊中。在這種情況下，您需要使用更高階的方法，例如條件主體類、區塊過濾器或針對特定區塊的 CSS。

新增區塊樣式變體

現在，讓我們來看看如何使用 PHP 和 CSS 向按鈕區塊新增新的樣式變體。

如果您考慮向 theme.json 新增 variations 陣列，則不適用於此用例。雖然 theme.json 可以處理全域性和區塊樣式，但區塊樣式變體（例如替代按鈕樣式）需要以不同的方式註冊。

我們建立了一個名為“Alternative Outline”的新樣式變體，它與編輯器 UI 中的預設填充和輪廓樣式一起顯示，並在前端正確呈現。

在PHP中註冊樣式

將以下程式碼新增到您子主題的 functions.php 檔案中。它在核心載入之後但在任何頁面呈現之前註冊樣式：

// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name'  => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});

注：我們使用 __() 進行國際化，並將其與子主題的文字域進行名稱空間設定。

將自定義樣式新增到style.css

現在，在子主題的 style.css 檔案中定義此變體的樣式（包括 :hover 狀態）：

.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}

此處使用的顏色變數在您的 theme.json 調色盤中定義，確保整個網站的一致性。

新的“Alternative Outline”按鈕區塊樣式可在工具欄和側邊欄中檢視。

使用JSON建立區塊樣式變體

從 WordPress 6.6 開始，您可以完全使用 JSON 註冊核心區塊樣式變體，無需 PHP。

以下示例向“組”區塊新增了一個名為“Purple Background”的新變體。該變體顯示在編輯器側邊欄中，並帶有樣式預覽：

在主題的 /styles/purple-background/ 資料夾中建立一個名為 block.json 的檔案：

{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}

Purple Background 變體出現在編輯器側欄中，如下圖所示：

在站點編輯器中組區塊使用自定義樣式變體。

如果您使用多種樣式變體，建議將它們放在 /styles 子資料夾中。在本例中，檔案路徑為： /styles/purple-background/block.json。

以下是您在使用 JSON 方法時需要考慮的一些注意事項：

• 此方法不需要 PHP，並且可以減輕頁面負擔，因為 WordPress 僅在需要時載入相關的 CSS。
• 由於我們正在使用 Twenty Twenty-Five 的子主題（該主題已經使用了 theme.json 和動態樣式），因此無需手動將樣式新增到佇列中。
• 某些區塊可能尚未透過 JSON 支援所有樣式選項。如果擔心向後相容性，您可以選擇使用 register_block_style() 新增 PHP 回退選項。

小結

區塊主題提供了非凡的靈活性，為無數的開發可能性開啟了大門。在本文中，我們的目標是向您介紹區塊主題的子主題世界，並希望能夠激發您將自己的想法變為現實。

我們還探討了兩種新增自定義核心區塊樣式變體的方法——一種使用 PHP 和 CSS，另一種僅使用 JSON。

正如您所想，我們介紹的每個示例都可能引出多種思路。WordPress 擁有豐富的選項，通常提供多種方法來解決同一個問題。

例如，您可以構建一個區塊主題，使用 theme.json 進行設定，但完全依賴 style.css 進行樣式設定，從而充分利用 CSS 的廣泛功能。或者，您可以有條件地將樣式加入佇列，以便僅在使用特定變體時載入它們。

可能性無窮無盡！