由于网站上线有一段时间了,交换友链的朋友也比较多,于是准备整个友情链接的版面出来,以方便整合大家的友链,同时也方便以后大家彼此的沟通交流与访问,今天也刚好周末,于是梳理下了方案和设计思路,决定在友链页面的上端放个读者墙,一方面为了页面的美观效果,另一方面也是为了增加用户的访问的体验感,对于读者墙的制作,可以说网上已经多的数不清了,我也查下一些资料,也发现了一些问题,比如:有的读者墙效果不够好,有的读者墙没登陆的用户头像出现空白问题,等等…..

于是我本人prolicn对于上面可能遇到的问题做了一部分的优化与补充,在此跟大家分享下…..

读者墙效果展示地址:http://prolicn.com/index.php/link

废话不多说,直接上代码:

1、复制主题下的page.php文件,重命名为:link.php,将其中第一个<?php替换为:

<?php
 /*
 Template Name: link 友情链接
 */
 ?>
 <?php

2、在模板文件中查找:
<?php the_content(); ?>

<!-- start 读者墙css -->
<style type="text/css">
#readerswall h2{ color:#fff; font-family:"微软雅黑"; margin-bottom:15px; font-size:18px;}
#readerswall li{width:50px;height:56px;margin:0 20px 21px 0;padding: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;}
#readerswall img{width:50px;height:50px;display:block;}
#readerswall .active-bg{width:50px;height:2px;_font-size:0;margin-top:5px;background:#DFDFDF; }
#readerswall .active-degree{background:#08c;width:50px;height:2px;_font-size:0;}
</style>
<!-- and 读者墙css -->
<!-- start 读者墙-->
 <?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 != '这里填写你的博主的邮箱地址不显示该email的头像' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 40";//最后的这个40是选取多少个头像,我一次让它显示40个。
 $wall = $wpdb->get_results($query);
 $maxNum = $wall[0]->cnt;
 foreach ($wall as $comment) 
 {
 $width = round(50 / ($maxNum / $comment->cnt),2);//这个50是我设置头像的宽度,和下面&size=40里的40一个概念,如果你头像宽度40,这里就是40了。
 if( $comment->comment_author_url ) 
 $url = $comment->comment_author_url;
 else $url="#";
 $tmp = "<li title='".$comment->comment_author." (".$comment->cnt."次重要讲话)' num='".$comment->cnt."'><a href='".$comment->comment_author_url."' target='_blank'><img src='http://www.gravatar.com/avatar.php?gravatar_id=".md5($comment->comment_author_email)."&size=40&d=identicon&r=G' alt='" . $comment->comment_author . " (". $comment->cnt . "层楼)' /></a><div class='active-bg'><div class='active-degree' style='width:".$width."px'></div></li>";
 $output .= $tmp; 
 }
 $output = "<div id='readerswall'><h2>读者墙</h2><ul class='gavaimg'>".$output."</ul></div>";
 echo $output ;
?>
 <!-- end 读者墙 -->

简单解释下
绿色文字的地方是注释
红色文字的地方是可以根据你自己主题做修改的
是不是很简单哈,由于本人prolicn考虑到一些页面的效果问题,加了一个动态背景的切换,这里就不多说了,如果你觉得不错的话,那你也赶紧来试试吧……
[button href=http://pan.baidu.com/s/1gdelx0v color=green]文件下载[/button]

Tagged with: , , ,