06/23/2023

为什么要在WordPress中更改背景颜色？

WordPress主题自带默认背景颜色。更改背景颜色可以个性化网站设计并提高可读性。例如，你可以使用不同的背景颜色使页面中特定部分更加突出。这有助于强调你的号召性用语（CTA）并增加转化率。你还可以根据作者、评论或类别为WordPress博客中的不同文章使用不同的背景颜色。这有助于区分你网站上的内容。

此外，你还可以添加视频背景，立即吸引访问者的注意力，提升互动度。

如何在WordPress中更改背景颜色

使用WordPress主题定制器更改背景颜色

根据你的主题，你可以使用WordPress主题定制器更改背景颜色。它允许你实时编辑站点外观，而无需编辑代码。要访问WordPress主题定制器，请登录网站，然后前往外观 » 定制。

这将打开主题定制器，你会发现多个选项可以修改你的主题设置，包括菜单、颜色、首页、小部件、背景图像等。具体选项取决于你使用的WordPress主题。本教程中，我们使用的是默认的Twenty Twenty-One主题。要更改网站的背景颜色，请点击左侧菜单中的“颜色和深色模式”设置选项卡。

接下来，点击“背景颜色”选项并为你的网站选择一种颜色。你可以使用颜色选择器工具或输入背景颜色的Hex颜色代码。

完成更改后，不要忘记点击“发布”按钮。现在你可以访问WordPress网站查看新的背景颜色。

使用整站编辑器更改背景颜色

整站编辑器（FSE）是一个基于区块的WordPress主题编辑器，可用来编辑站点背景颜色。它提供了不同的区块来定制网站设计，类似于使用WordPress区块编辑器。整站编辑器目前适用于部分WordPress主题，如Twenty Twenty-Two主题。要更改背景颜色，你可以从WordPress仪表盘前往外观 » 编辑器。

进入整站编辑器后，你可以更改每个单独区块的背景颜色。先选择你想编辑的区块。然后在右侧设置面板中，找到“颜色”部分，点击“背景”选项并选择颜色。

完成后，点击“保存”按钮。如果你想添加一个出现在所有区块后的背景颜色，可以添加一个封面区块。首先，点击顶部的“+”号并添加“封面”区块。

接下来，你会在主题模板中看到封面区块，并提供几种背景颜色选项可供选择。或者，你也可以在右侧设置面板中的叠加部分，点击“颜色”选项。

选择颜色后，下一步是将其应用到整个页面。在开始之前，点击顶部三个短横线的列表视图图标。这将打开你的主题大纲并显示不同部分。

接下来，你可以在列表视图中将所有主题元素拖放到封面区块下。当你这样做时，封面区块颜色将显示为整个网站的背景颜色。

不要忘记点击顶部的保存按钮以保存更改。

通过添加自定义CSS更改背景颜色

你可以通过在WordPress主题定制器中添加自定义CSS来更改网站的背景颜色。首先，前往外观 » 定制，然后进入“附加CSS”选项卡。

接下来，输入以下代码：

body { background-color: #FFFFFF; }

将背景颜色代码替换为你想在网站上使用的颜色代码。之后，输入代码到附加CSS选项卡中。

完成后，不要忘记点击“发布”按钮。现在你可以访问你的网站查看新的背景颜色。

在WordPress中随机更改背景颜色

你可以添加平滑的背景颜色变化效果，以自动在不同颜色之间过渡。要添加此效果，需要向你的网站添加代码。首先，使用浏览器的检查工具找到你想要添加平滑背景颜色变化效果的区域的CSS类。然后，记录下你想要定位的CSS类。接下来，在你的计算机上打开一个纯文本编辑器，如记事本，并创建一个新文件。将文件保存为‘wpb-background-tutorial.js’。

完成后，可以将以下代码添加到你刚创建的JS文件中：

jQuery(function($){ $('.page-header').each(function(){ var $this = $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); });

完成JS文件后，需要使用文件传输协议（FTP）服务将其上传到WordPress主题的JS文件夹。接着，需要在主题的functions.php文件中输入以下代码：

function wpb_bg_color_scripts() { wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

上传后，你可以访问你的网站，查看目标区域是否有随机变化的背景颜色。