WordPressブロックエディター（Gutenberg）の背景色をカスタマイズする方法

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

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

想要更改背景颜色的原因有很多。但是，大多数ワードプレスのテーマ都使用与实时网站相同的块编辑器背景颜色，包括アストラそしてオーシャンWPそしてジェネレートプレスその他

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

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

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

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

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

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

这就是我们很多教程都推荐使用ダブルPCコード插件的原因。它是目前市场上最好的 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 仪表板的外观»自定义 屏幕来进行更改。

这会启动主题定制器，单击左栏中的“カラーモードとダークモード”选项卡。注意：定制器可能会根据使用的主题而有所不同。

会在侧边栏中打开一个新面板，在其中单击“色の選択「オプション

现在，颜色选择器会在屏幕上打开，可以选择喜欢的背景颜色。选择后，要记得点击顶部的“ポスト「ボタン

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