您想為管理員更改WordPress塊編輯器的背景顏色嗎？有時在處理自定義客戶端項目時，您可能希望更改WordPress中的Gutenberg編輯器背景顏色以匹配其品牌顏色。在本文中，我們將向您展示如何輕松自定義管理區域的WordPress塊編輯器的背景顏色。

注意：本指南介紹了在WordPress管理中更改編輯器顏色。

為什么要在WordPress中更改塊編輯器的背景顏色？

出于多種原因，您可能希望更改WordPress塊編輯器的背景顏色。

例如，大多數現代WordPress主題對塊編輯器使用與實時網站相同的背景顏色，包括Astra，OceanWP，GeneratePress等。

但是，如果您的 WordPress 主題不使用相同的顏色，那么您的帖子在編輯器中的外觀將與您的用戶在實時網站上看到的外觀完全不同。

更改背景顏色的另一個原因可能是個人喜好。

例如，默認情況下，塊編輯器使用純白色背景。一些用戶可能會發現長時間看白屏有點壓力。眼睛疲勞對許多人來說可能是一個真正的問題，默認的白色背景對眼睛來說并不容易。

如何更改WordPress編輯器的背景顏色

您可以通過將自定義代碼添加到主題的功能.php文件中來輕松更改 WordPress 編輯器背景顏色。

但是，請記住，即使是代碼中最小的錯誤也會破壞您的網站并使其無法訪問。這就是為什么我們建議使用WPCode插件。它是市場上最好的WordPress代碼片段插件，也是將自定義代碼添加到WordPress網站的最簡單，最安全的方法。

首先，您需要安裝并激活免費的WPCode插件。

激活后，您需要從管理員側邊欄訪問代碼片段 ? + 添加代碼段頁面。

從這里，您必須單擊“添加自定義代碼（新代碼段）”選項下的“使用代碼段”按鈕。

這將帶您進入“創建自定義代碼段”頁面，您可以在其中鍵入代碼段的名稱。這只適合您，可以是任何可以幫助您識別代碼的內容。

接下來，您需要從右側的下拉菜單中選擇“PHP 代碼段”作為“代碼類型”。

之后，您需要將以下代碼復制并粘貼到“代碼預覽”框中。

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

接下來，您需要在剛剛粘貼的 PHP 代碼段中查找以下代碼。

background-color: #bee0ec;

然后，您必須在背景顏色選項旁邊添加首選顏色的十六進制代碼。如果您不想使用十六進制代碼，則可以改用一些基本的顏色名稱，例如“白色”或“藍色”。

之后，您需要向下滾動到“插入”部分，然后選擇“自動插入”選項。

接下來，您需要從下拉菜單中選擇代碼片段的“位置”作為“僅限管理員”。

之后，您需要滾動回頁面頂部并將“非活動”開關切換為“活動”。

最后，不要忘記單擊“保存代碼段”按鈕以保存更改。

現在，從管理員側邊欄訪問塊編輯器。

這就是添加CSS代碼片段后塊編輯器在我們網站上的外觀。