简洁的tags聚合页面 - wordpress教程

网站月很多有趣的标签，给不同的文章打上他们的特色，进行一个简单的分类，这一次做一个单独的页面，将所有标签都展示出来吧。

• 代码来源：详情
• 参考：详情

在主题根目录下创建page-tags.php文件，将以下代码添加进page-tags.php文件中

<?php 
/**
 * Template name: 标签聚合页
 * Description:   一个简单有趣的标签页面
 */

get_header();

?>

<div class="container container-tags">
	<h1><?php the_title(); ?></h1>
	<div class="tagslist">
		<ul>
			<?php 
				$tags_count = 100;
				$tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
				foreach($tagslist as $tag) {
					echo '<li><a class="name" href="'.get_tag_link($tag).'">'. $tag->name .'</a><small>&times;'. $tag->count .'</small>'; 

					$posts = get_posts( "tag_id=". $tag->term_id ."&numberposts=1" );
					foreach( $posts as $post ) {
						setup_postdata( $post );
						echo '<p><a class="tit" href="'.get_permalink().'">'.get_the_title().'</a></p>';
					}

					echo '</li>';
				} 
		
			?>
		</ul>
	</div>
</div>

<style type="text/css">

/* CSS Document */

@media (min-width:768px){.container{width:auto}}
@media (min-width:992px){.container{width:auto}}
@media (min-width:1200px){.container{width:auto}}


.container-tags{}
.container-tags h1{font-size: 22px;margin: 0;text-align: center;margin-bottom: 15px;}
.tagslist{overflow: hidden;}
.tagslist ul{list-style-type: none;padding: 0;margin: 0 -2% 0 0;}
.tagslist li{float: left;width: 23%;margin-right: 2%;margin-bottom: 2%;padding: 15px;border: 1px solid #eee;background-color: #fff;border-radius: 2px;}
.tagslist li .name{background-color: #eee;display: inline-block;padding: 5px 10px 4px;font-size: 12px;color: #666;}
.tagslist li .name:hover{background-color: #444;color: #fff;}
.tagslist li:hover{border-color: #ccc;}
.tagslist li:hover .name{background-color: #444;color: #fff;}
.tagslist li small{margin-left: 10px;color: #bbb;}
.tagslist li p{margin: 10px 0 0;font-size: 12px;height: 17px;overflow: hidden;display: block;line-height: 1.5;}
.tagslist li .tit{color: #999;}
.tagslist li .tit:hover{color: #444;}

@media (max-width:1024px){
	.tagslist li{width: 31.3333333%;}
}
@media (max-width:768px){
	.tagslist li{width: 48%;}
}
@media (max-width:640px){
	.container-tags{padding: 15px;}
}
@media (max-width:544px){
	.container-tags h1{font-size: 14px;font-weight: bold;margin-bottom: 10px;}
	.tagslist li{padding: 10px;}
}s

</style>

<?php

get_footer();

在后台页面选项中新建页面，选择标签聚合页模板即可。

代码部署完成后可根据自己的主题进行外观适配，标签下的文本截取自第一篇使用该标签的文章标题。