wordpress建站的可扩展性很强,除了有很多漂亮主题和可用插件之外。还可以用代码实现一些很酷的功能。
最近发现不少博客首页都增加了一个根据访客评论自动排名的功能,或者也有的站长称为“动态友链”的,目前没有统一的名称,但是可以大幅提高访客互动的积极性。
大部分站长都是用代码功能实现的。我也偷师了一下,给博客也增加一个访客排行榜。效果如图:
这样一来,来访的站长评论后会自动更新排位,下面也分享出修改方法。
1、将下面这段代码添加到自己主题的function.php文件后面:
//2019年1月24日添加访客榜单 function getvisitors() { global $wpdb; // $query="select * from `wp_comments` where `comment_approved`=1 group by `comment_author_url` order by comment_ID DESC limit 0,12"; $query="select MAX(`comment_ID`) comment_ID ,`comment_author_url`,`comment_author` from wp_comments where `comment_author_url`<>'' and `comment_author_url` not like '%zouaw%' and `comment_approved`='1' group by `comment_author_url` order by `comment_ID` DESC limit 0,23;"; $sql = $wpdb -> get_results($query, ARRAY_A); //print_r($sql); foreach($sql as $vales){ echo "<li><img src='https://www.chukuangren.com/wp-content/uploads/2019/01/timg-1.gif'><a target='_blank' rel='nofollow' href=".$vales["comment_author_url"].">".$vales["comment_author"]."</a></li>"; } }
2、将下面代码添加到网站首页文件中,位置可以自己选择:
<div class="vistor"> <style> .vistor{width:100%;margin-bottom:20px;height:auto!important;background:#fff;border:1px solid #f5f9ff;text-align:center;color:#096cb2; border:1px solid #eaeaea;border-radius:4px;} .vistor p{padding-top:4px;font-size:17px;} .vistor ul{margin-top:10px;margin-bottom:10px;font-size:13px;padding-bottom:40px;} .vistor ul li{list-style:none;float:left;margin-left:0px;margin-bottom:10px;width:16.6%;overflow:hidden;height:20px;text-align:left;} .vistor ul li img{width:20px;height:20px;margin-left:2px;margin-right:2px;} /*@media (max-width:820px) {.vistor{display:none}}*/ @media (max-width:820px) { .vistor ul li{width:25%;font-size:9px;} .vistor p{padding-top:4px;font-size:15px;} } </style> <p><a href="/visitor-html" target="_blank">[访客榜单]-</a>每评论一次你就会自动排第一位</p> <ul> <li><img src='https://www.chukuangren.com/wp-content/uploads/2019/01/timg-1.gif'><a target='_blank' rel='nofollow' href=https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=0a5rig7f>阿里云主机</a></li> <?php getvisitors(); ?> </ul> <div style="clear: both;display:block"> </div> </div>
那个转的蓝色图标是个GIF图片,大家也可以下载到本地,上传到自己网站使用!