WordPress 主題開發人員可以使用 theme.json 檔案來簡化過去主要依賴 PHP 的流程。不過，您仍然可以使用 HTML、JavaScript 和 PHP 技能來建立主題，CSS 也不例外。事實上，您可以在 theme.json 檔案中使用 CSS 自定義屬性。這可以增強設計階段的效果，並提供更大的靈活性。
在本指南中，我們將直面 CSS 自定義屬性，探討它們如何與 WordPress 和 theme.json 配合使用。但在此之前，我們先來總結一下 theme.json、全站編輯（FSE）以及 CSS 如何融入這種新的設計方法。
theme.json 如何與 WordPress 配合使用
theme.json 檔案首次出現在 WordPress 5.8 中。它是設計 WordPress 主題的一種革命性方法，使用 JSON 語法來構建配置檔案。WordPress 會讀取該檔案並應用其結果，而無需太多的 PHP、CSS 或 JavaScript。
程式碼編輯器中的 theme.json 檔案
FSE 中的全域性設定和樣式可以控制主題的各種視覺效果。它們可以包括典型的調色盤和排版，也可以包括佈局選項以及單獨的塊和元素樣式。
雖然 FSE 直觀、功能強大、適應性強且易於使用，但 theme.json 可以幫助縮小終端使用者與開發人員之間的差距。theme.json 提供的幾乎所有選項在網站編輯器中都可以看到。
WordPress 中的網站編輯器主介面
在構建 WordPress 主題時，使用 theme.json 有很多優勢。原因有以下幾點
- 您的主題設計配置有了一個集中的位置，從而更易於管理和更新。
- 減少了前端體驗、網站編輯器和主題程式碼庫之間的混淆。
- 使用
theme.json可以相容未來的 WordPress 開發和設計。 - WordPress 的內建功能可以減少使用者應用自定義 CSS 的需要。
讓我們來看看 theme.json 與 FSE 全域性設定和樣式的關係。
FSE 全域性設定和樣式入門
FSE 代表了 WordPress 主題開發的新時代，而全域性設定和樣式則是其中的佼佼者。它允許使用者通過網站編輯器功能自定義網站外觀的幾乎所有方面。
WordPress 網站編輯器中的樣式面板
在這裡，您可以使用以前需要 CSS 或第三方頁面生成器外掛的選項來調整主題佈局的各個方面。修改邊距、填充和邊框就是其中的例子，但還有更多。
在網站編輯器中使用典型的 CSS 元素，如 padding 和 margins
您甚至可以在 theme.json 檔案（或區塊自己的 block.json 檔案）中啟用或禁用大部分功能。這樣，使用者介面定製與網站整體設計就可以同時進行。
不過，您可以使用的選項雖然很多，但可能無法滿足所有需求。如果你從頭開始建立一個主題，情況尤其如此。CSS 自定義屬性可以幫助解決這個問題。
瞭解 CSS 自定義屬性
在 PHP、JavaScript 以及幾乎所有程式語言中，變數都可以儲存程式碼中各種元素的值。例如，你可以儲存姓名、日期和數字等值，並在整個程式中使用它們。
目前大多數瀏覽器都支援 CSS3 變數，也就是我們在本篇文章中所說的 CSS 自定義屬性。Internet Explorer 不支援，Opera Mini 也不支援。不過，主流瀏覽器都支援 CSS3 變數。
Can I Use 網站顯示了 CSS 自定義屬性的當前支援情況
CSS 自定義屬性可讓你在整個樣式表中儲存可重複使用的值。這是一種建立更動態、更靈活 CSS 的強大方法。只需更改一個值，就能更新多個樣式規則。
CSS 變數並不是一個全新的概念。Sass 等前處理器就使用了類似的功能。例如，下面的 Sass：
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
這種是典型的 CSS 處理方式：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
不過，CSS 自定義屬性可以直接將這一點傳遞給瀏覽器。這樣做有一些好處：
- 動態更新。與大多數前處理器變數不同，您可以使用 JavaScript 即時（on the fly）更新 CSS 自定義屬性。
- 層疊特性。自定義屬性將遵循 CSS 層疊，這將為您提供更大的靈活性和更多的上下文感知樣式。
自定義屬性還能減少程式碼冗餘，從而提高效能。更小的樣式表意味著更快的載入時間。
CSS 自定義屬性的語法
與典型的前處理器變數一樣，CSS 自定義屬性的語法也很簡單。它使用雙連字元而不是美元符號來指定屬性：
:root {
--primary-color: #007bff;
}
然後，使用 var() 函式將這些屬性分配給元素：
.button {
background-color: var(--primary-color);
}
請注意，您也可以使用 @ 屬性指定自定義屬性。不過，WordPress 簡化了整個過程，您很快就會明白。
可以使用 CSS 自定義屬性的地方
當涉及到 CSS 自定義屬性時，多功能性是當務之急。有了 WordPress 和 theme.json，您可以通過以下幾種方式使用它們：
- 預設： 您可以定義顏色、字型和間距預設。
- 塊樣式： 單個區塊可以使用自定義屬性，以獲得一致的樣式。
- 全域性樣式： 自定義屬性對於整個網站的設計非常重要。
你可以為任何目的建立完全自定義的屬性。讓我們來看一個如何在 theme.json 檔案中使用自定義屬性的實際例子：
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}
在這裡，我們定義了一種顏色預設，並使用 custom 屬性為頁面標題和正文定義了 line-height。WordPress 將為您使用 custom 定義的元素生成 CSS 屬性。接下來，我們可以將這些自定義屬性分配給各種樣式、設定、區塊等。
使用 CSS 自定義屬性的好處
你可能已經知道 CSS 自定義屬性如何幫助你開發主題。即便如此，還有很多好處值得注意。
我們已經談到了模組化和可重用性。你定義為自定義屬性的所有通用值都將促進一致性並減少冗餘。這種冗餘將轉化為主題更好的潛在效能。
對於終端使用者來說，自定義屬性具有以下幾個優勢：
- 簡化自定義。使用者和網站所有者無需掌握複雜的 CSS 知識，即可自定義主題。通過
theme.json公開變數後，使用者就可以通過網站編輯器訪問設定。 - 與 FSE 更好地相容。自定義屬性符合 FSE 原則，讓您可以建立更靈活、更動態的主題設計。
- 更易於維護和更新。如果您需要更新整個主題中的常用值，自定義屬性意味著只需在一個地方進行更改。它簡化了維護工作，使更新和調整更易於管理。
總的來說，自定義屬性可以改善主題開發工作流程。與使用典型的 CSS 變數相比，確定自定義屬性也更加簡單明瞭。
如何在 theme.json 中定義 CSS 自定義屬性
下面讓我們進入在 theme.json 中定義和使用 CSS 自定義屬性的實際操作層面。第一步是學習如何編寫自定義屬性。
語法和命名規則
WordPress 提供了 custom 屬性來幫助定義。與@屬性或偽類中的定義相比，自定義屬性更易於使用，並且使用標準的鍵/值格式：
{
"settings": {
"custom": {
"property-name": "value"
}
}
}
在幕後，WordPress 將處理此定義，並使用雙連字元生成 CSS 自定義屬性：
--wp--custom--<custom-element>
--wp--custom-- 將始終是 CSS 屬性的一部分，而且不會使用駝峰大小寫。例如，如果您將 lineHeight 定義為自定義屬性，WordPress 將把它變成 kebab case：
--wp--custom--line-height
在命名約定方面，您可以根據自己的意願使用駝峰大小寫，不過我們建議您在自定義屬性名稱中使用烤肉串大小寫。這符合 WordPress 的命名規則，提高了可讀性，並減少了處理錯誤。
注：CSS 自定義屬性使用雙連字元，因為 W3C 的 CSS 工作組也希望鼓勵您使用 Sass（使用美元符號定義屬性）。這樣，您就可以同時使用這兩種方法來增強您的設計。
WordPress 已經定義了一些自定義屬性–或者至少，主題可以選擇這樣做。這意味著你將在 theme.json 中看到 CSS 變數，而無需明確宣告：
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}
在本例中，我們使用現有的預設顏色定義了一種主色調。然後，我們定義了一些自定義間距屬性，並使用 var() 進行設定。
這意味著我們無需在 theme.json 中硬性編碼數值。更重要的是，使用者可以在站點編輯器中更新這些值，並將它們傳播到整個主題中。
預設與自定義屬性
當然，theme.json 還可以讓你定義顏色、字型大小和其他常用主題元素的預設值。另一方面，你也可以使用自定義屬性來定義你想在整個主題中重複使用的任何值。
這裡最大的區別在於命名規則和可訪問性。如果您不做進一步的工作，使用者將無法在網站編輯器中訪問自定義屬性。有了預設，WordPress 將生成與處理自定義屬性相似的 CSS：
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}
一旦 WordPress 對其進行處理，您就可以看到內在的差異：
--wp--preset--primary: #007bff; --wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"; --wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";
請注意，即使將駝峰大小寫轉換為克巴大小寫後，進一步的屬性巢狀也將使用雙連字元。
全域性和特定區塊 CSS 與 CSS 自定義屬性
在傳統的 WordPress 中，您會在前端使用額外的自定義 CSS來設計主題中的元素。現在，theme.json 和 FSE 依然如此，只是使用方法與 CSS 自定義屬性不同。
如果訪問網站編輯器並進入樣式介面，你會發現額外 CSS 部分。它的作用與傳統 WordPress 安裝中的自定義 CSS 面板非常相似：
WordPress 網站編輯器中的額外 CSS 部分
這是一種為主題新增全域性 CSS 定製的方法。不過，它實際上是一種為使用者提供新增 CSS 功能的方法。你也可以用它來做一些不需要整個樣式表的小改動。
在 theme.json 中，你可以使用 css 屬性來定義想要新增的 CSS：
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}
請注意，CSS 語句的結尾不需要使用分號。您也可以為區塊設定自定義 CSS：
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}
只要你在 theme.json 中設定了這樣的 CSS，你就會在任何站點編輯器的額外 CSS 欄位中看到它。不過請記住，使用 CSS 宣告的任何內容都不是 CSS 自定義屬性。
使用雙引號 (&) 選擇器
與 Sass 類似，WordPress 也支援雙引號選擇器，但有一些不同之處。在這種情況下，這是一種針對巢狀元素和屬性的好方法。如果你選擇為單個區塊宣告 CSS 自定義屬性，這一點就很重要。
例如：
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…
這就為表頭元素定義了文字顏色和背景顏色。一旦 WordPress 對其進行處理，就會得到乾淨、純粹的 CSS：
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}
如果您希望擴充套件目標 CSS，那麼雙引號選擇器就是您的絕佳選擇。我們可以這樣理解選擇符：它有助於將 CSS 元素分開。以下面的例子為例：
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}
這將為頭像新增一個邊框半徑，並按照你的預期輸出 CSS：
.wp-block-image img {
border-radius: 999px;
}
但是，如果沒有 amppersand，WordPress 就會將您的宣告連在一起：
… .wp-block-imageimg …
在 CSS 自定義屬性中使用 amppersand 選擇器將是你經常做的事情。
小結
正如 theme.json 是建立靈活、可維護的 WordPress 主題的強大配置檔案一樣，CSS 自定義屬性對工作流程也至關重要。這是您為網站編輯器無法觸及的元素構建和宣告 CSS 的方式。如果您要建立自己的塊，或者只是想開發具有終極定製深度的獨特 WordPress 主題，它也是關鍵所在。此外，您還可以選擇通過網站編輯器與使用者共享 CSS。
CSS 自定義屬性是否會成為你的主題開發工作流程的一部分？如果是，您將如何使用它們？請在下面的評論區分享您的見解！
評論留言