自定义WordPress背景颜色

  • A+
所属分类:wordpress函数

自定义WordPress背景颜色

色彩是个很神奇的东西,能影响人的心情。

就像“Color Run”,跑步并不是最主要的,在五颜六色的色彩中淋漓精致的释放自我,才是大家参加比赛的主要目的。

同样的,网站的色彩,尤其是背景色也会影响到访客的心情。也许只是你的网站色彩正好符合他/她的心境,他/她就喜欢上了你的网站,并加到了收藏夹中。

如果你想调整/自定义WordPress的网站背景色,有以下几个方法:

1、使用Function.php函数添加随机背景色

自定义WordPress背景颜色

随机背景色

第一步,将以下代码保存到function.php中即可:

  1. function wpb_bg() {
  2. $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
  3. $color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
  4. $rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
  5. echo $color;
  6. }

该函数简单地生成一个随机的十六进制颜色值。

第二步:编辑主题的header.php文件。找到<bady>标签行,如下所示:

  1. <body <?php body_class(); ?>>

用这一行替换它:

  1. <body <?php body_class(); ?> style="background-color:<?php wpb_bg();?>">>

保存,然后访问您的网站就能看到随机背景色的效果了。

2、使用“Fabulous Background Colors”插件

自定义WordPress背景颜色

使用Fabulous Background Colors插件,你能获得一个色彩条纹的背景色效果,并且每隔5秒钟会自动变换一次,安装之后无需特别设置就能生效。

3、修改主题CSS实现修改单独页面/文章的背景色

几乎任何一个符合WordPress标准的主题都会在Bady标签中包含许多class,每一篇文章、页面都会有属于自己唯一的class(包含id),如下图所示:

自定义WordPress背景颜色

所以,通过修改主题的CSS文件,我们能轻松的修改文章/页面的背景色。

当然,在bady标签所包含的class中,除了包含id的class,我们还能看到分类目录的class,页面的class以及页面模版的class,这样,我们就能很轻松的控制这些页面的背景色了。

比如,修改文章id为8244的背景色,可以将如下代码更新到主题CSS中:

  1. body.postid-65 {
  2. background-color:#faebd7;
  3. }

修改使用默认文章页模版的所有文章的背景色,可以将如下代码更新到主题CSS中:

  1. body.post-template-default{
  2. background-color:#faebd7;
  3. }
亮享

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: