两款读者墙


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

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

      顺带注意下周末快乐 :smile:

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

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

      1. 在css里的.readers-list里加个padding-left: 240px,数字大小你自己调整。