wordpress标签云优化

目前wordpress5.8版本,系统默认的小工具标签云,效果也算可以,如下图中右下角所示:

这种标签云,系统默认会有字体大小的变化,字体越大代表该标签对应的文章越多,但该字体大小不会无限放大或缩小,有一个值的范围,具体可以测试。

鸿硕今天要做的就是给这些标签云中的标签添加彩色的背景,使用颜色来突出标签的显示效果。

常用的代码,直接在主题的functions.php中添加如下代码即可实现圆角彩色的标签云:

//圆角背景色标签
function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$colors = array('F99','C9C','F96','6CC','6C9','37A7FF','B0D686','E6CC6E');
$color=$colors[dechex(rand(0,7))];
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$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);
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);
————————————————
原文链接:https://blog.csdn.net/zcp528/article/details/108513751

效果如下图:

可以看出,上图实现了彩色标签云的效果,但是,这种效果没有显示出标签项字体大小的变化,鸿硕即想要这种彩色背景效果,又想使用字体大小的变化,怎么办呢?

鸿硕觉得既然wordpress核心代码已经集成了标签云,咱就直接修改CSS得了,把css代码添加到您的主题style.css文件或者能生效的其它css文件中即可,代码如下:

.tagcloud{padding: 12px 13px 10px 15px;}
.tagcloud a:nth-child(9n){background-color: #4A4A4A;}
.tagcloud a:nth-child(9n+1){background-color: #428BCA;}
.tagcloud a:nth-child(9n+2){background-color: #5CB85C;}
.tagcloud a:nth-child(9n+3){background-color: #D9534F;}
.tagcloud a:nth-child(9n+4){background-color: #567E95;}
.tagcloud a:nth-child(9n+5){background-color: #B433FF;}
.tagcloud a:nth-child(9n+6){background-color: #00ABA9;}
.tagcloud a:nth-child(9n+7){background-color: #B37333;}
.tagcloud a:nth-child(9n+8){background-color: #FF6600;}
.tagcloud a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 3px 6px;/*line-height: 21px*/line-height: normal;border-radius: 3px;}
.tagcloud a:hover{opacity: 1;filter:alpha(opacity=100);transition: transform .4s;transform: scale(1.1);}
实现的效果如下两张图右下角所示:
标签云的效果暂时实现到这里,待以后再追加更新。
更多关于 WordPress 优化及问题交流可以添加 QQ 群:721808708

给TA打赏
共{{data.count}}人
人已打赏
css3建站知识

CSS transition属性

2021-8-10 21:12:06

IT百科wordpress插件wordpress教程

时间轴的实现方法

2021-9-10 15:52:04

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索