为你的WordPress博客添加CSS3炫酷读者墙

2

3

4

5

< ?php

/*

Template Name: Reader wall

*/

?>

< ?php the_content(‘‘);?>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!-- start 读者墙  Edited By iSayme-->

<?php

    $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id=‘0‘ AND comment_author_email != ‘这里改成你自己的邮箱‘ AND post_password=‘‘ AND comment_approved=‘1‘ AND comment_type=‘‘) AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 39";//大家把管理员的邮箱改成你的,最后的这个39是选取多少个头像，大家可以按照自己的主题进行修改,来适合主题宽度

    $wall = $wpdb->get_results($query);

    $maxNum = $wall[0]->cnt;

    foreach ($wall as $comment)

    {

        $width = round(40 / ($maxNum / $comment->cnt),2);//此处是对应的血条的宽度

        if( $comment->comment_author_url )

        $url = $comment->comment_author_url;

        else $url="#";

  $avatar = get_avatar( $comment->comment_author_email, $size = ‘36‘, $default = get_bloginfo(‘wpurl‘).‘/avatar/default.jpg‘ );

        $tmp = "<li><a target=\"_blank\" href=\"".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br>".$comment->comment_author_url."</a></li>";

        $output .= $tmp;

     }

    $output = "<ul class=\"readers-list\">".$output."</ul>";

    echo $output ;

?>

<!-- end 读者墙 -->

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

.readers-list {

    line-height: 18px;

    text-align: left;

    overflow: hidden;

    _zoom: 1

}

.readers-list li {

    width: 200px;

    float: left;

    *margin-right: -1px

}

.readers-list a, .readers-list a:hover strong {

    background-image: -webkit-linear-gradient(#f8f8f8, #f2f2f2);

    background-image: -moz-linear-gradient(#f8f8f8, #f2f2f2);

    background-image: linear-gradient(#f8f8f8, #f2f2f2)

}

.readers-list a {

    position: relative;

    display: block;

    height: 36px;

    margin: 4px;

    font-size:12px;

    padding: 4px 4px 4px 44px;

    color: #999;

    overflow: hidden;

    border: #ccc 1px solid;

    border-radius: 2px;

    box-shadow: #eee 0 0 2px

}

.readers-list img, .readers-list em, .readers-list strong {

    -webkit-transition: all .2s ease-out;

    -moz-transition: all .2s ease-out;

    transition: all .2s ease-out

}

.readers-list img {

    width: 36px;

    height: 36px;

    float: left;

    margin: 0 8px 0 -40px;

    border-radius: 2px

}

.readers-list em {

    color: #666;

    font-style: normal;

    margin-right: 10px

}

.readers-list strong {

    color: #ddd;

    width: 40px;

    text-align: right;

    position: absolute;

    right: 6px;

    top: 4px;

    font: bold 14px/16px microsoft yahei

}

.readers-list a:hover {

    border-color: #bbb;

    box-shadow: #ccc 0 0 2px;

    background-color: #fff;

    background-image: none

}

.readers-list a:hover img {

    opacity: .6;

    margin-left: 0

}

.readers-list a:hover em {

    color: #EE8B17;

    font: bold 12px/36px microsoft yahei

}

.readers-list a:hover strong {

    color: #EE8B17;

    right: 150px;

    top: 0;

    text-align: center;

    border-right: #ccc 1px solid;

    height: 44px;

    line-height: 40px

}

.readers-list {

    line-height: 18px;

    text-align: left;

    _zoom: 1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    -o-text-overflow: ellipsis;

}