资源福利站
精品百度网盘资源博客

Wordpress无插件实现主题彩色标签云的两种方法 +附优化教程

“百度云盘下载不限速-你要的软件都在这”

如果着急给自己的主体添加WordPress彩色标签云,可以直接跳过前面的技术概述,直接跳转到最后php实现 WordPress彩色标签云的方法

从wordpress 2.3版本开始,使用wp_tag_cloud函数来调用文章标签显示列表,WP博主可以轻易地通过设置wp_tag_cloud函数的标签参数属性,使标签实现多样化显示。相信大家都见过各种各样色彩纷杂的标签云吧,但是我们以往都是做的标签字体颜色,今天给大家分享如何自定义标签的背景色。

纯代码实现WordPress 彩色标签云

Σ实现方法:

如果我们想实现多彩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>
  1. smallest=12定义标签云最小字体;
  2. largest=12定义标签云最大字体;
  3. number=45定义需要显示的数量;
  4. order=DESC定义标签云的排序方式;

我们在使用过程中我们如果不需要随机字体大小的话可以把smallestlargest的值设置为相同的即可

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
赞(2) 打赏
未经允许不得转载:木木资源博 » Wordpress无插件实现主题彩色标签云的两种方法 +附优化教程
分享到: 更多 (0)
##分享一个宝妈兼职项目,坚持半年,你也可以每月躺赚10000+#
##分享一个宝妈兼职项目,坚持半年,你也可以每月躺赚10000+##

评论 抢沙发

有人回复时邮件通知我


  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

感谢您的打赏,本博会更加努力

支付宝扫一扫打赏

微信扫一扫打赏