WordPress,通過CSS3實現個性讀者墻頁面的代碼分享

公元2011年10月27日沒人鳥我喲打醬油看熱鬧的有:2,178 views

WordPress,通過CSS3實現個性讀者墻頁面的代碼分享

今天沒事瞎轉悠,看到了這個效果,感覺還是挺不錯的,所以就給大家分享下,下面會有原出處和效果圖放出,實際讀者墻的實現方法有很多,多一種方法,多一種選擇嘛,大家可以根據自己的口味酌情選擇!

這個是在訪問博友Rubinz的博客看到的,希望大家多多支持,多多分享!

先上一張效果圖,更直觀!

沫.WordPress,通過CSS3實現個性讀者墻頁面的代碼分享

下面直接上代碼,顯示php代碼,如下:

1
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
<div class="devesingle guestbook">
 <h1 class="zhenghei"><?php the_title(); ?>
<?php edit_post_link('<span class="edit">[edit] </span>');?></h1>   
        <section class="content">
            <div>
<?php  global $post,$wpdb;
$identity="comment_author";
$passwordpost = " AND post_password=''";
$userexclude = " AND user_id='0'";
$approved = " AND comment_approved='1'";
$shownumber = 12;
$counts = $wpdb->get_results("SELECT COUNT(" . $identity . ") 
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 MONTH(comment_date)=MONTH(now()) and YEAR(comment_date)=YEAR(now())" .
$userexclude . $passwordpost . $approved . ") AS tempcmt
GROUP BY " . $identity . " ORDER BY cnt DESC LIMIT " . $shownumber); ?>
 
                 <ul class="readers-list cf">
                 <?php if ( $counts ) : foreach ($counts as $count) :
                 echo  '<li>' . '<a href="'. $count-&gt;comment_author_url .
'" target="_blank">' .get_avatar($count->comment_author_email,36).' <em>' 
. $count->comment_author . '</em><strong>+'. $count->cnt 
. '</strong><br>'. $count->comment_author_url .
                    '</a></li>';
                 endforeach; endif;
                 ?>
                 </ul>
            </div>

接著是樣式代碼,大家可以根據自己的喜好酌情修改的哦,嘿嘿,如下:

1
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
101
102
.content .readers-list
{
	line-height:18px;
	text-align:left;
	overflow:hidden;
	_zoom:1
}
.content .readers-list li
{
	width:200px;
	float:left;
	*margin-right:-1px;
	margin:0 9px 5px -3px ;
	padding:0;
	background:none;
	font-size:11px;
}
.content .readers-list a
{
	background-color:#f2f2f2;
	background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);
	background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);
	background-image:linear-gradient(#f8f8f8,#f2f2f2)
}
.content .readers-list a
{
	position:relative;
	display:block;
	height:36px;
	margin:4px;
	padding:4px 4px 4px 44px;
	color:#999;
	overflow:hidden;
	border:#ccc 1px solid;
	border-radius:2px;
	box-shadow:#eee 0 0 2px
}
.content .readers-list img,.content .readers-list em,.content .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:#587686;
	font-style:normal;
	margin-right:10px;
	font-size:12px;
}
.content .readers-list strong
{
	color:#ddd;
	width:40px;
	text-align:right;
	position:absolute;
	right:6px;
	top:4px;
	font:bold 14px/16px microsoft yahei;
	background-color:#fff
}
.content .readers-list a:hover
{
	border-color:#bbb;
	box-shadow:#ccc 0 0 2px;
}
.content .readers-list a:hover,.content .readers-list a:hover strong
{
	background-color:#fff;
	background-image:-webkit-gradient(linear,left bottom,left top,
color-stop(0, rgb(232,232,232)),color-stop(0.5, rgb(245,245,245)),
color-stop(0.83, rgb(255,255,255)));
	background-image:-moz-linear-gradient(center bottom,
rgb(232,232,232) 0%,rgb(245,245,245) 50%,rgb(255,255,255) 83%);
}
.content .readers-list a:hover img
{
	margin-left:0
}
.content .readers-list a:hover em
{
	color:#587686;
	font:bold 12px/36px microsoft yahei
}
.content .readers-list a:hover strong
{
	color:#e38383;
	right:150px;
	top:0;
	text-align:center;
	border-right:#ccc 1px solid;
	height:44px;
	line-height:40px;
}

OK,就是這麼簡單,建立後上傳,然後新建頁面的時候選擇上傳的模板即可!

休息一下,Over! 收工!