如何為 WordPress 小工具添加自訂樣式（兩種方法）
自訂小工具樣式是一種強大的方式，可以提升網站外觀、保持品牌一致性並突出重要資訊。然而，許多 WordPress 用戶發現小工具樣式設計有挑戰性，尤其是當他們對 CSS 不太熟悉時。別擔心，我們來幫您。
在本文中，我們將展示兩種簡單的方法，讓您能夠在不破壞網站的情況下，為 WordPress 小工具添加自訂樣式。無論您是否熟悉 CSS 或偏好無需代碼的解決方案，我們都有適合您的方法。
我們將展示兩種添加自訂樣式到 WordPress 小工具的方法。您可以使用這些快速鏈接跳到最適合您的方法：
- 方法 1：使用區塊編輯器添加自訂樣式（基本）
- 方法 2：使用 CSS Hero 應用自訂樣式（更多自訂選項）
注意：本文章適用於經典主題用戶。如果您使用區塊主題，則不會在管理員界面上看到「小工具」或「主題自訂器」頁面。您需要使用區塊和全站編輯器來自訂主題。更多資訊詳情，請參閱我們的新手指南《WordPress 全站編輯》。
方法 1：使用區塊編輯器添加自訂樣式（基本）
WordPress 小工具現在使用區塊編輯器來添加小工具和區塊到小工具區域和側邊欄中。因此，您將在某些預設的 WordPress 區塊中看到一些區塊樣式選項。例如，若您前往 外觀 » 小工具 頁面並點擊一個預設的 WordPress 區塊，您將看到更改區塊顏色和排版的選項。
然而，並非所有區塊都提供這些選項，特別是那些非預設的 WordPress 區塊。幸運的是，使用區塊編輯器添加小工具的一個優勢是您可以輕鬆地為每個區塊添加自訂 CSS 類別。
您只需點擊您想添加自訂樣式的小工具。然後，向下捲動到區塊面板下的「高級」標籤。在這裡，您可以添加自訂 CSS 類別。
別忘了通過點擊「更新」按鈕來保存更改。接下來，您可以針對該特定 CSS 類別添加自訂 CSS 到您的 WordPress 主題中。
前往 外觀 » 自訂 頁面，切換到「額外 CSS」標籤。您將看到網站即時預覽和一個添加 CSS 規則的框。
另一種添加自訂 CSS 的方法是使用 WPCode。如果您的主題中已有大量自訂 CSS 代碼並希望輕鬆區分和跟踪所有片段，我們推薦使用這個方法。
首先，確保安裝 WPCode 外掛。您可以參閱我們的指南瞭解如何安裝 WordPress 外掛的逐步說明。
接下來，前往 代碼片段 » + 添加片段 並選擇「添加您的自訂代碼（新片段）」。然後，點擊「+ 添加自訂片段」。
現在，給您的新自訂 CSS 命名。比如「自訂小工具樣式」這樣的簡單名稱。然後，將代碼類型更改為「CSS 片段」。
接下來，請在欄位中添加您的自訂 CSS。
這是我們所使用的一些基本 CSS：
.latest-articles { background-color:#def4f1; padding:10px; }
當完成後，向下捲動到「插入」部分。確保插入方法設置為「自動插入」，位置為「全站頭部」。
之後，切換右上角的按鈕，直到它顯示「啟用」，並點擊「保存片段」。
添加自訂 CSS 後，您可以在手機或桌面上查看網站效果。我們的效果如下：
方法 2：使用 CSS Hero 應用自訂樣式（更多自訂選項）
上述方法的一個問題是您需要編寫 CSS 代碼。然而，並非所有用戶都懂 CSS，或者不願意自己編寫代碼。在這種情況下，您可以使用 CSS Hero。這是一個自訂 WordPress 樣式的外掛，允許您無需編寫任何代碼即可為您的 WordPress 主題添加自訂 CSS。
您可以在我們的 CSS Hero 評測中瞭解更多關於這個外掛的資訊。
首先，您需要安裝並啟用 CSS Hero 外掛。詳細內容可參考我們的逐步指南《如何安裝 WordPress 外掛》。
啟用後，該外掛會在您的 WordPress 管理工具欄上方添加一個新功能表項。
接下來，您需要訪問能夠查看您想樣式化的小工具的頁面，然後點擊頂部的 CSS Hero 按鈕。
這將在 CSS Hero 編輯器接口中打開該頁面。這是一個即時編輯器，您可以簡單地指向和點擊網站上的任何項目來更改它的樣式。
將滑鼠移到您想樣式化的小工具上，然後點擊選擇它。在這個示例中，我們選擇了搜索小工具。
之後，您可以使用左側功能表來隨意樣式化小工具。這包括漸變色、排版、填充、邊距和邊框等高級樣式選項。
在下面的示例中，我們更改了搜索小工具的字體大小，使其更加突顯。
如果需要，您還可以改變小工具的特定元素。例如，我們更改了按鈕和搜索欄位的邊框半徑，使它們看起來更加圓潤和時尚。
完成後，別忘了點擊「保存」按鈕來存儲設置。然後，預覽網站以查看更改效果。
我們希望本文能幫助您學會如何為 WordPress 小工具添加自訂樣式。您可能還想查看我們精選的最佳拖放頁面構建器和我們對免費與高級 WordPress 主題的優缺點比較。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道 以獲取更多 WordPress 教學視頻。您也可以在 Twitter 和 Facebook 上找到我們。
