/文章

WordPress读者墙终极美化版

文章目录

今天吃饱撑的,继续在网上晃荡,看到大发博客的这篇文章很不错,就转载过来了,比我当前主题的这个读者墙好很多,具体主要优点请参考下面说明,说真的我还是蛮喜欢这个样式的。大家有喜欢的,可以对比修改自己的读者墙。

网上很多教程还是使用sql语句来获取读者墙,不得不说太落后了,get_comments更新后加入很多很赞的参数,我们完全可以只使用get_comments来完成一个非常炫酷的读者墙。

主要优点

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

效果图

Wordpress 读者墙

实现方法

下面的方法加入到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');

高能预警,感谢时间

[mb]

在你想调用的地方使用如下代码即可

<?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)}
}

注意

如修改头像大小则可能要修改对应的CSS样式

修复gravatar头像显示请参考相关文章

本文转载自大发博客,链接:http://fatesinger.com/75054,转发请保留相关链接。

原文链接:,转发请注明来源!
1 0

发表评论

要发表评论,您必须先