WordPress 随机彩色标签的实现方法

在 WordPress 博客系统中,使用标签组织归类文章是极为有效的方式。为了给予用户强大的视觉冲击力,强调标签的重要性是 WordPress 主题设计的一个基本要素。这个自我感觉还不错的效果之前也有读者询问过,现在做个 WordPress 随机彩色标签的实现方法的分享。

按照笨猫首页现在的实现方式,随机彩色其实很容易。先来按照常理输出标签列表的代码:

<?php wp_tag_cloud(); ?>

如果为标签添加背景色,就需要为每个标签元素设置 CSS 类来定义其样式。

首先,使用获取标签列表对象:

$tags = get_the_tags();

然后,使用 foreach 函数遍历标签列表,循环输出标签名称和链接地址等信息,代码如下:

foreach($tags as $tag) echo '<a href="'.get_tag_link($tag -> term_id).'">'.$tag -> name.'</a>'; ?>

完整的随机背景颜色代码为:

<?php $tags = get_the_tags(); foreach($tags as $tag) echo '
<li><a href="'.get_tag_link($tag -> term_id).'">'.$tag -> name.'</a></li>'; ?>

注意到其中的 rand(1, 5) 函数产生数字 1~5,则每一个标签的标记可以使用诸如 tag-1 的样式。

最后通过 CSS 定义 tag-1 至 tag-5 五个不同背景颜色的样式即可:

.tag-1{background:red;}
.tag-2{background:blue;}
...
.tag-5{background:green;}

当然,如果你不想输出太多颜色限制,还有一个输出随机背景色的方法:

<?php echo '<li style="background:rgb(255,0,0);">笨猫 - www.nbmao.com</li>'; ?>

实现的方法其实是和第一种一致的,有兴趣可以尝试第二种。

点赞
  1. Ray Chow说道:
    Google Chrome Windows 7

    第一种可以控制颜色比较不错

  2. 淘城记说道:
    Internet Explorer Windows XP

    不错!不错!但有点眼花!不适合我!呵呵!

  3. gaga说道:
    Internet Explorer Windows XP

    很有趣!学习了! :shock:

  4. Tangboke说道:
    360Safe Explorer Windows XP

    是很不错的。

  5. 笔头说道:
    TheWorld Browser Windows XP

    应该很不错~

  6. jobasic说道:
    Internet Explorer Windows XP

    有空试试去

  7. 12365说道:

    这篇文章写得真不错,学到很多,感谢 :)

  8. zhao说道:

    楼主牛

  9. 经典语录说道:
    TheWorld Browser Windows Server 2003

    方法很实用,不错,支持下

  10. Xshagua说道:
    Google Chrome Windows XP

    不错,回去试试去。你这好像评论头像都不能显示哎!应该是升级版本了吧!这篇教程可以帮你解决: http://www.xshagua.com/?p=177 还是选第二种吧!

发表评论

电子邮件地址不会被公开。必填项已用 * 标注