空の領域

又一个坑爹的神站 大人說:要清爽 要低調

0%

Wordpress代码实现读者墙

Wordpress读者墙我也见过插件,当初AirSpce啥都没有的时候启用的一堆……不过苦于不会写CSS,就不知道丢到哪里去了……= =CSS这种东西嘛,还是要找现成的……昨天刚装上就有朋友要 = =为了避免我以后可能会换主题忘了怎么弄,先权当Mark。

效果一(昨天用的):

2012-08-14_101237

这个效果比较适合于专页读者墙,如果读者墙与留言本结合,就显得太长了……就必须要修改展示数量,所以我这里只开了9个。

代码忘了哪里来的了-\_\_\_\_\_\_\_\_-''

和归档制作一样复制page.php,命名为readers.php

在最前面加入注释:

the_content后一行复制入以下代码。

p

$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 != ‘csvwolf@qq.com‘ AND post_password=’’ AND comment_approved=’1’ AND comment_type=’’) AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 9”;//大家把管理员的邮箱改成你的,最后的这个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="#";

vatar = 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>"."</a></li>";

$output .= $tmp;

}

$output = “<ul class=\“readers-list\“>”.$output.”“;

echo $output ;

?>

end 读者墙 –>

鉴于显示的美观程度,我将下排显示链接删除了……拖着长长的感觉特不爽,如果你觉得需要,可以自己重新加上(不会的自行百度= =)

CSS中最后添加:

.readers-list{line-height:22px;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-color:#FCFCFC;background-image:-webkit-linear-gradient(#f8f8f8,#FFFFFF);background-image:-moz-linear-gradient(#f8f8f8,#FFFFFF);background-image:linear-gradient(#f8f8f8,#FCFCFC)}

.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}

.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:#000000;font-style:normal;margin-right:10px}

.readers-list strong{color:#000000;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:.5;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}

这是针对accordium的修改版样式,你可以自行修改。

#f8f8f8,#FFFFFF为渐变色区间。

读者墙在IE等浏览器中的表现并不良好,所以视情况而定。


效果二,目前读者墙的效果,适合展示更多用户。

2012-08-14_102723

我今天才发现这种是我在留言本里给出的样式……咳咳,这个比起昨天那个来好看很多,在IE里继续不和谐……所以你可以无视某些鸡肋浏览器了。

添加注释一步同效果一。

都在相同的位置,位置就不说了。

添加代码:

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 != 'admin@yourdomain.com' 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="#"; $tmp = "
  • comment\_author\_url."\\">comment\_author\_email))."?s=36&d=monsterid&r=G) no-repeat;\\">pic".$comment->cnt."".$comment->comment\_author."
  • "; $output .= $tmp; } $output = "
    ".$output."
    "; echo $output ; ?>

    CSS部分:

    body{overflow-x: hidden;}

    .readerwall{padding:12px 0 12px 15px; font-size:12px;overflow:visible;}

    .readerwall li{width:40px;height:40px;margin:0;padding:5px 0 5px 5px;float:left;list-style:none;border: 1px solid #DFDFDF;-moz-border-radius:2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;}

    .readerwall .active-bg{width:40px;height:2px;_font-size:0;margin:-3px 0 0 -2px;background:#DFDFDF; }

    .readerwall .active-degree{background:red;width:40px;height:2px;_font-size:0;}

    .readerwall a{width:36px;height:36px;display:inline-block;position:relative;margin:0 0px 2px 0; text-decoration:none}

    .readerwall .pic{position:absolute;top:0;left:0;z-index:100;width:36px;height:36px;display:block;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;border-radius:4px; text-indent:-9999px}

    .readerwall .num{position:absolute;top:0;left:0;z-index:99;width:34px;height:34px;line-height:34px;color:#E02523;font-size:18px;font-weight:bold;display:block;background:#fff;text-align:center;border:#bbb 1px solid;box-shadow:0 0 4px #ccc;-webkit-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;border-radius:4px}

    .readerwall .name{position:absolute;top:0;left:0;color:#333;display:block;width:1px;height:1px;overflow:hidden;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;text-align:center}

    .readerwall a:hover .pic{z-index:100;border-color:#eee;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}

    .readerwall a:hover .num{z-index:101;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);opacity:.8}

    .readerwall a:hover .name{top:-28px;left:-38px;z-index:101;padding:4px 6px;height:20px;line-height:20px;overflow:hidden;background:#fff;border-radius:2px;box-shadow:0 0 3px #000;min-width:100px;opacity:.8}

    然后页面选择好类型新建就可以了。

    当然,其实归档、读者墙包括友情链接的建立方法都是大同小异的。

    2012年08月20日:

    关于如何换默认头像一点,其实很简单

    找到:

    http://www.gravatar.com/avatar/".md5(strtolower($comment->comment\_author\_email))."?s=36&d=http://xsky.me/blank.png&r=G

    这样一行,我已经把头像换掉了,也就是说 只要把:d=之后换成你自己的默认头像连接就可以了 r=是设置什么评级

    欢迎关注我的其它发布渠道