如何自訂 WordPress 區塊編輯器的背景顏色
最後更新於 2024 年 4 月 5 日，編輯部 | 審核：Syed Balkhi
你是否希望為 WordPress 管理區域中的區塊編輯器自訂背景顏色？在處理客戶專案時，你可能需要將 WordPress 的 Gutenberg 編輯器背景顏色更改為與品牌色彩相符。
在這篇文章中，我們將展示如何輕鬆地自訂 WordPress 編輯器的背景顏色。
為什麼要更改 WordPress 區塊編輯器的背景顏色？
你可能會出於多種原因想要更改 WordPress 區塊編輯器的背景顏色。例如，多數現代的 WordPress 主題會將區塊編輯器的背景顏色設為與實際網站相同，如 Astra、OceanWP 和 GeneratePress。
然而，如果你的 WordPress 主題沒有使用相同的顏色，那麼編輯器中文章的外觀與用戶在實際網站上看到的會有所不同。另一個原因可能是個人偏好。預設情況下，區塊編輯器使用純白背景，長時間看白色屏幕可能會讓一些用戶感到疲勞。
如何更改 WordPress 編輯器背景顏色
你可以透過添加自訂代碼至主題的 functions.php 文件，輕鬆地更改 WordPress 編輯器的背景顏色。不過，代碼中的小錯誤就可能導致網站崩潰，因此我們推薦使用 WPCode 插件。這是市場上最好的 WordPress 代碼片段插件，也是向網站添加自訂代碼的最簡單且最安全的方法。
首先，你需要安裝並啟用 WPCode 插件。詳情請參見我們的逐步指南 如何安裝 WordPress 插件。
啟用後，訪問 WordPress 管理側邊欄的代碼片段 » +新增片段頁面。在這裡，點擊‘添加你的自訂代碼（新片段）’選項下的‘使用片段’按鈕。這會將你帶到‘創建自訂片段’頁面，首先輸入代碼片段的名稱。這只是給你自己看的，可以是任何名稱，便於你識別代碼。
接下來，在右上角的下拉選單中選擇‘PHP 片段’作為‘代碼類型’。然後，將以下代碼複製並粘貼到‘代碼預覽’框中：
add_action( 'admin_footer', function() {
?>
.editor-styles-wrapper {
background-color: #bee0ec;
}
<?php
});
隨後，在 PHP 片段的代碼中找到如下代碼：
background-color: #bee0ec;
然後，將你的首選顏色的十六進制代碼添加到背景顏色選項旁邊。如果不想使用十六進制代碼，也可以使用一些基本顏色名稱，如‘white’或‘blue’。
接下來，向下滾動到‘插入’部分，選擇‘自動插入’選項。然後，從下拉選單中選擇代碼片段的‘位置’為‘僅限管理員’。
然後，回到頁面頂部，將‘未啟用’開關切換為‘啟用’。最後，別忘了點擊‘保存片段’按鈕來儲存更改。
現在，從管理側邊欄訪問區塊編輯器，查看背景顏色變更效果。
獎勵：更改 WordPress 前端的背景顏色
如果你希望更改網站前端的背景顏色，可以透過訪問 WordPress 儀表板中的外觀 » 自訂頁面來實現。這將啟動主題自訂器，在左側欄中點擊‘顏色與黑暗模式’標籤。請記住，根據你使用的主題不同，自訂器的外觀會有所不同。
這會在側邊欄中打開一個新面板，其中你需要點擊‘選擇顏色’選項。顏色選擇器會在屏幕上彈出，你可以選擇首選背景顏色。完成後，別忘了點擊頂部的‘發佈’按鈕來儲存設置。
你還可以從主題自訂器中更改文字顏色、突出顏色、按鈕顏色等。如果你使用的是區塊主題，則需要在全站編輯器中做這些更改。
我們希望這篇文章幫助你學會如何輕鬆地更改 WordPress 編輯器背景顏色。你可能還會想查看我們的 WordPress 最實用和節省時間的快捷鍵終極指南 或瀏覽我們挑選的 最佳 WordPress 頁面構建器插件。
如果你喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 教學視頻。你也可以在 Twitter 和 Facebook 上找到我們。
