WordPress中的造型按鈕阻止主題

WordPress 6.1 引入的新功能為在區塊編輯器和站點編輯器 UI 中直接應用陰影提供了控制，這篇文章將深入探討在 WordPress 區塊主題中設置按鈕樣式的方法，特別是利用 theme.json 文件。

為什麼選擇按鈕？這是個好問題，讓我們從這裡開始。

不同類型的按鈕

在 WordPress 區塊編輯器的上下文中，我們必須區分兩種不同類型的按鈕：

1. 按鈕區塊內的子區塊。
2. 嵌套在其他區塊內的按鈕（例如，“文章評論表單”區塊）。

如果我們將這兩種區塊添加到模板中，它們默認情況下具有相同的外觀。

但其標記卻大相徑庭：

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

我們可以看到，HTML 標籤名稱不同。正是通用的類名——.wp-block-button 和 .wp-element-button——確保了這兩個按鈕的一致樣式。

如果我們編寫 CSS，我們會定位這兩個類。但眾所周知，WordPress 區塊主題有不同的樣式管理方式，那就是通過 theme.json 文件。

那麼，如何在不編寫實際 CSS 的情況下在 theme.json 中定義按鈕樣式呢？讓我們一起完成它。

創建基本樣式

theme.json 是一個結構化的模式集，以屬性：值對的形式編寫。頂級屬性稱為“sections”，我們將使用 styles 部分。這是所有樣式指令所在的位置。

我們將特別關注 styles 中的 elements。此選擇器定位在區塊之間共享的 HTML 元素。這是我們正在使用的基本框架：

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

我們需要做的就是定義一個按鈕元素。

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

該按鈕對應於用於在前端標記按鈕元素的 HTML 元素。這些按鈕包含可能是我們兩種按鈕類型之一的 HTML 標籤：獨立組件（即按鈕區塊）或嵌套在另一個區塊中的組件（例如，文章評論區塊）。

與其必須為每個單獨的區塊設置樣式，不如創建共享樣式。讓我們繼續為主題中的兩種按鈕類型更改默認背景色和文本顏色。其中有一個顏色對象，它反過來支持背景和文本屬性，我們在其中設置所需的值：

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

這會更改兩種按鈕的顏色。

如果打開 DevTools 並查看 WordPress 為按鈕生成的 CSS，我們會看到 .wp-element-button 類添加了我們在 theme.json 中定義的樣式：

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

這些是我們的默認顏色！接下來，我們希望在用戶與按鈕交互時向他們提供視覺反饋。

實現交互式按鈕樣式

由於這是一個關於 CSS 的站點，我敢打賭你們中的許多人已經熟悉鏈接和按鈕的交互狀態。我們可以將鼠標光標懸停在它們上面（:hover），將它們製表到焦點（:focus），點擊它們以使它們處於活動狀態（:active）。甚至還有一個 :visited 狀態，可以向用戶直觀地表明他們之前點擊過這個。

這些是 CSS 偽類，我們使用它們來定位鏈接或按鈕的交互。

在 CSS 中，我們可能會像這樣設置 :hover 狀態的樣式：

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

在 theme.json 中，我們將使用這些偽類擴展現有的按鈕聲明。

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

請注意其“結構化”特性。我們基本上遵循一個概要：

• 元素
  • 元素
    • 對象
      • 屬性
        • 值

我們現在已經完成了按鈕的默認和交互式樣式的完整定義。但是，如果我們想設置嵌套在其他區塊中的某些按鈕的樣式呢？

設置嵌套在各個區塊中的按鈕的樣式

讓我們假設我們希望所有按鈕都具有我們的基本樣式，但有一個例外。我們希望“文章評論表單”區塊的提交按鈕為藍色。我們該如何實現呢？

此區塊比按鈕區塊更複雜，因為它包含更多活動部件：表單、輸入、說明性文本和按鈕。為了定位此區塊中的按鈕，我們必須遵循與按鈕元素相同的 JSON 結構，但應用於映射到 core/post-comments-form 元素的“文章評論表單”區塊：

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

請注意，我們不再在 elements 中工作了。相反，我們在 blocks 內工作，它用於配置實際的區塊。相比之下，按鈕被認為是一個全局元素，因為它們可以嵌套在區塊中，即使它們也可以作為獨立區塊使用。

JSON 結構支持元素內的元素。因此，如果“文章評論表單”區塊中存在按鈕元素，我們可以在 core/post-comments-form 區塊中定位它：

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

此選擇器意味著我們不僅定位特定區塊——我們還定位包含在該區塊中的特定元素。現在，我們有一組應用於主題中所有按鈕的默認按鈕樣式，以及一組應用於包含在“文章評論表單”區塊中的特定按鈕的樣式。

WordPress 生成的 CSS 因此具有更精確的選擇器：

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

如果我們想為“文章評論表單”按鈕定義不同的交互式樣式呢？這與我們為默認樣式所做的方法相同，只是這些樣式是在 core/post-comments-form 區塊內定義的：

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

非區塊中的按鈕怎麼辦？

WordPress 會自動生成並應用正確的類來輸出這些按鈕樣式。但是，如果您使用支持區塊和全站編輯但還包含“經典”PHP 模板的“混合”WordPress 主題怎麼辦？或者，如果您創建了一個自定義區塊，甚至有一個包含按鈕的舊版短代碼怎麼辦？這些都不受 WordPress 樣式引擎處理！

別擔心。在所有這些情況下，您都將在模板、區塊或短代碼標記中添加 .wp-element-button 類。然後將應用 WordPress 生成的樣式。

在某些情況下，您可能無法控制標記。例如，某些區塊插件可能過於武斷，並隨意應用其自己的樣式。這時，您通常可以轉到區塊設置面板中的“高級”選項並在那裡應用該類：

總結

雖然一開始在 theme.json 中編寫“CSS”可能會感覺很彆扭，但我發現它會成為第二天性。與 CSS 一樣，您可以使用正確選擇器廣泛或非常精確地應用有限數量的屬性。

並且不要忘記使用 theme.json 的三個主要優點：

1. 樣式應用於前端視圖和區塊編輯器中的按鈕。
2. 您的 CSS 將與未來的 WordPress 更新兼容。
3. 生成的樣式與區塊主題和經典主題都兼容——無需在單獨的樣式表中復制任何內容。

如果您在項目中使用了 theme.json 樣式，請分享您的經驗和想法。我期待閱讀任何評論和反饋！

以上是WordPress中的造型按鈕阻止主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！