如何随机化 WordPress 网站背景中的颜色变化

用户查看和与网站交互的方式有很多因素。 信不信由你,颜色在用户交互中起着非常重要的作用。 因为用户可能会根据网站的 WordPress 背景颜色以不同的方式进行交互 选择正确的配色方案.

总是有一个选项 更改 WordPress 网站的背景颜色但是,我们希望更进一步。 在本文中,我们将向您展示如何更改随机 WordPress 的背景颜色。

有几种不同的方法来合并这一点。 让我们来看看这两种方法。

使用代码添加随机颜色更改

第一种方法是向 WordPress 网站文件添加一些代码,以获得您要查找的 WordPress 背景颜色更改。

您需要做的第一件事是转到网站的函数.php文件。 您可以通过单击编辑器中的外观>到达那里。

导航到网站主题的文件部分,单击主题函数(函数.php)以导航到该区域并添加代码。

单击主题函数函数.php文件

找到函数.php文件后,需要添加以下代码:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
函数wpb_bg() |
$rand = 数组(“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“a”、“b”、“c”、“d”、“e”、“f”);
$color =’#’.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
回声$color;
[/ht_message]

此代码生成随机十六进制代码的颜色值并回显它。 输入此代码后,可以转到 WordPress 背景颜色更改的第二部分。

然后,单击主题标题.php文件。

单击主题标题(标题.php)以添加代码

进入文件时,找到“<正文>”标记行。 它看起来像这样。[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
<body <?php body_class(); ?>>
[/ht_message]

将代码行替换为以下代码行:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
<body <?php body_class(); ?> style=”background-color:<?php wpb_bg();? >”>>
[/ht_message]

立即保存您的更改,并查看 WordPress 背景颜色更改在实时网站上的工作方式。

使用 CSS 添加背景颜色更改

向 WordPress 网站添加 CSS 的一些简单方法几乎所有标准和兼容的 WordPress 主题都使用正文标记的“body_class()”功能。 此标记向主题正文标记添加一些 CSS 类。

这些默认类可用于设置帖子、类别和标记等样式。 您还可以做其他事情,例如: 创建 CSS 动画 等等。

在这个简单示例中,让我们使用类别。 当然,您的 WordPress 网站的类别名称取决于您的网站是什么。 在此代码示例中,让我们使用“演示”类别。

如果您的博客具有名为“演示”的类别,则这些 CSS 类位于类别存档页面的正文标记中。

要更改该特定类别的背景颜色,只需将自定义 CSS 添加到 WordPress 主题的样式表(样式.css)文件中即可。

单击样式表(样式.css)以添加自定义 CSS

找到并单击样式后.css添加以下自定义 CSS:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
body.category-demonstrations {
背景颜色:#faebd7;
}
[/ht_message]

这里有两件事我想记住。

  1. 您可以将颜色的十六进制代码更改为任何颜色。
  2. 您可以将“演示”类别更改为更改 WordPress 背景颜色的类别。

我希望这篇文章显示了一个简单的方法来改变一些随机和非随机WordPress背景颜色到您的网站。

您发现更改网站颜色可以改善互动和参与度吗? 是否要改用最新的 WordPress 插件进行这些更改?

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

如何向 WordPress 网站添加辅助功能

2022-10-2 2:14:39

WordPress 教程

如何查看评论最多的 WordPress 帖子

2022-10-2 4:16:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索