WordPress 带热门标签的标签云

具体效果就见上图，于传统标签云不同的地方就在于这里多了一个H，原理也非常简单，只要该标签下的文章数大于一定数目就会输出hot 标签，因为文章数是直接储存在表单里的，所以可以直接拿出去，不需要做额外的查询。

实现方法

下面的代码加到functions.php中

/**
* Display tags width hot tag.
*
* @since Pure 1.0
*/
function get_hot_tag_list( $num = null , $hot = null ){
$num = $num ? $num : 14;
$hot = $hot ? $hot : 5;
$output = ‘<div class=”tag-items”>’;
$tags = get_tags(array(“number” => $num,
“order” => “DESC”
));
foreach($tags as $tag){
$count = intval( $tag->count );
$name = apply_filters( ‘the_title’, $tag->name );
$class = ( $count > $hot ) ? ‘tag-item hot’ : ‘tag-item’;
$output .= ‘<a href=”‘. attribute_escape( get_tag_link( $tag->term_id ) ) .’” class=”‘. $class .’” title=”浏览和’ . $name . ‘有关的文章”><span>’ . $name . ‘</span></a>’;

}
$output .= ‘</div>’;
return $output;

}

调用方法

在你想调用的地方使用如下代码即可

<?php echo get_hot_tag_list();?>

函数有两个参数，第一个是先是数量，第二个是热门文章数量

参考CSS样式

.tag-items{padding:30px 0;}
.tag-item{display:inline-block;font-size:14px;margin:0 5px 5px 0;padding:1px 8px;background-color:#f5f5f5;border-radius:2px;position:relative;overflow:hidden}
.tag-item span{position:relative}
.tag-item:before{position:absolute;top:0;left:0;right:0;bottom:0;content:””;background-color:#fff;transition:0.5s;transform:translateY(-100%);-webkit-transform:translateY(-100%);-webkit-transform:0.5s}
.tag-item:hover:before{transform:translateY(0);-webkit-transform:translateY(0)}
.tag-item.hot span:after{content:”H”;background-color:#ff5e52;color:#fff;display:inline-block;padding:2px;line-height:1;font-size:12px;margin-left:3px;border-radius:2px}