为你的wordpress主题添加一个炫酷的读者墙

gyue2345·2016-10-01·62 次阅读··

现在为博客添加读者墙功能，已经不再稀罕。最近本站弄了个读者墙，现在分享给大家。

https://www.ljy2345.com/read-people

这个读者墙代码最先是在 折子戏 看到的，我个人觉得不怎么好看，立刻就开始研究修改了，多次研究未果，可终究是研究出来了。头像圆角显示；可旋转，具体效果看下图或访问上方读者墙链接，

下面介绍具体制作过程

读者墙页面

复制主题页面文件，如page.php等；改名为readerwall.php等。在适当位置添加下方代码。

<!-- start 读者墙  Edited By iSayme-->
<?php
 
    $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_author_email != 'liangjianyu1999@foxmail.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 30";//大家把管理员的邮箱改成你的,最后的这个39是选取多少个头像，大家可以按照自己的主题进行修改,来适合主题宽度
 
    $wall = $wpdb->get_results($query);
 
    $maxNum = $wall[0]->cnt;
 
    foreach ($wall as $comment)
 
    {
 
        $width = round(40 / ($maxNum / $comment->cnt),2);//此处是对应的血条的宽度
 
        if( $comment->comment_author_url )
 
        $url = $comment->comment_author_url;
 
        else $url="#";
  $avatar = get_avatar( $comment->comment_author_email, $size = '50', $default = 'https://www.ljy2345.com/wp-content/themes/tinection/images/gravatar.png' );
 
        $tmp = "<a id=\"duzhe\" class=\"comment_author_ua tooltip-trigger\" target=\"_blank\" href=\"".$comment->comment_author_url."\" title=\"[".$comment->comment_author."]近期评论".$comment->cnt."次\" data-original-title=\"[".$comment->comment_author."]近期评论".$comment->cnt."次\">".$avatar."<span>".$comment->comment_author."</span>";

        $output .= $tmp;
 
     }
 
    $output = "<div class=\"readers\">".$output."</div>";
 
    echo $output ;
 
?>
 
<!-- end 读者墙 -->

添加CSS3代码美化

直接添加在页面或style.css文件

    .link-content li img,.readers a img {
	margin-bottom: 5px;
	border-radius: 100%;
	transition: .5s;
	-webkit-transtion: .5s
}

.link-content li span,.readers a span {
	display: block
}

.link-content li:hover img,.readers a:hover img {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg)
}

.readers {
	padding: 20px 0
}

.readers a {
	display: inline-block;
	margin: 0 0 15px 0;
	width: 100px;
	text-align: center;
	font-size: 14px
}

教程结束。

历史上的文章

• 2017:  教AI打游戏的框架：SerpentAI安装体验( 1)