芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
24

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

作者 芒果/分类 教程/发布于 2010-07-15 00:21

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);">芒果 - mangguo.org</li>'; ?>

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

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/wordpress-archive-random-colorful-tags/" title="WordPress 随机彩色标签的实现方法" rel="bookmark">WordPress 随机彩色标签的实现方法 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 24 条群众意见

  1. 丕子 /2010-07-15 07:15

    嗯,已经用了。 回应

    #1
  2. very /2010-07-15 09:59

    呵呵,佩服! 回应

    #2
  3. 睿智小超人 /2010-07-15 13:43

    有点眼花缭乱的感觉。 回应

    #3
  4. LuDa /2010-07-15 15:29

    呃,这个真的能输出随机背景颜色吗? 回应

    #4
  5. Firm /2010-07-15 16:26

    这类的比较特别,好像没啥人用吧。 回应

    #5
  6. 芒果LuDa/2010-07-15 23:05

    当然可以,芒果正在使用。 回应

    #6
  7. LuDa芒果/2010-07-16 08:22

    我是说,怎么没看见随机函数呢 background:rgb(255,0,0) 回应

    #7
  8. 金山识别码 /2010-07-16 16:14

    路过,学习了~~ 回应

    #8
  9. 芒果LuDa/2010-07-16 20:20

    这个只是另一种解决方案。如果要实现,利用 PHP 随机输出 R/G/B 三个通道的数值即可。实例代码:
    background:rgb(< ?php rand(0, 255); ?>< ?php rand(0, 255); ?>,< ?php rand(0, 255); ?>) 回应

    #9
  10. 耐特网 /2010-07-16 22:18

    偶然发现博主的文章,希望以后有机会多交流。 回应

    #10
  11. MK /2010-07-18 11:51

    主要还是要看主题。 回应

    #11
  12. 晃晃 /2010-07-18 15:03

    这个我要不要试试呢 – – 回应

    #12
  13. qmdx /2010-07-18 21:56

    请问下,如果用了那个标签去的 flash 的插件,里面的字会不会也是彩色的? 回应

    #13
  14. 极乐新地 /2010-07-19 09:38

    按照芒果的主题风格,很适合使用这样一款插件。 回应

    #14
  15. 小贝 /2010-07-20 18:11

    不错不错,小贝支持一下。 回应

    #15
  16. 游乐设备网 /2010-07-21 19:12

    正好用到,呵呵,谢谢楼主分享。 回应

    #16
  17. 汽车导航仪哪个好 /2010-08-22 18:44

    谢谢分享,正好拿来放博客试试先。 回应

    #17
  18. zane /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 回应

    #18
  19. Zeus /2010-09-03 11:13

    不会改啊,能不能帮个忙,可以加我 Q 么?370022350 教下我,觉得你的做的很好的。我不知道改哪个文件了,能说详细点吗?谢谢。 回应

    #19
  20. ?
    WordPress 随机彩色标签的实现方法 - 无聊呀 /2010-09-27 14:01

    […] 原文连接http://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&quot; title="WordPress 随机彩色标签的实现方法" rel="bookmark">WordPress 随机彩色标签的实现方法 | 无聊呀</a> […] 回应

    #20
  21. ?
    Ben is Me » 阶段总结。折腾记录,累死了 /2010-10-25 11:38

    […] 《为网站添加分享按钮 》 《为WordPress评论加入楼层显示》 《WordPress 随机彩色标签的实现方法》 非插件方面就是这些了,插件方面本来想用WP RC Reply AJAX代替WP-RecentComments […] 回应

    #21
  22. 优趣 /2010-10-28 12:36

    不知道效果咋样?有没有 demo 回应

    #22
  23. 芒果优趣/2010-10-28 15:45

    芒果的模板正在使用中…… 回应

    #23
  24. 空心菜 /2013-04-04 12:20

    我用了你的风格,但是怎么没有那些标签呢? 回应

    #24

下面我简单说几句