如何自定义WordPress块编辑器的背景颜色

您想为管理员更改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代码片段后块编辑器在我们网站上的外观。

编辑器颜色预览

5efa732701047b080616670e3439dbb