分享WordPress读者墙的制作
分享WordPress读者墙的制作
2014年11月9日

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

于是我本人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]

共有 32 条评论

  1. 一介码农

    licn兄,我的博客域名换成 http://www.qintianxiang.com/ 了~,麻烦有空的时候更新下哈~~

    1. prolicn

      已经更新了….

    2. prolicn

      已经更新了哦

  2. 大城小我

    多谢了,写d很详细

  3. diu

    留言。。。

  4. 姜辰

    我EMLOG怎么办?

    1. prolicn

      其实都差不错的,不是很懂的话,可以先网站找一份,然后在自己做修改….

      1. 姜辰

        哈哈,我还是自己写了一个友链···其实也就是博客导航,不过现在没咋弄了

  5. 面码了

    新年快乐惹

    1. prolicn

      新年快乐哈….

  6. 七弦琴

    我是直接用的多说的接口,没有向你加这么多功能,只是为了回访,记录访客然后点击头像回访。。

  7. 大城小我

    不错 学习了

  8. 爱奇趣分享网

    网站很漂亮

    1. prolicn

      呵呵,欢迎多多光临……

  9. 轻微生活

    动态效果不错!很酷炫! 不过那个通用头像服务器应该换一下了,影响加载速度还无法显示头像!

    1. prolicn

      gravatar的头像……国外网站,天朝帝国,有点让人受不了,,,,

  10. maillot saxo bank

    我来支持一下~

    1. prolicn

      呵呵,,谢谢,,支持与关注哈,,,,,

  11. 中国家装平台

    读者强不错,现在用户粘度和用户体验一直是网站很重要的部分

    1. prolicn

      是的,用户体验才是一个网站的根本之所在。。。。 [哈哈] [互粉]

  12. 中国历史

    读者墙是个好东西,以人为本

    1. prolicn

      化友情为链接,,,,,, [哈哈] [哈哈] [互粉]

      1. 中国历史

        确实如此

      2. prolicn

        哈哈,,已经为你加了友链,,,, [哈哈] [威武]

      3. 中国历史

        我也加了你的链接

  13. 一度又秋来

    很不错~

    1. prolicn

      呵呵,,谢谢支持哈,, [哈哈] [哈哈] [互粉]


2019年10月20日 星期日 www.prolicn.com 新武夷山网赞助