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

1
<?php
2
/**
3
 * Template name: 标签聚合页
4
 * Description:   一个简单有趣的标签页面
5
 */
6

7
get_header();
8

9
?>
10

11
<div class="container container-tags">
12
  <h2><?php the_title(); ?></h2>
13
  <div class="tagslist">
14
    <ul>
15
      <?php
16
        $tags_count = 100;
17
        $tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
18
        foreach($tagslist as $tag) {
19
          echo '<li><a class="name" href="'.get_tag_link($tag).'">'. $tag->name .'</a><small>&times;'. $tag->count .'</small>';
20

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

27
          echo '</li>';
28
        }
29

30
      ?>
31
    </ul>
32
  </div>
33
</div>
34

35
<style type="text/css">
36

37
/* CSS Document */
38

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

43

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

58
@media (max-width:1024px){
59
  .tagslist li{width: 31.3333333%;}
60
}
61
@media (max-width:768px){
62
  .tagslist li{width: 48%;}
63
}
64
@media (max-width:640px){
65
  .container-tags{padding: 15px;}
66
}
67
@media (max-width:544px){
68
  .container-tags h1{font-size: 14px;font-weight: bold;margin-bottom: 10px;}
69
  .tagslist li{padding: 10px;}
70
}s
71

72
</style>
73

74
<?php
75

76
get_footer();