不用插件实现彩色云标签云

         不知今天过来的朋友有没有发现右边云标签栏有什么不一样,是不是颜色变鲜艳了哈。只是添加了一些代码,不用插件实现 WordPress 的彩色云标签。其实很早就想弄个彩色标签云来给博客添点色彩,试了很多方法,但老是出错,没办法,这事一直搁到现在,今天总算是解决了。

        大家知道默认的标签全部是一个颜色,只是大小不一样,虽说可以用 Simple Tags 之类的插件来实现,可是那个插件不会用哈,调用之后就什么都不显示,以后再折腾……网上找到一个不用任何插件就能显示彩色标签云的方法。过程是我找了很多类似代码,反复试验,只有以下代码适用:

function colorCloud($text) {
$text = preg_replace_callback(‘||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 “”;
}
add_filter(‘wp_tag_cloud’, ‘colorCloud’, 1);

在后台编辑 主题 的 functions.php , 输入以上代码,放在<?php ……………… ?>之间哈~

可以看到,颜色是随机的,可以自行修改 $color = dechex(rand(0,16777215)); 这行来修改范围,

标签云用到的函数是<?php wp_tag_cloud(); ?>,有9个参数.

smallest:最小字体,默认为8
largest:最大字体,默认为22
unit:字符大小的单位(例如pt,px,em),默认为pt
number:显示标签个数(为0时显示所有标签),默认为45
format:显示方式,flat(默认,以空格分隔)或者list(
orderby:按何值排序,name(默认)或者count
order:排序方式,ASC为升序(默认),DESC为降序,RAND为随机
exclude,include:要排除或都包含的标签

以上各参数以”&”符号连接.不必都填,不填的参数以默认值为准.
然后在侧边栏 sidebar.php 里调用如下代码:

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

说明下:8 是最小的 tag 的字体大小也就是用的最少的 tag,24 是最大的,用的最多的,50 是 tag 的数目,都可以自行修改。

最后,需要的童鞋们copy下代码慢慢折腾吧~

评论

《 “不用插件实现彩色云标签云” 》 有 18 条评论

  1. 小杜博客 的头像

    嗯这个方法好,不用插件,我的用插件的不好~

    1. hesiway 的头像
      hesiway

      @小杜博客, 我是不会用插件才改的,纠结了好久~

  2. 岸边 的头像

    感觉有点花,不太协调 :微笑:

    1. hesiway 的头像
      hesiway

      @岸边, 很喜欢彩色的,本来这主题就挺单调的,加点色彩。只是目前这随机颜色范围太广,不好看,我去改成一个色系,嘿嘿

  3. 丕子 的头像

    嗯 当初也是这个干的 哈哈

    1. hesiway 的头像
      hesiway

      @丕子, :嘻: 现在呢?

  4. 未 的头像

    我现在直接没有开启云标签哦

    1. hesiway 的头像
      hesiway

      @未, 恩恩~去看了~

  5. Tony 的头像

    变彩色了 感觉更好看了!

    1. hesiway 的头像
      hesiway

      @Tony, 是啊,不然主题颜色太单调了~

  6. 东奇博客传播 的头像

    我正在考虑使用。

    1. hesiway 的头像
      hesiway

      @东奇博客传播, 不错哦~

  7. 哲哲 的头像

    八亿空间哲哲来访了,主题很喜欢

    1. hesiway 的头像
      hesiway

      @哲哲, :嘻: 我还怕我的太单调呢~嘿嘿

  8. merror 的头像

    这个 方便查看。

    1. hesiway 的头像
      hesiway

      @merror, 我忘了也会到这里看看设置,哈哈
      ~

  9. 灵亦 的头像

    来学习了

    1. hesiway 的头像
      hesiway

      @灵亦, 互相学习哈
      ~