两款读者墙

2015-02-26 | 折腾 | 7,444 views | 18 replies

Bigfa发了一款不错的wordpress读者墙，把现在自己用的也搬出来汇总，只当是做个备份。

第一款，Bigfa版wordpress读者墙
主要优点：

使用wordpress 自带函数
可排除管理员评论
可控制评论时间
可输出最后评论时间
CSS3 动画效果

效果图，可以去围观大发的站，或者直接跳到我博客页面底部去看。

实现方法，下面的方法加入到functions.php 中
/** * Get most active friends * * @package Bigfa */ if(!function_exists("deep_in_array")) { function deep_in_array($value, $array) { // 返还数组序号 $i = -1; foreach($array as $item => $v) { $i++; if($v["email"] == $value){ return $i; } } return -1; } }


function get_active_friends($num = null,$size = null,$days = null) {

    $num = $num ? $num : 15;

    $size = $size ? $size : 34;

    $days = $days ? $days : 30;

    $array = array();

    $comments = get_comments( array('status' => 'approve','author__not_in'=>1,'date_query'=>array('after' => $days . ' days ago')) );

    if(!empty($comments))    {

        foreach($comments as $comment){

            $email = $comment->comment_author_email;

            $author = $comment->comment_author;

            $url = $comment->comment_author_url;

            $data = human_time_diff(strtotime($comment->comment_date));

            if($email!=""){

                $index = deep_in_array($email, $array);

                if( $index > -1){

                    $array[$index]["number"] +=1;

                }else{

                    array_push($array, array(

                        "email" => $email,

                        "author" => $author,

                        "url" => $url,

                        "date" => $data,

                        "number" => 1

                    ));

                }

            }

        }

        foreach ($array as $k => $v) {

            $edition[] = $v['number'];

        }

        array_multisort($edition, SORT_DESC, $array); // 数组倒序排列

    }

    $output = '
';

    if(empty($array)) {

        $output = '
none data.
';

    } else {

        $max = ( count($array) > $num ) ? $num : count($array);
        for($o=0;$o < $max;$o++) {
            $v = $array[$o];
            $active_avatar = get_avatar($v["email"],$size);
            $active_url = $v["url"] ? $v["url"] : "javascript:;";
            $active_alt = $v["author"] . ' - 共'. $v["number"]. ' 条评论，最后评论于'. $v["date"].'前。';
            $output .= '

'.$active_avatar.'
';

        }
    }

    $output .= '
';

    return  $output;

}
function active_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(

            'num' => '',

            'size' => '',

            'days' => '',

        ),

        $atts ) );
    return get_active_friends($num,$size,$days);

} add_shortcode('active', 'active_shortcode');
然后，在你想调用的地方使用如下代码即可：

或新建页面使用短代码
[active num=15 size=34 days=365]
其中，num为显示数量，size为头像大小，days为多少天之内的评论数

参考CSS：
.active-items{padding-top:10px} .active-item{display:inline-block;vertical-align:top;position:relative;margin:0 8px 8px 0;transition:0.5s} .active-item:after{border:4px solid rgba(0,0,0,0);border-top-color:rgba(0,0,0,0.75);position:absolute;bottom:34px;content:"";left:12px;display:none} .active-item:before{background-color:rgba(0,0,0,0.75);border-radius:3px;bottom:42px;color:#fff;content:attr(data-info);font-size:12px;left:-50px;padding:5px;position:absolute;width:120px;display:none;line-height:1.2} .active-item:hover:before,.active-item:hover:after{display:block} .active-item .avatar{border-radius:100%} .active-item:hover .avatar{animation:.5s linear 0s normal none rotate;-webkit-animation:.5s linear 0s normal none rotate} @keyframes rotate{50%{transform:rotateY(45deg)} 100%{transform:rotateY(0)} }@-webkit-keyframes rotate{50%{-webkit-transform:rotateY(45deg)} 100%{-webkit-transform:rotateY(0)} }

第二款，wordpress读者墙
看效果直接转到这：http://www.xinsenz.com/readerwall
首先下载readerwall.php，上传到你使用的主题目录中，
然后在后台新建一个页面，模板选择“Reader wall”，
然后在你使用主题的style.css中，添加Readerwall css即可，主题不同，可以需要做调整。
/*以下为读者墙CSS*/ #readerwall {} .readers-list{line-height:18px;text-align:left;overflow:hidden;_zoom:1} .readers-list li{width:219px;float:left;*margin-right:-1px} .readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2)} .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:#666;font-style:normal;margin-right:10px} .readers-list strong{color:#ddd;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:.6;margin-left:0} .readers-list a:hover em{color:#0099FF;font:bold 12px/36px microsoft yahei} .readers-list a:hover strong{color:#EE8B17;right:168px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}

18 条评论

Betty说道：

2015-02-27 00:57

一度也想过弄读者墙
但一想自己毕竟不是热衷搞什么圈子的，就还是放弃了
还是就喜欢简单干净就好

顺带注意下周末快乐
小年说道：

2015-02-27 06:43

我觉得是很实用的一个功能
kiss说道：

2015-02-27 13:41

可以尝试
天长地久说道：

2015-02-27 13:59

我还没弄读者墙
懿古今说道：

2015-02-27 20:39

我现在就是用第二种，个人比较喜欢第二种风格
Me.稀奇说道：

2015-02-28 10:12

第一个好看，第二个太多字····
alex说道：

2015-02-28 12:52

学习了，准备研究研究。
灰常记忆说道：

2015-03-01 14:45

好详细
资深未遂说道：

2015-03-02 14:19

正在用大发的版本。
从良未遂说道：

2015-03-08 12:34

艾玛，读者墙上排名第二
1. Xinsenz W说道：
  
  2015-03-08 21:34
  
  争取彪第一~！
stan说道：

2015-04-09 23:54

为鸟第一个方法，我出来东西时竖着一溜呢？
1. Xinsenz W说道：
  
  2015-04-10 14:20
  
  可能是CSS的问题，晚上帮你看看
尚磊说道：

2015-12-14 22:26

亲，用了第二套方案，但是对于CSS修改很无力，不知道需要在你的CSS基础上怎么改，可否帮忙一看。

http://shanglei.net/readerwall
1. Xinsenz W说道：
  
  2015-12-26 22:19
  
  你要肿么改？
尚磊说道：

2015-12-26 23:17

你看这个页面：http://shanglei.net/readerwall

一行有五个链接，其中左侧第一个被盖住了，只显示了一小部分，如何修改读者墙左右的宽度？最好设置就是一行显示4个链接而不是5个。拜托！
1. Xinsenz W说道：
  
  2015-12-27 10:45
  
  在css里的.readers-list里加个padding-left: 240px，数字大小你自己调整。
  1. 尚磊说道：
    
    2015-12-27 17:09
    
    感谢！按照你的指导解决问题了。

两款读者墙

你可能感兴趣的文章：

18 条评论