釋放 theme.json 的威力：像專業(yè)人士一樣定制 WordPress 主題

發(fā)布于：
更新時(shí)間：2024-08-29

theme.json 是WordPress全站編輯主題中很重要的文件，他定義了主題的樣式和功能，本文對(duì)theme.json 做了詳細(xì)介紹。

隨著 WordPress 生態(tài)系統(tǒng)的不斷發(fā)展，WordPress 開發(fā)人員擁有了比以往更多的控制權(quán)。全站編輯（FSE）為所有用戶提供了從頭開始創(chuàng)建主題的機(jī)會(huì)，尤其是在使用theme.json文件時(shí)。

開發(fā)人員也可以充分利用theme.json文件，無需使用更復(fù)雜的編程語言進(jìn)行繁瑣復(fù)雜的操作，就可以對(duì) WordPress 主題進(jìn)行細(xì)粒度定制。

在這個(gè)教程中，我們將探討theme.json文件的作用，包括它與完整網(wǎng)站編輯的關(guān)系。到最后，無論你的開發(fā)能力如何，你都會(huì)明白如何利用它的功能來創(chuàng)建現(xiàn)代化、高性能的網(wǎng)站。

介紹 theme.json 文件

theme.json文件的核心是一個(gè)配置文件，它定義了 WordPress 主題的設(shè)置和樣式。它使用 JavaScript Object Notation (JSON) 這種結(jié)構(gòu)化數(shù)據(jù)，其鍵值對(duì)的方式方便我們編寫代碼。

theme.json文件是控制主題各個(gè)方面的關(guān)鍵，包括調(diào)色板、排版設(shè)置、布局選項(xiàng)、每個(gè)區(qū)塊的樣式、自定義 CSS 屬性等等。我們將在本文中詳細(xì)介紹這些方面。

雖然這些變化并聽起來沒有什么革命性的改進(jìn)，但theme.json對(duì) WordPress 開發(fā)的未來非常重要，我們會(huì)在下一節(jié)解釋原因。

為什么theme.json 與 WordPress 主題開發(fā)相關(guān)？

WordPress開發(fā)主題和創(chuàng)建插件的典型方法通常圍繞使用 PHP 編輯模板文件、使用 functions.php 文件以及其他技術(shù)任務(wù)。

theme.json文件標(biāo)志著一個(gè)重大轉(zhuǎn)變，尤其是在開發(fā)主題方面。原因有以下幾點(diǎn)：

  • 該文件是定義主題設(shè)置和樣式的單一、有序的位置。這減少了對(duì)分散在各處的 CSS 和 PHP 文件的需求。
  • 在theme.json中集中聲明樣式和設(shè)置意味著 WordPress 可以生成更有效的 CSS。與使用jQuery 等框架相比，這有助于提高WordPress性能。
  • 您對(duì)網(wǎng)站和單個(gè)區(qū)塊的樣式控制比以往任何時(shí)候都要多，這使得非專業(yè)開發(fā)者用戶也能進(jìn)行主題開發(fā)。
  • 隨著 FSE 的不斷發(fā)展，theme.json文件將對(duì)主題、全局樣式和區(qū)塊編輯器的交互方式起到至關(guān)重要的作用。

將所有這些方面結(jié)合起來，就能以標(biāo)準(zhǔn)化的方式為主題定義設(shè)置和樣式。對(duì)于希望了解和使用不同主題的人來說，使用theme.json將使您創(chuàng)建的 WordPress 主題更加強(qiáng)大、靈活、對(duì)用戶更友好。更重要的是，這些創(chuàng)建將與平臺(tái)的未來方向保持一致。

在哪里可以找到 theme.json 文件

首先，在 “傳統(tǒng) “或 “經(jīng)典 “主題中找不到theme.json文件。要找到并使用這個(gè)文件，你需要一個(gè)專用的區(qū)塊主題。盡管如此，只要運(yùn)行的是 WordPress 5.8 或更高版本，您可以在任何主題中創(chuàng)建該文件。

theme.json文件的典型位置是wp-content/themes/[你的主題]。如果文件不在那里，你應(yīng)該打開你最喜歡的編碼編輯器，根據(jù)需要?jiǎng)?chuàng)建文件。先別管文件內(nèi)容，我們很快就會(huì)講到。

如果你需要從頭開始創(chuàng)建一個(gè)新文件，但又想在定制自己的文件前了解其中的復(fù)雜內(nèi)容，請(qǐng)查看默認(rèn)的 “Twenty Twenty- Four “主題。

作為一個(gè)區(qū)塊主題，該主題中會(huì)包含一個(gè)theme.json文件。在接下來的幾節(jié)中，我們將查看該文件的結(jié)構(gòu)。

使用 theme.json 所需的基本技能

當(dāng)然，并不是每個(gè)人都能打開配置文件并開始工作，你仍然需要一些基本技能和知識(shí)來構(gòu)建和定制主題：

  • 基本的 JSON 知識(shí)：我們認(rèn)為您可以快速掌握這些知識(shí)，熟悉 JSON 語法和結(jié)構(gòu)對(duì)閱讀和編輯該文件至關(guān)重要。
  • 了解 CSS：您會(huì)發(fā)現(xiàn)，許多theme.json對(duì)象和屬性都與 CSS 對(duì)應(yīng)。掌握 CSS 技能在這里將大有裨益。
  • WordPress 區(qū)塊編輯器知識(shí)：了解區(qū)塊是如何工作的，以及它們的自定義選項(xiàng)，將對(duì)您的構(gòu)建工作有所幫助。

雖然這并不是絕對(duì)必要的，但我們鼓勵(lì)你至少了解 FSE 的關(guān)鍵概念，這將有助于你以更有效的方式利用theme.json文件。您還可以了解您的編輯將如何影響最終用戶的 “修改”。此外，在某些情況下，您仍然需要使用HTML和JavaScript來實(shí)現(xiàn)您的愿景。

最后，我們向您推薦幾項(xiàng)技術(shù) “附加功能”：

  • 代碼編輯器。選擇一個(gè)能提供 JSON 語法高亮顯示和驗(yàn)證功能的高質(zhì)量編輯器，將使您的工作流程更加輕松愉快。
  • 本地開發(fā)環(huán)境。使用 DevKinsta 或 Local 工具對(duì)主題進(jìn)行開發(fā)，可以讓您快速試驗(yàn)和測(cè)試更改，而不會(huì)影響實(shí)時(shí)網(wǎng)站。

有了這些工具和知識(shí)，您就可以開始使用theme.json 自定義 WordPress 主題了。

了解 theme.json 的內(nèi)容和層次結(jié)構(gòu)

顯然，theme.json 文件有一個(gè)你需要了解的結(jié)構(gòu)。它還有一個(gè)層次結(jié)構(gòu)，以及一些需要進(jìn)一步解釋的獨(dú)特元素。

這可能是使用配置文件最復(fù)雜的部分，但即便如此，你也能輕松掌握其中的概念。

讓我們先從結(jié)構(gòu)開始，然后再了解theme.json 的其他元素。

基本結(jié)構(gòu)

鑒于該文件遵循 JSON 格式，你可能已經(jīng)了解了該結(jié)構(gòu)的一般概念。首先，整個(gè)文件對(duì)象都用大括號(hào)包起來，文件中的其他對(duì)象也是如此。每個(gè)對(duì)象都由鍵值對(duì)組成，鍵值使用單引號(hào)或雙引號(hào)，行尾使用逗號(hào)。

一個(gè)theme.json文件至少需要version、settings和styles這三個(gè)對(duì)象：

{
    "version": 2,
    "settings": {
      // Global settings go here
    },
    "styles": {
      // Global styles go here
    }
}

設(shè)置和樣式對(duì)象很簡(jiǎn)單，但版本需要更多解釋。這個(gè)值將是一個(gè)整數(shù)，與你用來讀取文件的 API 版本相匹配。當(dāng)前的 API 版本是3，盡管2版本也很常見，但你可以從舊版本遷移過來。

大多數(shù)theme.json文件結(jié)構(gòu)還包括一個(gè)架構(gòu)。簡(jiǎn)而言之，它可以讓你在代碼編輯器中使用自動(dòng)完成功能，并為文件提供驗(yàn)證。你可以在文件頂部添加以下內(nèi)容：

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
    },
    "styles": {
    }
}

從這里開始，你將在設(shè)置和樣式中添加各種屬性和對(duì)象，以構(gòu)建你的文件。

層次結(jié)構(gòu)

theme.json文件遵循層次結(jié)構(gòu)，只是網(wǎng)站設(shè)置和樣式整體層次結(jié)構(gòu)中的一個(gè)級(jí)別。如果你有CSS 知識(shí)，理解起來會(huì)更容易，因?yàn)樵撐募膹?fù)雜程度與 CSS 類似。

簡(jiǎn)而言之，您對(duì)theme.json所做的定制不一定會(huì)顯示在網(wǎng)站前端。用戶配置優(yōu)先于一切。這意味著在 WordPress 的 外觀>編輯器屏幕上進(jìn)行的任何更改都可能會(huì)覆蓋theme.json中的設(shè)置而顯示在前端：

如果您使用子主題并包含一個(gè)theme.json文件，那么它將覆蓋除網(wǎng)站編輯器之外的所有更改。同樣，你在父主題配置文件中定義的任何內(nèi)容都將覆蓋 WordPress 的默認(rèn)設(shè)置和樣式。雖然 WordPress 也有自己的theme.json文件，但我們?cè)谶@篇文章中重點(diǎn)討論的就是這個(gè)文件。

雖然這不是這篇文章的重點(diǎn)，但你也可以使用鉤子和過濾器來覆蓋設(shè)置值。這些動(dòng)態(tài)過濾器可以讓你創(chuàng)建的插件或主題改變主題、平臺(tái)設(shè)置和樣式。

區(qū)塊語法

如果你進(jìn)入 WordPress 區(qū)塊或站點(diǎn)編輯器，打開一篇文章或一個(gè)頁面，然后切換代碼編輯器，你會(huì)發(fā)現(xiàn)內(nèi)容中有很多看起來像 HTML 注釋的東西：

這是因?yàn)閰^(qū)塊主題不是使用 PHP 文件，而是使用 HTML 文件以及注釋和區(qū)塊標(biāo)記來創(chuàng)建網(wǎng)站。這些元素的組合產(chǎn)生了您在編寫theme.json文件時(shí)需要的 “區(qū)塊語法”。

對(duì)于包含內(nèi)容的區(qū)塊，例如段落區(qū)塊，你需要對(duì)內(nèi)容進(jìn)行包裝：

<!-- wp:paragraph -->
    <p>Content goes here!</p>
<!-- /wp:paragraph -->

在其他情況下，你只需要單行注釋或自動(dòng)關(guān)閉的注釋。對(duì)于某些區(qū)塊，你可以組合類型來創(chuàng)建你的布局和設(shè)計(jì)。你也可以嵌套這些注釋：

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
    

    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

在這里，我們使用封裝注釋創(chuàng)建了一個(gè) Columns 區(qū)塊。在其中，我們可以開始添加 HTML 以設(shè)計(jì)這些列，并包含各個(gè)列的包裝器。這在前端是很簡(jiǎn)單，因?yàn)槟憬?jīng)常會(huì)把區(qū)塊放在彼此的內(nèi)部。

要查找特定區(qū)塊的標(biāo)記，可以在《區(qū)塊編輯器手冊(cè)》中查找。不過，最簡(jiǎn)單的方法是將區(qū)塊添加到 WordPress，打開代碼編輯器，然后從那里復(fù)制標(biāo)記。

至于如何修改標(biāo)記，我們將在后面的章節(jié)中介紹。

如何將 theme.json 和 WordPress 全站編輯結(jié)合起來

通過對(duì)層次結(jié)構(gòu)的討論，你會(huì)明白theme.json是 FSE 的重要組成部分。兩者共同為 WordPress 提供全面的主題解決方案。例如，全局樣式界面本質(zhì)上就是theme.json設(shè)置的可視化呈現(xiàn)。

您可以在全局樣式面板或配置文件中修改設(shè)置，WordPress 會(huì)根據(jù)需要更新相應(yīng)的值。雖然網(wǎng)站編輯器設(shè)置優(yōu)先，但主題.json將作為主題自身樣式的基礎(chǔ)。對(duì)于最終用戶來說，全局樣式可以讓他們用自己的定制替換默認(rèn)值，而無需代碼或編輯theme.json文件。

此外，在theme.json文件中定義的 CSS 自定義屬性在全局樣式界面中也可用。這樣，用戶就可以利用這些屬性在整個(gè)網(wǎng)站上創(chuàng)建更一致的樣式。此外，您還可以定義特定的區(qū)塊樣式和設(shè)置，并在WordPress 面板上對(duì)其進(jìn)行進(jìn)一步調(diào)整。

簡(jiǎn)而言之，theme.json提供了對(duì)設(shè)置、樣式等更細(xì)粒度的控制。與傳統(tǒng)方法相比，它是一種開發(fā)人員級(jí)別的工具，能提供更直接、更簡(jiǎn)化的體驗(yàn)。相比之下，全局樣式界面讓每個(gè)人都有機(jī)會(huì)按照自己的喜好自定義主題。在進(jìn)一步開發(fā)主題的過程中，你會(huì)發(fā)現(xiàn)兩者是如何協(xié)同工作，幫助創(chuàng)建網(wǎng)站設(shè)計(jì)和布局的。

使用 theme.json 文件屬性

了解了基礎(chǔ)知識(shí)后，我們就可以開始使用theme.json 文件中的對(duì)象和屬性了。我們無法涵蓋所有的用例或可能性。不過，在本教程結(jié)束時(shí)，我們將能夠創(chuàng)建功能齊全、前端美觀的主題。

設(shè)置

settings屬性可讓你控制網(wǎng)站編輯器中提供的功能及其行為方式。這是一個(gè)頂級(jí)屬性，通常會(huì)有多級(jí)嵌套。

一旦我們了解了樣式及其變化，你就會(huì)發(fā)現(xiàn)這些選項(xiàng)之間有一些交叉，但這兩種類型在創(chuàng)建主題時(shí)都有作用。

你可以選擇一些可用的屬性：

{
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "blocks": {},
        "border": {},
        "color": {},
        "custom": {},
        "dimensions": {},
        "layout": {},
        "position": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "useRootPaddingAwareAlignments": false
    }
}

官方的《WordPress 主題開發(fā)者手冊(cè)》包含所有這些設(shè)置（和樣式）的參考資料。不過，以下是幾個(gè)需要進(jìn)一步說明的重要屬性的簡(jiǎn)要概述：

  • appearanceTools：這個(gè)萬能屬性可以啟用許多其他屬性，旨在節(jié)省時(shí)間。它可以設(shè)置邊框選項(xiàng)、排版線高、填充、頁邊距等。
  • blocks：雖然你的大部分工作都將著眼于全局設(shè)置和樣式，但blocks屬性可以讓你在每個(gè)區(qū)塊的基礎(chǔ)上完成這些工作。我們不會(huì)在此詳細(xì)介紹這一概念，但《主題開發(fā)者手冊(cè)》中有關(guān)于theme.json 這方面的出色文檔。
  • custom：這個(gè)獨(dú)特的屬性沒有任何功能，它的作用由你決定。你可以用它為主題創(chuàng)建自定義 CSS 屬性，而且范圍很廣。
  • useRootPaddingAwareAlignments：同樣，這是一個(gè)復(fù)雜的屬性，我們不會(huì)全面介紹。它主要是幫助你放置主題的水平填充樣式，功能非常強(qiáng)大。如果你想讓全寬項(xiàng)目延伸到屏幕邊緣，同時(shí)在根元素上使用填充，就可以使用它。

請(qǐng)注意，你不需要在theme.json中添加任何你不想使用的屬性。例如，如果你不想使用appearanceTools，你可以直接將其省略，而不是定義為false。

如何在 theme.json 中定義設(shè)置

在定義設(shè)置時(shí)，每個(gè)屬性都有許多鍵值對(duì)子屬性。例如，你可以這樣創(chuàng)建調(diào)色板：

{
    "version": 3,
    "settings": {
        "color": {
          "palette": [
            {
              "color": "#0073aa",
              "name": "Primary",
              "slug": "primary"
            },
            {
              "color": "#23282d",
              "name": "Secondary",
              "slug": "secondary"
            }
          ],
…

其他屬性有簡(jiǎn)單的布爾值，可以在站點(diǎn)編輯器中打開或關(guān)閉這些功能：

{
    "version": 3,
    "settings": {
        "color": {
            "background": true,
            "defaultPalette": true,
            "link": true,
            "text": true
        }
    }
}

定義好設(shè)置后，就可以為它們引入樣式了?，F(xiàn)在讓我們來研究一下。

樣式和風(fēng)格變化

settings定義了某些樣式選項(xiàng)的訪問權(quán)限，而styles屬性則可以讓你為主題定義全局樣式。同樣，這是一個(gè)使用多層嵌套的頂級(jí)屬性。你可以針對(duì)特定元素、區(qū)塊，甚至使用自定義 CSS 屬性。

在這里定義主題樣式非常重要，這樣你就可以在網(wǎng)站編輯器中訪問和自定義它們。你可以使用許多元素：

{
    "version": 3,
    "styles": {
        "border": {},
        "color": {},
        "dimensions": {},
        "filter": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "css": {}
    }
}

不過，你不會(huì)經(jīng)常將其中的許多元素用作二級(jí)屬性。相反，有些屬性主要用于區(qū)塊或元素。例如

…
"styles": {
    "blocks": {
        "core/group": {
            "color": {
                "text": "#000000",
                "background": "#ffffff",
                "link": "#777777"
            }
…

對(duì)于全局樣式，你將在根目錄下工作–這與頁面的<body>標(biāo)簽相關(guān)。對(duì)于特定元素，可以采用與區(qū)塊類似的結(jié)構(gòu)，這次使用的是元素屬性：

…
"styles": {
    "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#aa3f33"
            }
…

如果你在網(wǎng)站編輯器中查看你所做的任何改動(dòng)，就會(huì)發(fā)現(xiàn)它們已經(jīng)就位。標(biāo)記也會(huì)為你創(chuàng)建的任何樣式生成 CSS：

請(qǐng)注意，您還可以為元素創(chuàng)建偽類樣式，如懸停和焦點(diǎn)樣式：

…
"elements": {
    "button": {
        "color": {
            "text": "#ffffff",
            "background": "#aa3f33"
        },
        ":hover": {
            "color": {
                "background": "#822f27"
            }
…

應(yīng)用樣式比這更深入，這也是使用theme.json 的一大優(yōu)點(diǎn)。

樣式變化

在我們繼續(xù)之前，你一定想了解一下樣式變化。你可以在 FSE 界面中看到這些不同的調(diào)色板和排版樣式：

不過，這些并不是你在theme.json 中編寫的代碼。相反，你需要?jiǎng)?chuàng)建該文件的其他版本，給它們一個(gè)唯一的名稱，并將它們存儲(chǔ)在主題的樣式目錄中：

請(qǐng)注意，標(biāo)記中的標(biāo)題對(duì)每個(gè)備選 JSON 文件都是唯一的。不過，這是一個(gè)可選字段，但我們建議您使用它，以獲得清晰度和最佳體驗(yàn)。

自定義模板和模板部件

與樣式變化一樣，theme.json也允許你注冊(cè)自定義模板和相關(guān)模板部分。注冊(cè)標(biāo)記非常簡(jiǎn)單：

"customTemplates": [
    {
        "name": "my-template",
        "title": "My Template",
        "postTypes": [
            "page",
            "post"
        ]
    }
]

customTemplates屬性需要定義三個(gè)元素：

  • name：這將對(duì)應(yīng)于你在主題模板目錄中創(chuàng)建的模板，如 /template/my-template.html。
  • title：這是模板名稱的可讀版本。
  • postTypes：在沒有定義的情況下，默認(rèn)為頁面，但你可以指定模板適用的文章類型數(shù)組。

用戶可以在網(wǎng)站或區(qū)塊編輯器中選擇您注冊(cè)的任何模板：

說到模板部件，您不需要注冊(cè)它們，但我們建議您這樣做，其結(jié)構(gòu)與注冊(cè)模板類似：

…
"templateParts": [
    {
        "area": "header",
        "name": "header",
        "title": "Header"
    },
…

在這里，名稱和標(biāo)題與完整模板的定義相同。區(qū)域與部件所屬的位置有關(guān)：默認(rèn)為頁眉、頁腳或未分類，但您可以將模板部件分配到任何自定義區(qū)域。

我們建議你也研究一下如何顯示這些模板部分，因?yàn)槿绻麤]有一些額外的編碼，它們是不會(huì)顯示出來的。即便如此，注冊(cè)它們也很簡(jiǎn)單。

模式

最后，讓我們來討論一下區(qū)塊模式。你可以在theme.json文件中使用一個(gè)頂級(jí)數(shù)組捆綁任意數(shù)量的模式。WordPress 模式庫中任何可用的模式都可以包含在你的文件中：

定義數(shù)組的方法很簡(jiǎn)單：使用patterns屬性和庫 URL 中相關(guān)模式的標(biāo)題：

有了這個(gè)標(biāo)題，我們就可以填充模式標(biāo)記了：

{
    "version": 3,
    "patterns": [
        "fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
    ]
}

您就可以在區(qū)塊編輯器模式目錄中選擇它們：

這種將模式庫資產(chǎn)引入主題的簡(jiǎn)單方法既方便又有價(jià)值。這也是theme.json文件迅速成為 WordPress 主題開發(fā)者最喜歡的構(gòu)建方式的另一個(gè)原因。

使用 theme.json 自定義 WordPress 網(wǎng)站的工作流程

了解了theme.json 的關(guān)鍵組件后，制定使用它的工作流程就是重要的一步。它代表了一種開發(fā)主題的新方法，因此需要以不同于傳統(tǒng)方法的方式來處理。

我們的方法是設(shè)置模式 URL，選擇 API 版本，并首先定義全局設(shè)置。這包括調(diào)色板、排版選項(xiàng)和布局設(shè)置。在大多數(shù)情況下，激活外觀工具也是有益的：

"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
   "settings": {
"appearanceTools": true,
     "color": {
       "palette": [
         {
           "name": "Primary",
"slug": "primary",
           "color": "#0073aa"
         },
         {
      "name": "Secondary",
        "slug": "secondary",
           "color": "#23282d"
         }
       ]
     },
     "typography": {
"fluid": true,
       "fontSizes": [
         {
           "size": "13px",
           "slug": "small",
           "name": "Small"
         },
         {
"size": "16px",
           "slug": "normal",
           "name": "Normal"
…

接下來，您可以使用定義的 slugs 創(chuàng)建自定義 CSS 屬性。例如，您可能創(chuàng)建了自定義字體權(quán)重：

…
"custom": {
    "fontWeight": {
        "light": 300,
        "regular": 400,
        "medium": 500,
        "bold": 700
    },
…

完成設(shè)置后，就可以指定樣式了。

…
"styles": {
    "color": {
        "background": "var(--wp--preset--color--base)",
        "text": "var(--wp--preset--color--main)"
    },
…

接下來是自定義區(qū)塊樣式，這可能占主題文件的很大一部分。

…
"styles": {
    "block": {
        "core/separator": {
            "color": {
            "text": "var(--wp--preset--color--main)"
            },
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
            }
        },
        "core/site-tagline": {
            "spacing": {
                "margin": {
                    "bottom": "20px"
                }
            },
            "typography": {
                "fontSize": "var(--wp--preset--font-size--small)"
            }
        },
        "core/site-title": {
            "typography": {
                "fontSize": "var(--wp--preset--font-size--medium)",
                "fontWeight": "var(--wp--custom--font-weight--semi-bold)",
                "lineHeight": "var(--wp--custom--line-height--none)"
        },
…

最后，你需要設(shè)計(jì)任何自定義模板和模板部件，并將它們注冊(cè)到theme.json文件中。這也是注冊(cè)任何你想使用的區(qū)塊模式的時(shí)候，如果有必要，還可以創(chuàng)建它們。

您應(yīng)該使用主題.json 還是 WordPress 全站編輯？

考慮到theme.json和全站編輯之間的交叉，您可能會(huì)問為什么要使用其中一個(gè)而不是另一個(gè)。事實(shí)上，兩者適用于不同的情況，應(yīng)該結(jié)合使用。

例如，在以下情況下，你可以使用theme.json：

  • 您開發(fā)主題并從頭開始創(chuàng)建新主題。
  • JSON 是一種你能理解并使用自如的語言。
  • 您希望使用編程方法為主題定義默認(rèn)樣式和設(shè)置。
  • 您想要實(shí)現(xiàn)的樣式和設(shè)置需要比網(wǎng)站編輯器中的默認(rèn)值更多的控制。

當(dāng)然，由于 FSE 幾乎完全照搬了theme.json的功能，因此最后一點(diǎn)會(huì)顯得比較小眾。因此，在以下情況下，全站編輯器對(duì)大多數(shù)用戶更有意義：

  • 您是一位想要定制現(xiàn)有主題的網(wǎng)站所有者。
  • 您不熟悉 JSON。
  • 可視化界面更適合您的定制和開發(fā)工作流程。
  • 您希望快速調(diào)整，而無需大量編碼。

實(shí)際上，主題需要一個(gè)配置文件來定義其基礎(chǔ)。在此基礎(chǔ)上，層次結(jié)構(gòu)將接管一切，網(wǎng)站所有者可以使用 FSE 進(jìn)行進(jìn)一步定制。

總結(jié)

theme.json配置文件是 WordPress 主題開發(fā)的革命性工具。它為您的主題設(shè)置和樣式提供了一個(gè)集中的主頁，使您能夠創(chuàng)建更靈活、可維護(hù)和可定制的主題。

您將在 WordPress 的網(wǎng)站編輯器中使用該文件來完成網(wǎng)站的最終設(shè)計(jì)。您在theme.json中設(shè)置的選項(xiàng)將作為默認(rèn)設(shè)置，最終用戶將對(duì)其進(jìn)行進(jìn)一步自定義。好消息是，編寫該文件比調(diào)整一系列 PHP 和 CSS 文件更簡(jiǎn)單，這也是 WordPress 設(shè)計(jì)的未來。

一刀（WordPress智庫站長(zhǎng)）

我們提供 WordPress主題和插件定制開發(fā)服務(wù)

本站長(zhǎng)期承接 WordPress主題、插件、基于 WooCommerce 的商店商城開發(fā)業(yè)務(wù)。 我們有 10 年WordPress開發(fā)經(jīng)驗(yàn)，如果你想 用WordPress開發(fā)網(wǎng)站, 請(qǐng)聯(lián)系微信: iwillhappy1314，或郵箱: [email protected] 咨詢。

發(fā)表回復(fù)

您的郵箱地址不會(huì)被公開。 必填項(xiàng)已用 * 標(biāo)注

*