wordpress彩色标签云如何实现-背景彩色与文字彩色

浏览很多网站的时候发现彩色的标签云很漂亮,也想给喵呜阁加成这样的,于是就去死命的百度,终于百度出了方法,整理在一起,实现文字彩色标签云或者背景彩色标签云的方法!本来想搞个3D的标签云,但是考虑到对SEO不利,所以还是最后喵呜阁就选择了背景彩色的标签云展示!进入正题:

wordpress彩色标签云 文字彩色

这个在百度上的比较多,通过wordpress无插件实现彩色标签云的方法,并且字体大小随标签下话题个人变化的方法:在当前主题目录下面的functions.php里面加入以下代码:

  1. function colorCloud($text) { // 实现彩色标签云  
  2.         $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
  3.         return $text;
  4.     }
  5.     function colorCloudCallback($matches) {
  6.         $text = $matches[1];
  7.         $color = dechex(rand(0,16777215));
  8.         $pattern = '/style=(\'|\")(.*)(\'|\")/i';   
  9.         $text = preg_replace($pattern, "style=\"color:#{$color};$2;\""$text);
  10.         return "<a $text>";
  11.     }
  12.     add_filter('wp_tag_cloud', 'colorCloud', 1);

在边栏中的调取方法,添加如下代码(具体参数自己修改,smallest表示最小字体,largest表示最大字体,unit表示字体单位pt/px,number表示调取标签的数量):

  1. <?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=20');?>

上述实现彩色标签云的代码相信大家都知道,接下来是废好大劲才百度出来的如何实现(圆角)彩色背景的标签云,有背景的标签看上去是不是更加有“云”的意思呢,嘿,废话不多,看看具体如何实现!

原理与添加彩色标签云相似,在当前主题目录下面的functions.php里面加入以下代码:

  1. //圆角背景色标签  
  2. function colorCloud($text) {
  3. $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
  4. return $text;
  5. }
  6. function colorCloudCallback($matches) {
  7. $text = $matches[1];
  8. $color = dechex(rand(0,16777215));
  9. $pattern = '/style=(\'|\")(.*)(\'|\")/i';  
  10. $text = preg_replace($pattern, "style=\"display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\""$text);
  11. $pattern = '/style=(\'|\")(.*)(\'|\")/i';  
  12. return "<a $text>";
  13. }
  14. add_filter('wp_tag_cloud', 'colorCloud', 1);

上述方法是最普遍的,不过有一个弊端,网页一般是白色背景,如果随机颜色是白色的,那么标签看上去就是一个空白,我们可以通过定义颜色范围来决定标签颜色(这个方法可以适用于前面的彩色标签的方法,避免生成白色字体的标签链接!):

  1. //将第一段中的这段代码删除  
  2. $color = dechex(rand(0,16777215));
  3. //替换成一下代码,颜色范围可自定义  
  4. $colors = array('F99','C9C','F96','6CC','6C9','37A7FF','B0D686','E6CC6E');
  5. $color=$colors[dechex(rand(0,7))];

实际效果大家可以查看喵呜阁的标签云展示,是不是比一般的标签云更有档次呢!呜阁主亲测有效!当然标签云的其他细节上的CCS还需要你自己调整了!