Wordpress无插件实现主题彩色标签云的两种方法 +附优化教程
如果着急给自己的主体添加WordPress彩色标签云,可以直接跳过前面的技术概述,直接跳转到最后php实现 WordPress彩色标签云的方法
从wordpress 2.3版本开始,使用wp_tag_cloud函数来调用文章标签显示列表,WP博主可以轻易地通过设置wp_tag_cloud函数的标签参数属性,使标签实现多样化显示。相信大家都见过各种各样色彩纷杂的标签云吧,但是我们以往都是做的标签字体颜色,今天给大家分享如何自定义标签的背景色。
Σ实现方法:
如果我们想实现多彩WP标签云背景的话方法很多,js、css、php都可以实现,今天我们介绍css和php这两种方法:
css实现多彩标签云背景色
这种方法是通过css的:nth-child
伪类来实现的。
评价:可自定义每一个标签特定的背景色、设置复杂、没有随机
php实现随机标签云背景色
这种方法是通过php关联wp的内置wp_tag_cloud
函数来调整WP默认参数来实现随机标签云背景色的,使用灵活,可自定义颜色范围。
评价:使用方便、设置简单、随机显示
看完了这两种方法的介绍,您可以根据自己网站的实际情况选择适合自己的方法,下面我就把两种方法的实现步骤写出来方便大家使用。
如何调用标签云
生成标签云我们可以使用WP的内置函数wp_tag_cloud($args)用法如下:
<aside class="tags"><?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?></aside>
- smallest=12定义标签云最小字体;
- largest=12定义标签云最大字体;
- number=45定义需要显示的数量;
- order=DESC定义标签云的排序方式;
我们在使用过程中我们如果不需要随机字体大小的话可以把smallest
和largest
的值设置为相同的即可
CSS实现彩色背景标签云方法
我们先来看看WP生成的标签的html格式:
<aside class="tags">
<a href="http://www.chenxingweb.com/wp-pic/tag/chagnfa/">长发美女</a>
<a href="http://www.chenxingweb.com/wp-pic/tag/xiaohua/">校花美女</a>
<a href="http://www.chenxingweb.com/wp-pic/tag/keting/">客厅</a>
</aside>
有了上面的格式我们可以得出,用css实现标签云的多彩背景是通过控制tags选择器下面的a标签实现了,那么结合前面提到的:nth-child
伪类就可以实现这个功能了。
实现代码
/* 定义 标签云a标签的通用属性*/
.tags a{color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}
/* 使用nth-child定义 标签云每个a标签的独立属性*/
.tags a:nth-child(9n){background-color: #4A4A4A;}
.tags a:nth-child(9n+1){background-color: #428BCA;}
.tags a:nth-child(9n+2){background-color: #5CB85C;}
.tags a:nth-child(9n+3){background-color: #D9534F;}
/* 定义标签云鼠标经过a标签的属性*/
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}
代码说明:
.tags a:nth-child(9n)
就是我们定义WP标签云中第一个标签的背景色,那么.tags a:nth-child(9n+2)
就是定义第二个标签的背景色,依次类推。
所以呢我们得出一个结论也就是:我们生成了多少个标签就要定义多少次.tags a:nth-child(9n+n)
属性,灵活度降低。
php实现彩色背景标签云方法
这种方法相对简单了很多,就是通过一段php控制WP在生成标签云时使用什么样的格式具体看代码:
/* 彩色静态标签云 Color Tag Cloud
/* -------------------------------- */
function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
$text=preg_replace('/<a /','<a ',$text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
//这里定义我们背景色的范围,如果不想设置背景色的输出范围我们可以使用
//$color = dechex(rand(0,16777215));从所有颜色中随机出一个
$a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');
$co = array_rand($a,2);
$color = $a[$co[0]];
//随机颜色代码结束,下面开始吧颜色赋值给每个标签生成背景色
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$text = preg_replace($pattern, "style=\"background:#{$color};\"", $text);
return "<a $text>";
}
//把php代码挂载到wp_tag_cloud钩子上
add_filter('wp_tag_cloud', 'colorCloud', 1);
通过把上面的代码添加到functions.php文件中我们就简单的实现了WP多彩背景云标签的功能了,赶紧给自己也设置一个吧。
本博彩色标签云就是用的php方法实现,简单方便,但是添加完后你需要稍微调整一下样式代码,达到理想的状态:
审查元素,为你的.tagcloud a 标签增加修饰样式 比如 padding;2px; 增加内边距使字体缩进,调整一下字体大小,正价font-size属性,一般12-14px为宜
其中上面php方法中提到
$a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');
里面的颜色值可以根据自己爱好调整,具体参考下面图表:
HTML CSS颜色对照表
FFFFFF | #DDDDDD | #AAAAAA | #888888 | #666666 | #444444 | #000000 |
#FFB7DD | #FF88C2 | #FF44AA | #FF0088 | #C10066 | #A20055 | #8C0044 |
#FFCCCC | #FF8888 | #FF3333 | #FF0000 | #CC0000 | #AA0000 | #880000 |
#FFC8B4 | #FFA488 | #FF7744 | #FF5511 | #E63F00 | #C63300 | #A42D00 |
#FFDDAA | #FFBB66 | #FFAA33 | #FF8800 | #EE7700 | #CC6600 | #BB5500 |
#FFEE99 | #FFDD55 | #FFCC22 | #FFBB00 | #DDAA00 | #AA7700 | #886600 |
#FFFFBB | #FFFF77 | #FFFF33 | #FFFF00 | #EEEE00 | #BBBB00 | #888800 |
#EEFFBB | #DDFF77 | #CCFF33 | #BBFF00 | #99DD00 | #88AA00 | #668800 |
#CCFF99 | #BBFF66 | #99FF33 | #77FF00 | #66DD00 | #55AA00 | #227700 |
#99FF99 | #66FF66 | #33FF33 | #00FF00 | #00DD00 | #00AA00 | #008800 |
#BBFFEE | #77FFCC | #33FFAA | #00FF99 | #00DD77 | #00AA55 | #008844 |
#AAFFEE | #77FFEE | #33FFDD | #00FFCC | #00DDAA | #00AA88 | #008866 |
#99FFFF | #66FFFF | #33FFFF | #00FFFF | #00DDDD | #00AAAA | #008888 |
#CCEEFF | #77DDFF | #33CCFF | #00BBFF | #009FCC | #0088A8 | #007799 |
#CCDDFF | #99BBFF | #5599FF | #0066FF | #0044BB | #003C9D | #003377 |
#CCCCFF | #9999FF | #5555FF | #0000FF | #0000CC | #0000AA | #000088 |
#CCBBFF | #9F88FF | #7744FF | #5500FF | #4400CC | #2200AA | #220088 |
#D1BBFF | #B088FF | #9955FF | #7700FF | #5500DD | #4400B3 | #3A0088 |
#E8CCFF | #D28EFF | #B94FFF | #9900FF | #7700BB | #66009D | #550088 |
#F0BBFF | #E38EFF | #E93EFF | #CC00FF | #A500CC | #7A0099 | #660077 |
#FFB3FF | #FF77FF | #FF3EFF | #FF0 0FF | #CC00CC | #990099 | #770077 |
评论(1)
太好了,感觉遇到了一个知识宝库,为我干巴巴的博客增光添彩。顺便问一下评论区打字的彩色喷墨效果和底下的昵称、邮箱、网址有没有代码,求一下,本人小白,也想做一下