如何在 WordPress 中更改背景颜色(初学者指南)

您是否正在寻找一种简单的方法来更改 WordPress 网站的背景颜色?

您网站的背景颜色在您的设计和品牌塑造以及使您的内容更具可读性方面发挥着重要作用.

在本文中,我们将向您展示如何轻松更改 WordPress 网站的背景颜色.

How to Change Background Color in WordPress

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

WordPress 主题带有默认背景颜色.更改背景颜色有助于个性化您的网站设计并提高可读性.

例如,您可以使用不同的背景颜色突出页面的特定部分.这有助于突出您的号召性用语 (CTA) 并增加转化次数.

您可以根据作者、评论或类别为 WordPress 博客上的不同帖子使用不同的背景颜色.这有助于将文章与您网站上的其他内容区分开来.

还有一种方法可以添加视频背景,以立即吸引访问者的注意力并提高参与度.

话虽如此,让我们来看看如何在 WordPress 中更改背景颜色.我们将向您展示自定义背景颜色的不同方法,因此您可以跳到您喜欢的任何部分:

  • 使用 WordPress 定制器更改背景颜色
  • 使用自定义 CSS 更改背景颜色
  • 随机改变背景颜色
  • 更改单个帖子的背景颜色
  • 在后台使用视频
  • 创建自定义着陆页

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

根据您的主题,您可以使用 WordPress 主题定制器更改背景颜色.它使您可以实时编辑站点的外观,而无需编辑代码.

要访问 WordPress 主题定制器,您可以登录您的网站,然后转到 外观 »自定义.

这将打开主题定制器,您将在其中找到多个选项来修改您的主题.这包括菜单、颜色、主页、小部件、背景图片等.

可用的具体选项取决于您的网站使用的 WordPress 主题.在本教程中,我们使用默认的 221 主题.

要更改您网站的背景颜色,请继续并单击"颜色和"左侧菜单中的"暗模式"设置选项卡.

Go to Colors and Dark Mode settings

接下来,您需要点击"背景颜色"选项并为您的网站选择一种颜色.您可以使用颜色选择器工具或为您的背景输入十六进制颜色代码.

Choose a background color

完成更改后,不要忘记单击"发布"按钮.您现在可以访问您的网站以查看正在运行的新背景颜色.

New background color example

您的主题在主题定制器中可能没有此选项.在这种情况下,您可以尝试以下方法之一.

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

另一种更改 WordPress 网站背景颜色的方法是在 WordPress 主题定制器中添加自定义 CSS.

首先,转到外观»自定义,然后转到"其他 CSS"标签.

Add custom CSS in WordPress Theme Customizer

接下来,您可以输入以下代码:

body {
 background-color: #FFFFFF;
}

您所要做的就是用您要在网站上使用的颜色代码替换背景颜色代码.接下来,继续并在"附加 CSS"选项卡中输入代码.

Enter background color custom CSS

完成后,不要忘记点击"发布"按钮.您现在可以访问您的网站以查看新的背景颜色.

有关更多详细信息,请参阅我们的指南,了解如何轻松地将自定义 CSS 添加到您的 WordPress 网站.

在 WordPress 中随机更改背景颜色

现在,您是否正在寻找一种在 WordPress 中随机更改背景颜色的方法?

您可以添加平滑的背景颜色更改效果以自动在不同的背景颜色之间过渡.效果经过多种颜色,直到达到最终颜色.

要添加效果,您需要向 WordPress 网站添加代码.我们将引导您完成以下流程.

您需要做的第一件事是找出要添加平滑背景颜色更改效果的区域的 CSS 类.

您可以使用浏览器中的检查工具来执行此操作.您所要做的就是将鼠标移到要更改颜色的区域,然后右键单击以选择"检查"工具.

Find CSS class

之后,您需要写下您想要定位的 CSS 类.例如,在上面的屏幕截图中,我们希望使用 CSS 类"page-header"定位区域.

接下来,您需要在您的计算机上打开一个纯文本编辑器(如记事本)并创建一个新文件.您必须在桌面上将文件另存为"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);
        });
        }); 

如果您研究代码,那么您会注意到我们使用了"page-header"CSS 类,因为它是我们要在网站上定位的区域.

您还会看到我们使用十六进制颜色代码使用了四种颜色.您可以根据需要为背景添加任意数量的颜色.您所要做的就是在代码段中输入颜色代码,并使用逗号和单引号将它们分开,就像其他颜色一样.

现在您的 JS 文件已准备就绪,您需要使用文件传输协议 (FTP) 服务将其上传到 WordPress 主题的 JS 文件夹.

在本教程中,我们使用 FileZilla.它是适用于 Windows、Mac 和 Linux 的免费 FTP 客户端,并且非常易于使用.

首先,您需要登录您网站的 FTP 服务器.您可以在来自主机提供商的电子邮件或主机帐户的 cPanel 仪表板中找到登录凭据.

登录后,您会在"远程站点"列下看到您网站的文件夹和文件列表.继续并导航到站点主题中的 JS 文件夹.

Upload JS file using a FTP service

如果您的主题没有 js 文件夹,那么您可以创建一个.只需在 FTP 客户端中右键单击您的主题文件夹,然后单击"创建目录"选项.

Create a directory and name it

接下来,您需要在"本地站点"列下打开 JS 文件的位置.然后右键单击该文件并单击"上传"选项以将该文件添加到您的主题中.

Click the Upload option

有关更多详细信息,您可以按照我们关于如何使用 FTP 将文件上传到 WordPress 的教程进行操作.

接下来,您需要在主题的 funtions.php 文件中输入以下代码.此代码正确加载了 JavaScript 文件和运行此代码所需的相关 jQuery 脚本.

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' ); 

我们建议使用代码片段插件安全地将代码添加到您的网站.有关更多详细信息,请参阅我们的指南,了解如何将网页中的片段粘贴到 WordPress 中.

您现在可以访问您的网站,查看您定位的区域中随机变化的颜色.

Color change effect animation

更改单个帖子的背景颜色

您还可以在 WordPress 中更改每个单独博客文章的背景颜色,而不是使用自定义 CSS 在整个网站中使用单一颜色.

它允许您更改特定帖子的外观并个性化其背景.例如,您可以根据作者自定义每个帖子的样式,或为评论最多的帖子显示不同的背景颜色.

您甚至可以更改特定类别中帖子的背景颜色.例如,与教程相比,新闻帖子可以具有不同的背景颜色.

您需要做的第一件事是在主题的 CSS 中找到帖子 ID 类.您可以通过查看任何博客文章然后右键单击以使用浏览器中的检查工具来完成此操作.

Default CSS for specific post in WordPress

以下是它的外观示例:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> 

获得帖子 ID 后,您可以使用以下自定义 CSS 更改单个帖子的背景颜色.只需替换帖子 ID 以匹配您自己的和您想要的背景颜色代码.

.post-104 { 
background-color: #D7DEB5;
color:#FFFFFF; 
} 

要添加自定义 CSS,您可以使用 WordPress 主题定制器.首先,确保您已登录 WordPress 网站.然后,访问您的博文并点击顶部的"自定义"选项.

之后,从左侧菜单转到其他 CSS 标签.

Go to Additional CSS option

接下来,输入自定义 CSS,然后单击"发布"按钮.

Enter custom CSS for individual post color

您现在可以访问您的博客文章以查看新的背景颜色.

如果您想根据作者、评论或类别更改背景颜色,请查看我们的详细教程,了解如何为每个 WordPress 帖子设置不同的样式.

​​在背景中使用视频

使用视频作为网站背景是吸引访问者注意力和提高用户参与度的好方法.

在后台添加视频的最简单方法是使用 WordPress 插件.在本教程中,我们将使用 mb.YTPlayer 作为背景视频.

这是一个免费插件,可让您在 WordPress 网站的后台播放 YouTube 视频.还有一个高级版本可供您删除 mb.YTPlayer 水印并提供更多自定义功能.

首先,您需要在您的网站上安装并激活插件.有关更多详细信息,您可以按照我们关于如何安装 WordPress 插件的教程进行操作.

激活后,您可以前往mb.ideas » YTPlayer 来自您的 WordPress 管理区域.

在下一个屏幕上,您需要输入 YouTube 视频的 URL 并激活背景视频.

Enter your YouTube video URL

除此之外,该插件还允许您选择显示背景视频的位置.您可以选择静态主页、博客索引主页,或两者兼而有之.如果您选择"全部",还可以选择在整个网站上显示视频.

输入视频 URL 并激活背景后,请继续访问您的网站以查看正在运行的视频背景.

Video background preview

创建自定义着陆页

在 WordPress 中创建自定义登录页面可以让您为您的企业产生潜在客户并促进销售.您可以完全控制页面的背景颜色和设计.

创建极具吸引力的自定义登录页面的最简单方法是使用 SeedProd.它是 WordPress 最好的登陆页面插件,并提供易于使用的拖放页面构建器,无需编辑代码即可创建页面.

您需要做的第一件事是在您的网站上安装并激活 SeedProd.您可以参考我们关于如何安装 WordPress 插件的指南.

注意:我们将使用 SeedProd Pro 版本,因为它提供了更强大的功能、模板和自定义选项.但是,WordPress.org 上也有免费版本.

插件激活后,系统会要求您输入许可证密钥.您可以在您的 SeedProd 帐户区域中找到密钥.输入密钥后,单击"验证密钥"按钮.

SeedProd license key

接下来,您可以前往SeedProd »页面,然后点击"添加新着陆页"按钮.

Add new SeedProd landing page

之后,您需要为着陆页选择一个主题.SeedProd 提供了许多漂亮的登录页面模板来开始使用.

您也可以使用空白模板从头开始.但是,我们建议使用模板,因为它是创建登录页面的更简单快捷的方式.

Choose a template for your page

当您选择模板时,系统会要求您输入页面名称并选择一个 URL.

Enter a Page Name and Page URL

在下一个屏幕上,您将看到 SeedProd 页面构建器.在这里,您可以使用拖放构建器从左侧的菜单中添加块.您可以添加标题、视频、图片、按钮等.

向下滚动时,"高级"部分下有更多块.例如,您可以添加倒数计时器以创建紧迫感、显示社交资料以增加关注者、添加选项表单以收集潜在客户等等.

SeedProd landing page builder

使用拖放构建器,可以毫不费力地更改着陆页上每个块的位置.您甚至可以更改文本的布局、大小、颜色和字体.

要更改着陆页的背景颜色,只需选择页面的任何部分.您现在将在左侧菜单中看到用于编辑背景样式、颜色和添加图像的选项.

Change background color of landing page

完成着陆页编辑后,不要忘记点击顶部的"保存"按钮.

接下来,您可以转到"连接"选项卡并将页面与不同的电子邮件营销服务集成.例如,您可以连接到 Constant Contact、SendinBlue 等.

Connect email marketing services

之后,继续并单击"页面设置"选项卡.您可以在此处将页面状态从草稿更改为发布,以使您的页面上线.

SeedProd page settings

除此之外,您还可以更改页面的 SEO 设置、查看分析、在脚本下添加自定义代码以及输入自定义域.

完成后,您可以退出 SeedProd 页面构建器并访问您的自定义登录页面.

Custom landing page preview

我们希望本文能帮助您了解如何在 WordPress 中更改背景颜色.您可能还想查看我们关于如何选择最佳网站构建器的指南,或我们对最佳网页设计软件的比较.

3

发表回复