如何修改 WordPress 塊主題（JSON 初學者指南）

已發表: 2023-06-28

隨著 WordPress 站點編輯器（又名全站點編輯）和塊主題的出現，WordPress 用戶必須考慮如何修改其網站和主題的方式發生了巨大變化。

如今，塊主題有了一個新的中央文件，而不是style.css和functions.php ： theme.json 。 另外，您需要熟悉一種新型標記才能對其進行更改，而不是 CSS 和 PHP。 它的名字是 JSON。

雖然這聽起來可能很可怕，但好消息是 JSON 實際上非常容易理解。 只要有一點技術理解和毅力，理解並開始自己更改主題並不難。

為了幫助您更快地實現這一點，這篇文章是 JSON 以及如何在 WordPress 中使用它的絕對初學者指南。 特別是，我們將介紹 JSON 到底是什麼、 theme.json文件在 WordPress 塊主題中實現哪些功能，以及如何使用它來修改主題。

深吸一口氣，保持開放的心態，一切都會好起來的，我保證。

什麼是 JSON？

自定義 WordPress 塊主題 json 初學者指南

讓我們從房間裡的大像開始。 當我們說 JSON 時，我們到底在談論什麼？

您以前可能聽說過它，特別是與 WordPress JSON REST API 相關的內容。 JSON 是JavaScript Object Notation的縮寫，是一種輕量級數據交換格式。 這意味著，它是在不同系統、應用程序或平台之間表示、存儲和交換數據的一種方式。

還有其他此類格式，例如 XML 或 CSV。 然而，JSON 的特別之處以及它近年來如此流行的原因在於它不僅易於機器解析和生成，而且易於人類閱讀和編寫。 下面詳細介紹一下。

儘管 JSON 起源於 JavaScript，但它已成為一種獨立於語言的格式。 現在，大多數編程語言都具有用於解析和生成 JSON 數據的內置支持或庫。 這也是它廣泛應用於 Web 應用程序和 API 中進行數據傳輸的原因之一。

基本 JSON 語法

正如前面提到的，JSON 實際上非常簡單。 它基本上以鍵值對的形式顯示數據，這意味著它為您提供某個內容的名稱並顯示它具有的值，例如"color": "#ffffff" 。 如果您曾經使用過 CSS，這種類型的格式應該看起來非常熟悉。

除此之外，JSON 標記還具有以下功能：

  • 鍵是字符串，表示單詞，值可以是字符串、數字、布爾值（true 或 false）、null、數組（表示值列表）或其他 JSON 對象。
  • JSON 對象由大括號（“{}”）分隔，而數組則使用方括號（“[]”）。
  • 鍵和字符串值用雙引號括起來。
  • 數據格式嚴格，任何偏離標準語法的行為都會導致解析錯誤。

已經感到失落了嗎？ 讓我們看一個例子以使事情更清楚：

 { "version": 2, "settings": { "color": { "palette": [ { "color": "#ffffff", "name": "Base", "slug": "base" }, { "color": "#000000", "name": "Contrast", "slug": "contrast" }, ], }, "styles": { "color": { "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--contrast)" }, } }

上面首先定義了文件的版本。 它分為settings和styles部分，這兩個部分都定義了某些顏色。 在settings部分，顏色被分配給子類別palette ，並顯示為包含多種顏色以及名為name和slug的值的數組。

styles段定義兩種顏色，一種用於background ，一種用於text 。 兩者都僅指定為變量。 您可以看到上面提到的所有格式都適用，以及如何輕鬆理解哪些鍵和值屬於同一組。

這是可以理解的嗎？ 因為確實如此，好消息是上面的示例直接取自 WordPress。 因此，如果您覺得這並非不可能理解，那麼您就可以開始使用 JSON 來修改 WordPress 塊主題了。

什麼是 WordPress theme.json 文件？

自從引入全站點編輯/站點編輯器和塊主題以來，WordPress 平台正在發生技術轉變。 它越來越依賴 JavaScript 和 JSON 來完成工作，而不是 CSS 和 PHP。

最好的例子是theme.json 。 它是塊主題的配置文件，有助於管理全局樣式和設置。 它允許主題開發人員為整個站點和主題中的單個塊定義默認樣式、選項和配置。

主題目錄中的 theme.json 文件

這樣， theme.json就可以更改主題的外觀以及用戶可以進行自己的更改的選項。 這為您提供了一種構建和修改塊主題的單一集中方法，特別是因為您在此處配置的任何內容都適用於站點的前端和後端的 WordPress 編輯器。 此外，WordPress 將讀取文件中的標記並為您創建必要的 CSS 樣式。

以前，編輯器和網站前端使用不同的樣式表，您必須單獨維護。 此外，主題開發人員以不同的方式提供設置，即使在使用 WordPress 定制器時也是如此。

現在，通過新的統一方法，用戶將獲得更加一致的體驗。

當然，正如文件結尾所示， theme.json是用 JSON 編寫的。 因此，如果您想學習使用它並阻止主題，您需要熟悉它所寫入的標記。這就是我們在本文的其餘部分中要做的事情。

theme.json 的結構如何

theme.json文件包含三個主要部分：設置、樣式和自定義模板/模板部分。 以下是您在每個部分中可以控制的內容：

  • 設置— 包含全局樣式，即可用的調色板、字體系列和大小以及其他文本選項、主題寬度、間距和邊框。 基本上，是改變主題外觀的基本控件。 它還可以對單個塊執行相同的操作，並且您可以設置自定義 CSS 變量。
  • 樣式- 在這裡，您定義主題的默認樣式，這意味著它應該用於上述許多選項的默認值。 例如，您可以設置主題背景顏色以及用於標題和正文的字體系列。 同樣，對於單個塊也是可能的。 這基本上就是style.css過去所做的事情。
  • 自定義模板和模板部分— 您可以在其中定義主題中可用的頁面模板和模板部分，並將主題指向隨附的 HTML 文件。

使用 JSON 自定義 WordPress 塊主題

為了讓您更好地了解這與修改 WordPress 塊主題有何關係，讓我們看一些實際示例。

加載本地自定義字體以更改主題排版

我們要做的第一件事是加載服務器上的一些字體文件，為您的主題引入不同類型的排版。 我們有一篇關於該主題的詳細文章，如果您想查看更多詳細信息，這裡有一個稍微簡短的版本。

該選項位於theme.json中的settings > typography下，然後位於fontFamilies下。

 { "version": 2, "settings": { "typography": { "fontFamilies": { } } } }

在塊主題中，您可以使用以下值添加新字體：

  • fontFamily — 這是新字體的名稱，它將出現在 CSS 標記中。 它可以包含後備字體。
  • name — 將出現在 WordPress 編輯器中的字體名稱。
  • slug — WordPress 用於創建自定義 CSS 屬性的唯一標識符。
  • fontFace — 這對應於 CSS @font-face規則。 這是真正將字體排入隊列的部分。

為了工作， fontFace需要包含其他幾條信息：

  • fontFamily — 再次是字體的名稱。
  • fontWeight — 由空格分隔的可用字體粗細的列表。
  • fontStyle (可選) — 您可以在此處設置font-style屬性，例如normal或italic 。
  • fontStretch （可選）- 例如，對於具有壓縮版本的字體系列。
  • src — 本地字體文件的路徑。

下面是一個示例：

 { "version": 2, "settings": { "typography": { "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v20-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v20-latin-italic.woff" ] } ] } ] } } }

請注意，您可以在fontFace中包含多個字體文件，例如加載不同的樣式。 如前所述，您需要用大括號和逗號將它們分開。

要在不手動更改標記的情況下將本地 Google 字體添加到主題中，您還可以使用創建塊主題插件。

使用創建塊主題插件配置主題字體

修改懸停和焦點樣式

接下來，我們要討論如何修改 WordPress 塊主題中鏈接和按鈕等元素的懸停和焦點樣式。 請注意，在撰寫本文時，WordPress Core 中尚未包含此功能。 如果您想利用它，您需要安裝古騰堡插件，以便您可以使用最新的改進和功能。

要更改懸停和焦點樣式，可以使用偽元素:hover 、 :focus 、 :active ，以及用於outline屬性的:visited 。 此設置位於styles > elements > link下的themes.json中，或者位於button下。

 { "version": 2, "styles": { "elements": { "button": { }, "link": { } } } }

以下是定義鏈接樣式的方法：

 "styles": { "elements": { "link": { ":hover": { "typography": { "textDecoration": "none" } }, ":focus": { "outline": { "width": "2px", "color": "#111", "style": "solid" } }, ":active": { "color": { "text": "var(--wp--preset--color--secondary)" }, "typography": { "textDecoration": "none" } } } } }

上面的標記執行以下操作：

  • 它規定，當有人用鼠標光標懸停一段時間時，鏈接不應帶有下劃線。
  • 在focus狀態下，它添加一個兩個像素寬的實心輪廓，顏色代碼為#111111 。
  • 當激活時，鏈接文本呈現由 CSS 變量定義的顏色，並且再次設置為沒有text-decoration值。

修改塊主題顏色

在此示例中，我們想要引入自定義調色板，並禁用用戶創建自己的顏色選項的選項。 例如，您可以這樣做，以確保您網站上的每個人都只能使用經過批准的品牌顏色，而不能在您的網站設計中引入其他內容。 我們還將介紹如何向特定塊或元素添加顏色，以便您可以預先確定它們的外觀。

了解標準 WordPress 顏色設置

WordPress 站點編輯器默認顏色選項

為此，您首先需要了解古騰堡默認情況下可用的調色板。 這些都是：

  • WordPress 默認調色板— 這始終可用。 它提供的顏色即使在主題切換時也會流行。 這就是為什麼它們被用於塊模式。
  • 主題調色板- 隨主題一起提供，並根據您使用的主題進行自定義。
  • 用戶調色板- 用戶通過可用的顏色選擇器添加的顏色。 您可以在Colors > Palette下的全局樣式中定義它們。

當訪問任何塊或全局樣式的顏色選項時，始終會出現其中的一個或多個。

消除顏色選項

我們首先隱藏默認的調色板和漸變。 您可以在settings和color下執行此操作，如下所示：

 { "version": 2, "settings": { "color": { "defaultPalette": false, "defaultGradients": false } } }

與許多其他選項一樣，也可以對單個塊執行此操作。 例如，這裡是標題塊：

 { "version": 2, "settings": { "blocks": { "core/heading": { "color": { "defaultPalette": false } } } } }

此外，您可以禁用自定義顏色選擇器，以便網站用戶不會嘗試創建和使用自己的顏色。

 { "version": 2, "settings": { "color": { "custom": false, "customGradient": false, "defaultPalette": false, "defaultGradients": false } } }

如果您輸入上述標記，則除主題顏色外，所有常用顏色選項將不可用。

網站編輯器中減少了顏色選項

添加自定義調色板

接下來，我們要添加我們自己的調色板。 我們在theme.json中的同一位置執行此操作，方法是添加palette鍵，然後添加一個數組，其中包含要包含的每種顏色的 slug、顏色和名稱。

 { "version": 2, "settings": { "color": { "palette": [ { "color": "#1B1031", "name": "Base", "slug": "base" }, { "color": "#FFFFFF", "name": "Contrast", "slug": "contrast" }, { "color": "#FF746D", "name": "Primary", "slug": "primary" }, { "color": "#551C5E", "name": "Secondary", "slug": "secondary" }, { "color": "#FB326B", "name": "Tertiary", "slug": "tertiary" } ] } } }

有了theme.json中的這個內容，您將在後端找到您自己的顏色選項（在這種情況下，也適用於您的網站）。

自定義調色板處於活動狀態

您也可以對漸變和雙色調執行相同的操作。 在幾乎所有情況下，您都可以使用幾乎任何 CSS 顏色聲明。 十六進制、RGB/A、顏色名稱，無論您想要什麼，甚至 CSS 變量。 只有雙色調嚴格採用 Hex 和 RGB 顏色值。

此外，可以對單個塊執行相同的操作（確保名稱和塊與站點範圍設置中的名稱和塊不同）：

 { "version": 2, "settings": { "color": { "blocks": { "core/paragraph": { "color": { "palette": [ { "color": "#1B1031", "name": "Block base", "slug": "block-base" }, { "color": "#FFFFFF", "name": "Block contrast", "slug": "block-contrast" }, { "color": "#FF746D", "name": "Block primary", "slug": "block-primary" } ] } } } } } }

設置默認顏色

最後，讓我們介紹如何設置塊和頁面元素的默認顏色。 以下是更改引用塊的背景和文本顏色的方法：

 { "version": 2, "styles": { "blocks": { "core/quote": { "color": { "background": "#222", "text": "#fff" } } } } }

如您所見，設置默認顏色發生在styles部分下。 在這裡，我們的目標是blocks下的core/quote塊並定義背景和文本顏色。 這是它最終在頁面上的樣子：

頁面上的自定義引用塊樣式

順便說一句，如果您想了解可以在theme.json中修改哪些其他設置，請參閱開發人員手冊。

引入額外的主題樣式

站點編輯器的最佳功能之一是它提供樣式變化。 這些允許 WordPress 用戶只需單擊一個按鈕即可完全修改其主題的外觀（顏色、字體、塊樣式）。

樣式變化已啟用並在預覽中可見

《二十二十三》帶著一大堆。

如何在主題中實現這一點？ 很簡單，通過包含額外的theme.json文件即可。

二二十三風格變體文件

一些注意事項：

  • 為了讓 WordPress 獲取附加文件，您需要將它們放在主題文件夾內名為styles的目錄中。
  • 除了主文件之外，還會加載額外的文件並覆蓋包含的樣式。 這意味著，您只需包含您真正想要更改的內容的標記。 這與兒童主題類似。
  • 您可以隨意命名新文件，只要它們以.json結尾即可。 站點編輯器將自動使用文件名（不帶擴展名）作為後端的顯示名稱。 但是，您還可以通過在文件頂部添加"title": "[your preferred name]"包含自定義名稱。

例如，以下是《二十二十三》附帶的一種風格變體的（縮短的）內容：

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "title": "Canary", "settings": { "color": { "duotone": [ { ... } ], "palette": [ ... ] }, "layout": { "wideSize": "650px" }, "typography": { "fontSizes": [ ... ] } }, "styles": { "blocks": { ... }, "elements": { "button": { ... }, "h1": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "h2": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "h3": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "h4": { "typography": { "fontSize": "var(--wp--preset--font-size--small)" } }, "heading": { "typography": { "fontWeight": "700" } }, "link": { "typography": { "textDecoration": "none" } } }, "typography": { "fontFamily": "var(--wp--preset--font-family--ibm-plex-mono)", "fontSize": "var(--wp--preset--font-size--small)" } } }

這是“Canary”主題樣式的theme.json 。 如您所見，它引入了新的雙色調和調色板，調整佈局寬度並調整字體大小。 它還調整多個塊和元素（如按鈕、標題和鏈接）的樣式。 最後，它還更改了總體主題字體大小。

所有這些都足以大幅調整主題外觀：

二二十三金絲雀風格變奏

同時，主題變體文件通過大約 250 行標記完成所有這些工作，而《二十二十三》的原始theme.json長度超過 700 行。

順便說一句，創建主題變體的另一個選項是使用前面提到的創建塊主題插件。 它可以將您當前修改的設計導出為在其他網站上使用的變體。

使用創建塊主題插件創建風格變化

更改單個塊的樣式

我們已經在上面展示瞭如何更改單個塊。 在這裡正式提一下，您可以修改settings和styles中的單個塊，每個塊都在blocks下。

 { "version": 2, "styles": { "blocks": { "core/paragraph": { "typography": { "letterSpacing": "-0.019rem" "textTransform": "uppercase" } } } } }

下面是上面的標記的實際效果：

頁面上可見的自定義段落樣式

可以通過core/blockname來定位塊，例如段落塊的core/paragraph 。 您可以在此處找到所有核心塊的名稱。

添加模板部件和模板

關於通過theme.json修改塊主題，我們要討論的最後一件事是添加模板和模板部分的能力。 單擊左上角的 WordPress 徽標時，您可以在站點編輯器中找到這些選項。

在 WordPress 站點編輯器中訪問模板部分和頁面模板

當然，為了顯示在主題中，您需要在某處註冊它們，這是theme.json中發生的另一件事。 確切的位置位於templateParts和customTemplates下。 它們放置在文件的基礎級別，含義與version相同。

 { "version": 2, "customTemplates": [ { "name": "blog-alternative", "postTypes": [ "page" ], "title": "Blog (Alternative)" }, { "name": "404", "postTypes": [ "page" ], "title": "404" } ], "templateParts": [ { "area": "header", "name": "header", "title": "Header" }, { "area": "footer", "name": "footer", "title": "Footer" }, { "area": "uncategorized", "name": "comments", "title": "Comments" } ] }

templateParts下的每個條目都包含三個鍵：

  • name — 這是此模板部分的文件的名稱/slug，例如，如果您輸入“small-header”，則您的文件必須命名為small-header.html 。
  • area - 這很重要，以便站點編輯器知道將每個部分分配到哪裡。 templateParts知道三個區域： header 、 footer和uncategorized 。 如果您不指定前兩者中的任何一個，模板部分將默認為後者。
  • title - 這是編輯器中可見的模板部分的名稱，確保它具有描述性。

customTemplates下的對像也具有三個屬性：

  • name — 與templateParts相同。 需要與關聯的 HTML 文件的名稱相對應。
  • title — 也與上面相同，出現在編輯器中。
  • postTypes — 此自定義模板支持的一系列帖子類型，例如post或page 。

自定義模板和模板零件文件需要分別放置在主題目錄中的templates和parts文件夾中。 您需要根據塊標記構建它們，您也可以通過在可視化編輯器中創建它們並導出它們來完成。 更多相關信息請點擊此處。

WordPress theme.json 生成器

塊主題生成器示例

如果您想創建自己的theme.json ，下面是一些有用的工具，可以使該過程更快。 它們允許您簡單地從可視用戶界面中選擇設置和样式，然後下載或複制相應的theme.json文件到您的主題。

  • ThemeGen 塊主題生成器
  • WPTurbo theme.json 生成器

資源

有關 JSON 以及如何在 WordPress 塊主題中使用它的更多信息，請查看以下資源：

  • Mozilla 開發者網絡：使用 JSON
  • JSON.org
  • 全站編輯
  • 塊編輯器手冊

準備好使用 JSON 修改 WordPress 塊主題了嗎？

修改塊主題與使用經典主題有很大不同。 許多工作不是在functions.php和style.css中進行，而是在theme.json和HTML 文件中進行。

一開始這可能有點令人生畏，特別是如果您不熟悉 JSON。 然而，正如您可能在上面看到的，標記非常容易理解和習慣。 它還提供了一種強大的方法來徹底改變主題的外觀和行為。

希望通過上面的示例，您感覺自己有能力實現其中的一些示例。

您之前是否通過 JSON 標記修改過 WordPress 主題？ 歡迎在評論中分享您的經驗！