A-A+

纯css打造wordpress彩色标签云效果

2014年11月03日 wordpress技巧 暂无评论 阅读 140 views 次

wordpress自带的标签云效果一般,有时候和主题很不搭调。网上大部分wordpress彩色标签云教程是教在functions文件里加上如下函数段。但是颜色不能自己控制,出来的效果不尽人意,自带的色彩个人感觉十分难看。网上代码如下:

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);

今天八問猫博客教大家如何用css制作彩色标签云,两种效果先对比一下。后者完胜前者。

23

232

制作wordpress标签云的之前了解下一个css选择器:nth-child(n).
括号里的可以填数字,也可以填函数。比如n,2n,3n,2n+1。选择器匹配属于其父元素的第 N 个子元素。比如填1的话,就是定义该父元素里的第一个子元素的样式。2的话就是第二个。2n就是2的倍数个元素样式。这里给大家举得是wordpress小工具自带的标签云,但是原理一样。首先查看元素获得自带标签云的class名,如下:

sdf2

.tagcloud a{color:#fff}
.tagcloud a:nth-child(n){background: #83bf73;}
aside .widget .tagcloud a:nth-child(2n){background: #B37333}
aside .widget .tagcloud a:nth-child(3n){background: #428BCA}
aside .widget .tagcloud a:nth-child(5n){background:#B433FF}
aside .widget .tagcloud a:nth-child(4n){background:#ff7056}

颜色及背景完全可以自己定义,copy到style.css完事。无需functions函数即可打造wordpress彩色标签云,真是简单快捷。
PS:nth-child还可以运用到其他地方去,这个靠自己需要去添加了。

给我留言

Copyright © 杭州seo优化 保留所有权利.   Theme  Ality

用户登录

分享到: