如何自定义 WordPress 块编辑器（古腾堡）的背景颜色

想要更改 WordPress 中的 Gutenberg （古腾堡）编辑器背景颜色以匹配网站品牌颜色，展示站点文化。详细的教程今天它来了！

为什么要更改 WordPress 中块编辑器的背景颜色？

想要更改背景颜色的原因有很多。但是，大多数WordPress 主题都使用与实时网站相同的块编辑器背景颜色，包括Astra、OceanWP、GeneratePress等。

但是，如果 WordPress 主题不使用相同的颜色，那么编辑器中帖子的外观将与用户在实时网站上看到的不一样。

也可以根据自己的喜好修改。

例如，默认情况下，块编辑器使用纯白色背景。一些用户可能会觉得长时间盯着白色屏幕有点压力。眼睛疲劳对很多人来说都不舒服，而默认的白色背景对眼睛来说并不舒服。

如何更改 WordPress 编辑器背景颜色

可以通过向主题的functions.php文件添加自定义代码来更改 WordPress 编辑器的背景颜色。

然而，修改要functions.php文件小心，即使代码中最小的错误也可能导致网站无法访问。

这就是我们很多教程都推荐使用WPCode插件的原因。它是目前市场上最好的 WordPress 代码片段插件，也是向 WordPress 网站添加自定义代码的最简单、最安全的方法。

首先，安装并激活WPCode插件。

激活后，从 WordPress 管理侧边栏访问代码片段»+添加代码片段页面。

从这里，单击“添加自定义代码（新代码片段）”选项下的“使用代码片段”按钮。

这将进入“创建自定义代码片段”页面，可以在此输入代码片段的名称。这里可以是任何有助于识别代码的内容。

接下来，从屏幕右上角的下拉菜单中选择“PHP Snippet”作为“代码类型”。

之后，将以下代码复制并粘贴到“代码预览”框中：

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

完成后，要在刚刚粘贴的 PHP 代码片段中查找以下代码：

	background-color: #bee0ec;

然后，必须在背景颜色选项旁边添加喜欢的颜色的十六进制代码。如果不想使用十六进制代码，则可以使用一些基本颜色名称，例如“白色”或“蓝色”。

注意：这里添加的颜色名称一定要是英文的。

之后，向下滚动到“插入”部分并选择“自动插入”选项。

接下来，从下拉菜单中选择代码片段的“位置”为“仅限管理员”。

之后，返回页面顶部并将“非活动”开关切换为“活动”。

最后，要记得点击“保存代码片段”按钮来保存更改。

现在，从管理员侧边栏访问块编辑器。

这是添加 PHP代码片段后块编辑器在网站上的显示效果。

如果想更改网站前端的背景颜色，那么可以通过访问WordPress 仪表板的外观»自定义 屏幕来进行更改。

这会启动主题定制器，单击左栏中的“颜色和暗模式”选项卡。注意：定制器可能会根据使用的主题而有所不同。

会在侧边栏中打开一个新面板，在其中单击“选择颜色”选项。

现在，颜色选择器会在屏幕上打开，可以选择喜欢的背景颜色。选择后，要记得点击顶部的“发布”按钮。

还可以从主题定制器中更改文本颜色、突出显示颜色、按钮颜色等。但是，如果使用的是
块主题，则必须在完整网站编辑器中进行这些更改。