不用任何插件实现 WordPress 的彩色标签云

Posted in WordPresson 2009/8/28 | 99 Comments

侧边栏的标签云（Tag Cloud）一直是 WordPress 2.3+ 以后的内置功能，一般直接调用函数 wp_tag_cloud 或者在 Widgets 里开启即可，但是默认的全部是一个颜色，只是大小不一样，很是不顺眼，虽然可以用 Simple Tags 之类的插件，但是总感觉不爽，所以我介绍一个不用任何插件就能显示彩色标签云的方法。

方法是 Alex 的英文站那里看来的，直接拿来主义和大家分享之。

PS：貌似是冰古兄弟原创。

后台编辑主题的 functions.php , 输入以下代码

functioncolorCloud($text) {
$text=preg_replace_callback('|<a (.+?)>|i','colorCloudCallback',$text); 
return$text; 
}
functioncolorCloudCallback($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);

可以看到，颜色是随机的，可以自行修改 $color = dechex(rand(0,16777215)); 这行来修改范围，这样就很炫耀哈哈。

然后在侧边栏 sidebar.php 里调用如下代码：

<?php wp_tag_cloud('smallest=8&largest=24&number=50'); ?> 

即可，8 是最小的 tag 的字体大小（用的最少的 tag），24 是最大的（用的最多的 tag），50 是 tag 的数目，可以自行修改。

假如你是个主题高手，直接集成在主题里那一定很帅！

效果可以看我首页右边的侧边栏：

PS：我坚决不用代码高亮插件，直接 HTML 能搞定的东西，何必用插件呢，推荐网站发芽网，有很多种样式，直接 HTML 输出代码，代码高亮从此告别插件！

相关信息

本文短网址：http://aa.cx/q ，如果你觉得本文很可爱，请使用 Twitter 来分享本文：Tweet This
收藏+分享: Delicious / Live Favorites / Google书签 / 百度搜藏 / QQ书签 / 饭否 / 豆瓣 / Twitter

已有99条评论

章鱼发表于2009年08月28日13:26
可怜啊
暑假的最后一个沙发
[回复]
Showfom 回复:
August 28th, 2009 at 13:27
@章鱼, 终于上首页的沙发榜了哈哈
[回复]
章鱼回复:
August 28th, 2009 at 13:29
@Showfom,
[回复]
WDragon 发表于2009年08月28日13:27
……
[回复]
Showfom 回复:
August 28th, 2009 at 13:36
@WDragon, 点你个头……
[回复]
WDragon 回复:
August 28th, 2009 at 13:38
@Showfom, 啥啊，我只是绝望的发现居然比别人晚了几秒钟到……
[回复]
Showfom 回复:
August 28th, 2009 at 13:39
@WDragon, 嗯嗯速度速度问题
[回复]
Rexavin 发表于2009年08月28日13:28
沙发没了。。。
[回复]
Showfom 回复:
August 28th, 2009 at 13:36
@Rexavin, 来晚了吧……
[回复]
久酷发表于2009年08月28日13:28
标签功能 .........从来没用过............
[回复]
Showfom 回复:
August 28th, 2009 at 13:36
@久酷, 好看而已
[回复]
ELL 发表于2009年08月28日13:30
不错
[回复]
Showfom 回复:
August 28th, 2009 at 13:36
@ELL, 你看得懂么…………
[回复]
ELL 回复:
August 28th, 2009 at 13:41
@Showfom, 我也会 learn 的好哇～～在说～又不是写代码～复制粘贴这事我还是很会弄地~~
[回复]
Youwei 回复:
August 28th, 2009 at 14:25
@ELL, 我插这楼了，来晚了
[回复]
Leeiio 发表于2009年08月28日13:33
那么我也拿来主义了~
[回复]
Showfom 回复:
August 28th, 2009 at 13:36
@Leeiio, 很炫耀而且不会有很多次数据库查询的……嗯
[回复]
Leeiio 回复:
August 28th, 2009 at 13:40
@Showfom, 其实很多时候，我只是想要某个插件的某一个功能就够了，所以我喜欢剥离或者小函数
[回复]
Showfom 回复:
August 28th, 2009 at 13:41
@Leeiio, 志同道合！果然是我的狐朋狗友哇，我也是这样，全部剥离，集成到自己的插件或者主题，哇！
[回复]
maple's sky 发表于2009年08月28日13:35
参考了....
[回复]
Showfom 回复:
August 28th, 2009 at 13:37
@maple's sky, 欢迎以后常来哈哈
[回复]
bolo 发表于2009年08月28日13:36
发芽网是个好网站啊,怎么不早告诉大家?
[回复]
Showfom 回复:
August 28th, 2009 at 13:38
@bolo, 我一直在测试发芽和geshi.org 发现还是发芽网好，所以就推荐了。
[回复]
zylu 发表于2009年08月28日13:38
。
[回复]
Showfom 回复:
August 28th, 2009 at 13:40
@zylu, 姐你又看不懂的嘎嘎说几句废话也好嘛，别只发个表情
[回复]
zylu 回复:
August 28th, 2009 at 13:47
@Showfom, html有什么好说的额。。
[回复]
Showfom 回复:
August 28th, 2009 at 14:14
@zylu, 这是 php
[回复]
zylu 回复:
August 28th, 2009 at 14:48
@Showfom, 哼
[回复]
任平生发表于2009年08月28日13:44
你也用发芽网啊
[回复]
Showfom 回复:
August 28th, 2009 at 13:56
@任平生, 这个直接HTML输出代码多方便
[回复]
LAONB 发表于2009年08月28日13:45
不错，看出你最近开始研究WP的源码了，还有更多的原生功能可以开发呢
[回复]
Showfom 回复:
August 28th, 2009 at 13:57
@LAONB, 我是拿来主义，而已……
[回复]
hiro 发表于2009年08月28日13:49
这个貌似不难，主要就是个每个tag的a标签加一个color的style，而这个color是用随机函数生成的即可。这样每次访问的颜色都不一样！
[回复]
Showfom 回复:
August 28th, 2009 at 13:56
@hiro, 对的，就是这个道理。
[回复]
zrqx008 发表于2009年08月28日14:00
反正我是用不上
[回复]
Showfom 回复:
August 28th, 2009 at 14:14
@zrqx008, 标签多了以后再用呗哈哈
[回复]
zrqx008 回复:
August 28th, 2009 at 21:35
@Showfom,
不再注重标签栏
[回复]
辐射鱼发表于2009年08月28日14:30
replace 不错的说，代码高亮不止是高亮，还有防止代码转义
[回复]
Showfom 回复:
August 28th, 2009 at 14:32
@辐射鱼, 高亮的不是代码，是寂寞。
[回复]
辐射鱼回复:
August 28th, 2009 at 14:35
@Showfom, 哥卖的不是寂寞，是主机
[回复]
Showfom 回复:
August 28th, 2009 at 14:38
@辐射鱼, 你卖的是春……
[回复]
shamas 发表于2009年08月28日14:31
我也用不上啊，从来没弄过标签云
[回复]
Showfom 回复:
August 28th, 2009 at 14:54
@shamas, 标签多了以后很好看哈哈
[回复]
Johnny 发表于2009年08月28日15:06
楼好高。。我头晕
[回复]
Showfom 回复:
August 28th, 2009 at 15:09
@Johnny, 不早点来的后果哈哈
[回复]
junjun 发表于2009年08月28日15:22
云标签看起来太乱了
[回复]
Showfom 回复:
August 28th, 2009 at 15:35
@junjun, 哈哈
[回复]
zwwooooo 发表于2009年08月28日15:27
zwwooooo大叫: 很好，谢谢分享！
zwwooooo小叫: 能不能实现自定义几种颜色？因为随机的话很多颜色很晃眼
[回复]
Showfom 回复:
August 28th, 2009 at 15:35
@zwwooooo, 自己研究去…… 嘎嘎
[回复]
zwwooooo 回复:
August 28th, 2009 at 17:09
@Showfom, 这个……那个……一个……二个……三个……没想到拿不到
[回复]
老饕发表于2009年08月28日15:39
~~现在把标签云取掉了，感觉没什么用
[回复]
Showfom 回复:
August 28th, 2009 at 15:42
@老饕, 好看而已……
[回复]
MuMu'S 发表于2009年08月28日16:09
这个好，这在为标签云犯愁呢。
[回复]
吖Bee 发表于2009年08月28日16:12
底下这广告不错~
[回复]
MuMu'S 回复:
August 28th, 2009 at 16:41
@吖Bee, 就是，再加个Google提供的广告字样。
[回复]
whisperer 发表于2009年08月28日17:50
彩色的看着不乱呀
[回复]
whisperer 发表于2009年08月28日17:54
囧你们都用发芽....
[回复]
nooidea 发表于2009年08月28日18:33
帮忙测试服务器，速度还可以～～
[回复]
Blinux 发表于2009年08月28日23:51
能不用插件还是不用的好，省资源
[回复]
九站发表于2009年08月29日09:12
不用插件是好，不过许多人弄不来啊。请教一下dechex()是什么方法？
[回复]
Showfom 回复:
August 29th, 2009 at 11:36
@九站, 指定需要执行转换的十进制数值对象 http://www.wljcz.com/html/PHPjiaocheng/phphanshu/2009/0715/300.html
[回复]
万戈发表于2009年08月29日09:24
顶最后的PS，我也不用高亮插件！
[回复]
万戈发表于2009年08月29日09:26
看到这个标题，你知道我的第一反应是什么吗？
我以为你想用纯手工HTML打造彩色标签！我的标签就是纯HTML打造，我猜你也会这么干的
[回复]
Showfom 回复:
August 29th, 2009 at 11:35
@万戈, 那多麻烦……囧
[回复]
麦子发表于2009年08月29日11:44
暂时用不上，我的主题不适合……收藏了！
小帅锅，感谢你的优化思路……嘿嘿
[回复]
砼砼发表于2009年08月29日15:07
不错，收了
[回复]
西风发表于2009年08月29日18:23
强吟啊
[回复]
爱图片发表于2009年08月29日20:32
我记得我的彩色，似乎是插件实现的。侧边栏能运行php代码，好像是需要启用插件支持？
[回复]
Showfom 回复:
August 29th, 2009 at 20:34
@爱图片, 直接在sidebar.php里放入代码呗……
[回复]
蓝冰发表于2009年08月30日10:34
我打地铺吧。
以后你把评论倒挂吧，哈哈！
[回复]
feicun 发表于2009年08月30日17:48
好久没来了，打听个事……麻烦给推荐个国内的主机商，纯静态空间，我要把博客上的图片从picasa转到那里去。只要稳定，流量够用就行，价格也要合适……
[回复]
Showfom 回复:
August 30th, 2009 at 21:12
@feicun, 我现在用易联的 Elinkhost
[回复]
aunsen 发表于2009年08月31日16:01
哪有你帅哦
[回复]
Showfom 回复:
August 31st, 2009 at 19:26
@aunsen, 确实我最帅~
[回复]
皇冠平台发表于2009年09月1日12:31
很厉害，且还是个学生啊
[回复]
qidian 发表于2009年09月1日15:09
世道乱了
[回复]
老时发表于2009年09月2日08:29

[回复]
Eden 发表于2009年09月2日17:49
哈哈，终于找到了，我设法也弄一个，不错。
[回复]
小猪vs蛋挞发表于2009年09月3日14:36
这个可以有！！！！
[回复]
Hobo 发表于2009年09月3日20:13
不错呵呵，，不过还是感觉用单色的标签云好，当然了，某些博客的风格应该适合彩色的吧
[回复]
Joya 发表于2009年09月3日21:54
楼盖得差不多了，SF该发新内容了。
[回复]
冰古发表于2009年09月10日00:46
这东西貌似是我折腾出来的
http://wanwp.com/tips-tricks/howto-make-a-colorful-tag-cloud/
[回复]
Showfom 回复:
September 10th, 2009 at 09:53
@冰古, 好给你个反向链接
[回复]
冰古回复:
September 10th, 2009 at 11:37
@Showfom, 谢谢反链。
BTW，什么时候换的域名，帅！
[回复]
Showfom 回复:
September 10th, 2009 at 11:45
@冰古, 刚换的被你发现了哈哈
[回复]
冰古回复:
September 10th, 2009 at 12:46
@Showfom, 我说嘛，昨天都好像没这么帅
[回复]
Maxsailor 发表于2009年09月12日00:02
嗯！刚好需要，就用上了，挺不错的。
[回复]
365hope 发表于2009年09月14日12:19
非常好哇，看来这个招数比起使用什么插件要好多啦！
[回复]
keke 发表于2009年09月15日21:20
正是我要找的内容，谢谢。
[回复]
胡一刀发表于2009年09月19日12:30
oye ，设置成功，谢啦!!☆⌒(*＾-゜)v
[回复]
vaeye 发表于2009年09月22日12:56
收藏，致谢~~
[回复]
JuJue 发表于2009年12月8日05:05
functions.php的某行报错, 明儿再试.
兽兽真能干 ^^
[回复]
truant 发表于2010年01月21日15:29
每次在function.php里改东西总会报错,好在最后能够错误的成功.侧栏的代码没改,自动就变成彩色的了,不知道什么.
[回复]
卜卜口の发表于2010年01月23日14:06
进来之前买以为是通过javascript识别font-size: 的大小然后给它添加color...
[回复]

Search