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

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

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

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

例如，大多數(shù)現(xiàn)代WordPress主題對塊編輯器使用與實時網(wǎng)站相同的背景顏色，包括Astra，OceanWP，GeneratePress等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

background-color: #bee0ec;

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

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

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

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

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

現(xiàn)在，從管理員側(cè)邊欄訪問塊編輯器。

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