/* 336x280*/
在 WordPress 博客系统中，使用标签组织归类文章是极为有效的方式。为了给予用户强大的视觉冲击力，强调标签的重要性是 WordPress 主题设计的一个基本要素。芒果的 2.0 版本已经将之前类似 Delicious 风格的灰色标签列表改进为随机彩色。这个自我感觉还不错的效果之前也有读者询问过，现在做个 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 class="tag-'.rand(1, 5).'"><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.mangguo.org</li>'; ?>
实现的方法其实是和第一种一致的，有兴趣可以尝试第二种。
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/wordpress-archive-random-colorful-tags/" title="WordPress 随机彩色标签的实现方法" rel="bookmark">WordPress 随机彩色标签的实现方法 | 芒果小站</a>
已经有 23 条群众意见
- 丕子
#1/2010-07-15 07:15嗯，已经用了。 回应
- very
#2/2010-07-15 09:59呵呵，佩服！ 回应
- 睿智小超人
#3/2010-07-15 13:43有点眼花缭乱的感觉。 回应
- LuDa
#4/2010-07-15 15:29呃，这个真的能输出随机背景颜色吗？ 回应
- Firm
#5/2010-07-15 16:26这类的比较特别，好像没啥人用吧。 回应
- 芒果 对 说
#6/2010-07-15 23:05当然可以，芒果正在使用。 回应
- LuDa 对 说
#7/2010-07-16 08:22我是说，怎么没看见随机函数呢 background:rgb(255,0,0) 回应
- 金山识别码
#8/2010-07-16 16:14路过，学习了~~ 回应
- 芒果 对 说
#9/2010-07-16 20:20这个只是另一种解决方案。如果要实现，利用 PHP 随机输出 R/G/B 三个通道的数值即可。实例代码：
background:rgb(< ?php rand(0, 255); ?>< ?php rand(0, 255); ?>,< ?php rand(0, 255); ?>) 回应
- 耐特网
#10/2010-07-16 22:18偶然发现博主的文章，希望以后有机会多交流。 回应
- MK
#11/2010-07-18 11:51主要还是要看主题。 回应
- 晃晃
#12/2010-07-18 15:03这个我要不要试试呢 – - 回应
- qmdx
#13/2010-07-18 21:56请问下，如果用了那个标签去的 flash 的插件，里面的字会不会也是彩色的？ 回应
- 极乐新地
#14/2010-07-19 09:38按照芒果的主题风格，很适合使用这样一款插件。 回应
- 小贝
#15/2010-07-20 18:11不错不错，小贝支持一下。 回应
- 游乐设备网
#16/2010-07-21 19:12正好用到，呵呵，谢谢楼主分享。 回应
- 汽车导航仪哪个好
#17/2010-08-22 18:44谢谢分享，正好拿来放博客试试先。 回应
- zane
#18/2010-09-01 15:22我在 index.php 文件与 single.php 文件中都将 <?php the_tags('’,”,”); ?>
改为了 <?php $tags = get_the_tags(); foreach($tags as $tag) echo '
term_id).’”>’.$tag -> name.’‘; ?>
并在 CSS 中添加了：
#tag-1{background:#f60;}
#tag-2{background:#3974CE;}
#tag-3{background:#F39;}
#tag-4{background:#f60;}
#tag-5{background:#96C555;}
但是结果并没有显示为彩色，求教原因。能详细点吗？网址：www.ai108.com 回应
- Zeus
#19/2010-09-03 11:13不会改啊，能不能帮个忙，可以加我 Q 么？370022350 教下我，觉得你的做的很好的。我不知道改哪个文件了，能说详细点吗？谢谢。 回应
- WordPress 随机彩色标签的实现方法 - 无聊呀
#20/2010-09-27 14:01[...] 原文连接http://www.mangguo.org/wordpress-archive-random-colorful-tags/ 版权所有，转载请注明出处。 转载自 <a href="http://www.wuliaoya.com/wordpress-%e9%9a%8f%e6%9c%ba%e5%bd%a9%e8%89%b2%e6%a0%87%e7%ad%be%e7%9a%84%e5%ae%9e%e7%8e%b0%e6%96%b9%e6%b3%95" title="WordPress 随机彩色标签的实现方法" rel="bookmark">WordPress 随机彩色标签的实现方法 | 无聊呀</a> [...] 回应
- Ben is Me » 阶段总结。折腾记录，累死了
#21/2010-10-25 11:38[...] 《为网站添加分享按钮 》 《为WordPress评论加入楼层显示》 《WordPress 随机彩色标签的实现方法》 非插件方面就是这些了，插件方面本来想用WP RC Reply AJAX代替WP-RecentComments [...] 回应
- 优趣
#22/2010-10-28 12:36不知道效果咋样？有没有 demo 回应
- 芒果 对 说
#23/2010-10-28 15:45芒果的模板正在使用中…… 回应
我简单说几句