正如蔡宝坚的标签存档一样，你进去之后可能发现不同于一般的只是列出所有的标签的页面，它会显示该标签下面最新的一篇文章。
你可以复制page.php一份，重命名为page-tags，然后在正文<?php the_content(); ?>下面添加以下代码：
//Code From qdkfweb.cn
<ul class="tag-clouds clearfix">
<?php $tags_list = get_tags('orderby=count&order=DESC&showposts=30');
if ($tags_list) {
foreach($tags_list as $tag) {
echo '<li><a class="tags tags-'. $tag->term_id .'" href="'.get_tag_link($tag).'">'. $tag->name .'</a><strong>x '. $tag->count .'</strong><p class="tag-posts">';
$posts = get_posts( "tag_id=". $tag->term_id ."&numberposts=1" );
if( $posts ){
foreach( $posts as $post ) {
setup_postdata( $post );
echo '<a href="'.get_permalink().'">'.get_the_title().'</a></p><em>'.get_the_time('Y-m-d').'</em>';
}
}
echo '</li>';
}
}
wp_reset_query();
?>
</ul>
在页面中添加以下CSS代码：
/* tag-clouds */
.contents{margin-right:0;}
.tag-clouds li{float:left;width:25%;margin-bottom:12px;padding-bottom:2px;height:76px;border-bottom:1px dotted #ddd;}
.tag-clouds li .tags{background-color:#019DC8;border-bottom:1px solid #7F9FB6;border-right:1px solid #97b1c4;color:#fff;padding:2px 5px;margin-right:4px;display:inline-block;border-radius:2px}
.tag-clouds li .tags:hover{background-color:#4982aa;color:#fff;border-bottom-color:#325975;border-right-color:#477291}
.tag-clouds strong{color:#666;margin-left:2px;}
.tag-clouds p{overflow:hidden;height:18px;padding:8px 20px 0 0;}
.tag-clouds em{color:#bbb;display:block;font-style:normal}
@media screen and (max-width:480px){
.tag-clouds li{width:50%; height:auto;}
.tag-clouds em{display:none;}
.tag-clouds p{display:none;}
}
然后再新建页面选择添加的页面。
如果你有需要定制Wordpress主题，可以联系我。
