/文章

WordPress标签云终极美化【带热门标签】

文章目录

好吧,非常不好意思的又转载了一篇大发的文章,

在此,

粗字表示下那啥的心情,

但是大发的文章值得转载啊 

 

WordPress 标签云 – 带热门标签

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

demo

实现方法

下面的代码加到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;fo
nt-size:12px;margin-left:3px;border-radius:2px}

本文转载自大发博客,本文链接:http://fatesinger.com/74834 ,转载请标注来处,尊重作者,谢谢

原文链接:,转发请注明来源!
2 0

发表评论

要发表评论,您必须先