两款读者墙


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 = '<ul class="active-items">';
        if(empty($array)) {
            $output = '<li>none data.</li>';
        } 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 .= '<li class="active-item" data-info="'.$active_alt.'"><a target="_blank" rel="external nofollow" href="'.$active_url.'">'.$active_avatar.'</a></li>';
            }
           
        }
        $output .= '</ul>';
        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');

    然后,在你想调用的地方使用如下代码即可:

    <?php echo do_shortcode('[active num=15 size=34 days=365]');?>

    或新建页面使用短代码

    [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 条评论

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

      顺带注意下周末快乐 🙂

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

      一行有五个链接,其中左侧第一个被盖住了,只显示了一小部分,如何修改读者墙左右的宽度?最好设置就是一行显示4个链接而不是5个。拜托!

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注