看到别人家的友情链接模板很漂亮,无耻的爬下来,改了又改做成个“用户墙”。
<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。
用随机头像,我的网站怎么展示是我的事,可以使用我的链接 https://cdn.jsdelivr.net/gh/yunluo/GitCafeApi/avatar/1-1999.jpg 一共1999个头像随机,给你一个五彩缤纷的页面(主要是二次元头像)
大佬的 API 好用,不过我希望头像跟用户有一点点关联性,目前已经完成QQ头像的接入,下一步把剩余的人显示首字(母)头像。能不能实现全靠度娘了 ..
很不错
这个对于有很多注册用户的站点是挺好的
这个可以,我也想弄,不知WordPress可以用不
本站也是WP
表示不知道在哪里换头像