重庆小猴建站工作室:专业企业网站网站美工、网站设计、SEO优化、网站运营等服务。QQ:570521548服务中心 | 建站流程 | 网站地图

Wordpress彩色TAG标签云调用

2021-10-18小猴建站 阅读()相关主题:

博客网站比较常见的TAG标签是利于搜素引擎抓取的内容整合,Wordpress自带的TAG标签函数是

<?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?>

代码注释:

   smallest表示标签的最小字号
   largest表示最大字号
   unit=px表示字体使用像素单位
   number=0表示显示所有标签,如果为40,表示显示40个
   orderby=count表示按照标签所关联的文章数来排列
   order=DESC表示降序排序(ASC表示升序排序,DESC表示降序排序)

但函数调出来的都是统一的内容,设计成彩色的TAG标签还是得靠CSS样式,下面提供修改方案。

/*
 * 彩色标签
 */
function colorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|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 "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

观察前端知道每个<a>标签都有不同的class,根据这些class写CSS样式即可。

CSS样式

<style type="text/css">
.tag-link{display:inline-block;}
.tag-link-1{background:#c00;}
.tag-link-2{background:#f96;}
</style>