字号: - o +

读者墙@水榜

2013-01-12 前端开发 15人评论 34,081次浏览   

子曰:该睡觉就别学习,该学习就别游戏,该游戏就别被虐 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

博客发布之后,肯定少不了有人评论,也少不了有很多人灌水,当然了,我不建议大家灌水,多发布一些有意义的评论,大家一起交流我觉得会更好,今天晚上回来闲着无聊,浏览了一下读者墙,看看最近大家的评论,据不完全统计,目前已经有差不多100位左右的读者已通过评论审核,在这期间也认识了不少朋友,通过他们的博客学习了很多东西,我觉得博客这东西,每天要多看看别人写的,然后自己去思考,最后能够灵活的运用就不错了。刚刚折腾了一下读者墙和水榜,其实这两个页面差不多,唯一不同的是,读者墙是显示的网址,而水榜显示是评论进度。下面我来分别说一下这两个页面是怎么实现的

首先,看一下水榜的实现吧,我觉得这种挺不错的,更能直观的体现出来

在看代码之前,我先说一下,这两种方法都是要先新建模板页面的,也就是php文件,好嘞,请继续

PHP代码:

<?php
/*
template name: 水榜
*/
get_header();
function wall( $outer='两千年的孤寂',$timer='30',$limit='1000' ){
global $wpdb;
$counts = $wpdb->get_results("select count(comment_author) 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 $timer month ) and user_id='0' and comment_author != '".$outer."' and post_password='' and comment_approved='1' and comment_type='') as tempcmt group by comment_author order by cnt desc limit $limit");
$maxNum = $counts[0]->cnt;
foreach ($counts as $count) {
$avatar_url = get_bloginfo('wpurl') . '/avatar/' . md5(strtolower($count->comment_author_email));
$c_url = $count->comment_author_url;
$width = round(174 / ($maxNum / $count->cnt),2);//此处是对应的血条的宽度
if ($c_url == '') $c_url = '';
$page .= '<li title="' . $count->comment_author . '@'. $count->cnt . '"><a target="_blank" href="'. $c_url . '" rel="external nofollow"><img src="' . $avatar_url . '" /><em>' . $count->comment_author . '</em><strong>+'. $count->cnt . '</strong><div class="active-bg"><div class="active-degree" style="width:'.$width.'px"></div></div></a></li>';
}
echo $page;
};
?>

CSS代码:

.wall {
line-height:18px;
overflow:hidden;
text-align:left;
}
.wall li {
list-style:none outside none;
float:left;
width:246px;
padding:0;
}

.wall li a {
border:1px solid #CBCBCB;
border-radius:2px 2px 2px 2px;
box-shadow:0 0 2px #EEE;
color:#999;
display:block;
height:42px;
margin:4px;
overflow:hidden;
padding:4px 4px 4px 44px;
position:relative;
text-decoration:none;
}
.wall li a{
background-color:#F7F7F7;
background-image:0;
}

.wall li a:hover,
.wall li strong:hover {
color:#47AFD5;
}
.wall li a img {
border-radius:2px 2px 2px 2px;
float:left;
height:36px;
margin:0 8px 0 -40px;
width:36px;
padding: 2px;
}
.wall li a em {
color:#666;
font-style:normal;
margin-right:10px;
}
.wall li a strong {
color:#DDD;
font:bold 14px/16px microsoft yahei;
position:absolute;
right:6px;
text-align:right;
top: 5px;
width:40px;
}
.wall li a div.active-bg {
width: 174px;
height: 6px;
_font-size: 0;
margin: 10px 0 0 11px;
background: #DFDFDF;
border-radius: 3px 3px 3px 3px;
}
.wall li a div.active-degree {
background: #009DFF;
width: 12px;
height: 6px;
_font-size: 0;
border-radius: 3px 3px 3px 3px;
}

点此查看水榜效果

其次就是读者墙了

PHP代码:

<?php
/*
template name: 读者墙
*/
get_header();
function readers_wall( $outer='两千年的孤寂',$timer='30',$limit='50' ){
global $wpdb;
$counts = $wpdb->get_results("select count(comment_author) 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 $timer month ) and user_id='0' and comment_author != '".$outer."' and post_password='' and comment_approved='1' and comment_type='') as tempcmt group by comment_author order by cnt desc limit $limit");
foreach ($counts as $count) {
$avatar_url = get_bloginfo('wpurl') . '/avatar/' . md5(strtolower($count->comment_author_email));
$c_url = $count->comment_author_url;
if ($c_url == '') $c_url = '';
$page .= '<li title="' . $count->comment_author . '@'. $count->cnt . '"><a target="_blank" href="'. $c_url . '" rel="external nofollow"><img src="' . $avatar_url . '" /><em>' . $count->comment_author . '</em><strong>+'. $count->cnt . '</strong><br />'. $c_url . '</a></li>';
}
echo $page;
};
?>

CSS代码:

.readers {
overflow:hidden;
margin-bottom:4px;
padding-bottom:4px;
border-bottom:1px dotted #ddd;
text-align:left;
line-height:18px;
_zoom:1;
}
.readers li {
float:left;
width:20%;
*margin-right:-1px;
}
.readers a,.readers a:hover strong {
background-color:#fbfbfb;
background-image:-webkit-linear-gradient(#fbfbfb,#f2f2f2);
background-image:-moz-linear-gradient(#fbfbfb,#f2f2f2);
background-image:linear-gradient(#fbfbfb,#f2f2f2);
}
.readers a {
position:relative;
display:block;
overflow:hidden;
margin:4px 4px 4px 0;
padding:4px 4px 4px 44px;
height:36px;
border:#ccc 1px solid;
border-radius:2px;
box-shadow:#eee 0 0 2px;
color:#999;
}
.readers img,.readers em,.readers strong {
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
transition:all .2s ease-out;
}
.readers img {
float:left;
margin:0 8px 0 -40px;
width:36px;
height:36px;
border-radius:2px;
}
.readers em {
margin-right:10px;
color:#666;
font-style:normal;
}
.readers strong {
position:absolute;
top:5px;
right:6px;
width:40px;
color:#4D90FE;
text-align:right;
font:bold 14px/16px microsoft yahei;
}
.readers a:hover {
border-color:#bbb;
background-color:#fff;
background-image:none;
box-shadow:#ccc 0 0 2px;
}
.readers a:hover img {
margin-left:0;
opacity:.6;
}
.readers a:hover em {
color:#4787ED;
font:bold 12px/40px microsoft yahei;
}
.readers a:hover strong {
top:0;
left:0;
height:44px;
border-right:#ccc 1px solid;
color:#4787ED;
text-align:center;
line-height:40px;
}

点此查看读者墙效果

当然了,网上有很多类似的例子,我只是抛砖引玉一下,希望对新手有帮助。

转载请注明:W3Cshare前端分享 » 读者墙@水榜

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论10条 ,博主回复5

  1. 确实不错!喜欢

    味道04-20 23:27 回复
  2. 合格代码我现在的主题用不了额,,没有反映,直接从别的主题扒了一个过来就可以用

    无名01-20 21:54 回复
  3. 放在那里呢?

    三号博客01-18 23:19 回复
  4. 非常好的功能!

    游手好弦01-18 17:10 回复
  5. 囧,怎麽我這麽多的

    花七七01-17 20:15 回复
  6. 这个功能不错啊

    sifu01-16 12:54 回复
  7. 上榜啦,哈哈~~~

    csdsq01-13 14:29 回复
  8. 很不多,你就天天折腾啊,看你那下拉菜单也添加了东西,我也像要了 :roll:

    IT自习室01-13 12:24 回复
    • 没有啊,好久没折腾了,昨天不知道怎么了,晚上11点半多了,突然心血来潮就折腾了一下,没添加其他什么吧 ➡

  9. 靠。。。我居然没上榜

    kn007 01-13 10:14 回复

发表我的评论

*

*

取消