网站最新注册用户墙

看到别人家的友情链接模板很漂亮,无耻的爬下来,改了又改做成个“用户墙”。

<p>网站累积注册用户数:<?php $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users"); echo $users; ?>  位</p>
<div id="userspagewall">
<?php
    $query="SELECT display_name, user_url, user_email, user_registered FROM $wpdb->users ORDER BY ID DESC LIMIT 102";
    $wall = $wpdb->get_results($query);
    $counta = 0;
    foreach ($wall as $comment)
    {
        if(date('Y-m-d', (strtotime($comment->user_registered)+60*60*8))===$strtime =date('Y-m-d',time()+60*60*8))
        {
             $counta++;
        }
        $avatar = get_avatar( $comment->user_email, $size = '40');
        $tmp = "<li class=\"link-item\"><a class=\"link-item-inner effect-apollo\" target=\"_blank\" href=\"".$comment->user_url."\" rel=\"nofollow\" title=\"".date('Y-m-d H:i:s', (strtotime($comment->user_registered)+60*60*8))."\"".">".$avatar."<span class=\"sitename\">".$comment->display_name."</span></a></li>";        
        $output .= $tmp;
    }
    $output = "<p>这里列出最新注册的 102 位盆友,其中今天注册  ". $counta." 位。</p><hr /><ul class=\"link-items fontSmooth\">".$output."</ul>";
    echo $output ;
?>
</div>

样式代码示例:

.link-title{font-size:18px;color:rgba(0,0,0,0.44);margin:40px 0 10px}
.link-items{padding-inline-start: 0px;}
.link-description{font-size:12px;margin-bottom:10px;font-style:italic;color:rgba(0,0,0,0.3)}
.link-item{display:inline-block;margin:10px 10px;width:80px;vertical-align:top;text-align:center;}
.link-item-inner{display:block;overflow:hidden;position:relative;text-decoration:none!important}
.link-item-inner:hover {transform: translateY(-6px);-webkit-transform: translateY(-6px);-moz-transform: translateY(-6px);box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);-webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);-moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;
}
.link-item .avatar{border-radius:50px;width:64px;height:64px}
.sitename{color:#000;}
.sitename{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.effect-apollo::before{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.5);content:'';-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0)}
.effect-apollo:hover::before{-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)}
#userspagewall .link-items li:hover span{color:#0000FF;font-weight:bold}

效果:
《网站最新注册用户墙》
由于大家都没设置头像,因此没那么好看。之前做过一个“评论用户墙”,动画效果没这个好看。考虑做成展示当天登录用户的,但是不会查询SQL。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

  1. 云落 说道:

    用随机头像,我的网站怎么展示是我的事,可以使用我的链接 https://cdn.jsdelivr.net/gh/yunluo/GitCafeApi/avatar/1-1999.jpg 一共1999个头像随机,给你一个五彩缤纷的页面(主要是二次元头像)

    1. 黑鸟 说道:

      大佬的 API 好用,不过我希望头像跟用户有一点点关联性,目前已经完成QQ头像的接入,下一步把剩余的人显示首字(母)头像。能不能实现全靠度娘了 .. :019:

  2. 黄玉龙 说道:

    很不错

  3. boke112联盟 说道:

    这个对于有很多注册用户的站点是挺好的

  4. Jane博客 说道:

    这个可以,我也想弄,不知WordPress可以用不

    1. 黑鸟 说道:

      本站也是WP :022:

  5. 凉米饭 说道:

    表示不知道在哪里换头像