玩WordPress » 技巧方法 » 2008 » 12 » 19 » 制作五彩缤纷的标签云图

制作五彩缤纷的标签云图

制作五彩缤纷的标签云图1WordPress 2.7的后台UI改变很大,对比以前的版本,美感加强了很多。
左图中的以颜色标出各留言类型的数量,就是其中的一个细节。
这个改动不但加强了美感,也使它们更加地醒目。

我是十分喜欢这个颜色的分类,于是有了将标签云图变得更加多彩的想法:
制作五彩缤纷的标签云图2
在Nofollow Tags的制作中,我发现标签云图的改动是极其的方便的,于是很容易就得到了制作五彩缤纷的标签的函数
只有保存到主题的functions.php中即可使用:

//制作五彩缤纷的标签云
function colorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
    return $text;
}
function colorCloudCallback($matches) {
    $text = $matches[1];
    $color = dechex(rand(0,16777215));
    $pattern = '/style=(\'|\")(.*)(\'|\")/i';
    $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
    return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

示例,看右边的侧边栏。

UPDATE:当然,你也可以装上color-cloud插件来实现这个效果。

31 Responses to “制作五彩缤纷的标签云图”

  1. 雪深 says:

    感觉太刺眼了

  2. 冰古 says:

    感觉还好啦。颜色这么密集没理由会刺眼的。

  3. 小果 says:

    额,我看到你在我博客上的留言了,我是想做成彩色的标签云,但是这段代码具体插在function.php的什么位置呢?能消息说明下不?不好意思偶是菜鸟 -_-!

  4. 冰古 says:

    @小果 呵呵,直接把那段代码随便塞到functions.php任意一个角落就可以了。
    推荐塞到最末尾(不过要在“?>”之前)

  5. Ariagle says:

    加进去了,不知为何,没生效……

  6. 冰古 says:

    @Ariagle 你添加在哪里呢?应该是添加到主题中的functions.php文件中的。

  7. Ariagle says:

    函数确实放到functions.php里了,不过没有效果
    我放到default的functions里也不行……

  8. 冰古 says:

    @Ariagle 我看了你的标签云图的HTML代码,应该不是用wp_tag_cloud函数生成的标签云图,你用wp_tag_cloud函数来生成标签云图就有效果了。
    或者你也可以告诉我你是用什么插件或函数生成云图的,我看看能不能加上这个效果。

  9. Ariagle says:

    囧 我在新主题里确实是用wp_tag_cloud,依然无效。。。。。。。。

  10. 冰古 says:

    你试试删除functions.php里的相关代码,然后下载安装这个插件看看行不行。
    我的这个blog,刚用上也是可以的。
    如果还是不行的话,可能是别的什么插件有冲突吧,你可以先把所有插件停用下,然后激活color cloud插件,如果出现彩色标签了,说明的确是别的插件有冲突了,然后一个个插件重新激活,如果某个插件激活后彩色消失,则应该是这个插件跟color cloud插件有冲突了。
    如果一开始就不出现彩色标签,那……暂时想不出是什么原因了。

  11. Ariagle says:

    十分感谢你的耐心帮助。装了这插件后又成功了orz
    不知可否选择颜色……(贪心不知足=3=

  12. [...] 来自http://wanwp.com/tips-tricks/howto-make-a-colorful-tag-cloud/ 效果请看我的标签云 [...]

  13. heve says:

    看看先吧

  14. [...] 五彩缤纷的标签云图具体实现 标签: wordpress, 创意 [...]

  15. holianchao says:

    恩很不错的教程,不过不知道对网站的速度有多少影响,试了一下,没有成功,不过也不打算用了,还是简单点好! 呵呵

  16. solar says:

    谢谢,我用上了,一切正常。有一个问题,就是颜色如何自定义啊?

  17. [...] 制作五彩缤纷的标签云图 | 玩WordPress. Category: 未分类 You can follow any responses to this entry via RSS. You can leave a comment or trackback from your own site. [...]

  18. [...] 原文链接:http://wanwp.com/tips-tricks/howto-make-a-colorful-tag-cloud/ [...]

  19. Nimloth says:

    我按照你写的修改..结果博客HTTP500错误…不得不从服务器上把php下载下来恢复后上传覆盖才可以访问

  20. Nimloth says:

    我现在彩色标签云成功了…但是wp cumulus的字体突然变很大….怎么回事啊?

  21. Nimloth says:

    还有..博客的字体怎么样可以全部改成雅黑啊?

  22. lomo says:

    你好,我用了这个彩色标签云,感觉很不错,可是昨天升级2.8.4后,用这个方法已经没用了。请问该如何解决啊?

  23. lomo says:

    已经解决了,直接塞到functions.php里不知道死活不可以了,下了color cloud传上去启用,就解决了

  24. [...] Alex 的英文站那里看来的,直接拿来主义和大家分享之。PS:貌似是冰古兄弟原创。后台编辑 主题 的 functions.php , 输入以下代码function colorCloud($text) { $text = [...]

  25. hisnake says:

    彩色标签云是好看,但是我今天装上之后发现和3d的那个球形标签云冲突 原来3d标签是正常的 按照你的方法实现彩色标签之后3d的变得文字变得很大。。。

  26. [...] 这样就可以实现彩色标签云,如果仍然有疑问,可以到作者那里查看 [...]

  27. [...] 对于Tags(标签),我的理解是Tags既是分类系统的细化,也可以是一种关键词的标记。对于我来说,每次访问别人的博客,一般都是从Tags开始寻找有什么好看的,因为博客的主人一般都会对自己的文章定位并认真筛选其Log的主要信息。很多博客都会在侧栏或新建一个页面显示标签云,就我来说更喜欢比较另类地去显示标签云。在开博的几个月里我也陆续用了其中的几种方法实现,第一种大家应该比较熟悉的3D效果的可视化Flash标签云(传送门),显示的效果很cool,但是Tags多了以后载入会比较慢,后来我又采用了彩色标签云(继续传送门),既使Tags显示另类,而且又不影响载入的速度。而现在,我则是用Tags Wall的显示,这是在一位牛人的博客上看到了,很喜欢于是就用上了,其博客在这里(又是传送门),在这里分享一下:首先下载Tags Wall插件(点击下载),上传-激活,然后在主题模板要显示Tags Wall Flash的地方插入以下代码: <?php wp_flash_tags(”600″,”600″,”0xFFFFFF”,”0×000000″); ?> [...]

  28. softboy says:

    谢谢站长的分享,刚试下了下,成功,感谢!

  29. [...] 此处参考自:http://wanwp.com/tips-tricks/howto-make-a-colorful-tag-cloud/ 有了这些也可以很容易做出一个标签云的页面。 [...]

Leave a Reply

gravatar