tagcloud-demo

具體效果就見上圖,於傳統標籤雲不同的地方就在於這裡多了一個 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}