Reader Wall – WordPress读者墙代码（头像、用户名、评论者链接） · 任刚 · Ren Gang

/* 读者墙 */
#read-wall {
	margin: 10px auto;
	padding: 0 20px 0 20px;
	;
	text-align: center;
}
#read-wall li {
	display: inline-block;
 *display: inline;
	zoom: 1;
	list-style: none;
	padding: 5px;
}
#read-wall li img {
	position: relative;
float: left;
margin-right: 10px;
padding: 4px;
width: 54px;
height: 54px;
border: 1px solid #eee;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
background: #fff;
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: .4s;
-webkit-transition: -webkit-transform .4s ease-out;
-moz-transition: -moz-transform .4s ease-out;
transition: transform .4s ease-out;
}
#read-wall .container {
	height: auto;
	background: url(images/pattern.png) repeat;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px;
}

效果大致如下：

" /> Reader Wall – WordPress读者墙代码（头像、用户名、评论者链接） · 任刚 · Ren Gang - 我的设计笔记

欣赏

Reader Wall – WordPress读者墙代码（头像、用户名、评论者链接）

Reader Wall, WordPress, 头像调用, 读者墙, 调用头像
26/04/2015 任刚小贴士

分享一个WordPress调用热门读者的读者墙代码 —— Reader Wall，支持调用用户头像，评论者链接，及评论者用户名

&lt;div class="container"&gt;
&lt;h3&gt;最新评论者 &lt;span class="gray"&gt;/ Latest Comment Author&lt;/span&gt;&lt;/h3&gt;
&lt;div id="read-wall"&gt;
&lt;?php
// 免插件版侧边栏读者墙
global $wpdb;
// 执行数据库查询
$counts = $wpdb-&gt;get_results("SELECT COUNT(comment_author) AS cnt, comment_author, comment_author_url, comment_author_email
FROM {$wpdb-&gt;prefix}comments
WHERE comment_date &gt; date_sub( NOW(), INTERVAL 24 MONTH )
AND comment_approved = '1'
AND comment_author_email != 'i@rengang.com.cn'
AND comment_type = ''
GROUP BY comment_author_email
ORDER BY comment_date DESC
LIMIT 32");
$mostactive = '';
if ( $counts ) {
// 输出读者列表
foreach ($counts as $count) {
$c_url = $count-&gt;comment_author_url;
$mostactive .= '&lt;li&gt;' . '&lt;a href="'. $c_url . '" rel="nofollow" alt="' . $count-&gt;comment_author .'" target="_blank" title="' . $count-&gt;comment_author .' +'. $count-&gt;cnt . '"&gt;' . get_avatar($count-&gt;comment_author_email, 55) . '&lt;/a&gt;&lt;/li&gt;';
}
echo $mostactive;
}
?&gt;
&lt;/div&gt;
&lt;/div&gt;

样式加以美化：
/* 读者墙 */
#read-wall {
	margin: 10px auto;
	padding: 0 20px 0 20px;
	;
	text-align: center;
}
#read-wall li {
	display: inline-block;
 *display: inline;
	zoom: 1;
	list-style: none;
	padding: 5px;
}
#read-wall li img {
	position: relative;
float: left;
margin-right: 10px;
padding: 4px;
width: 54px;
height: 54px;
border: 1px solid #eee;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
background: #fff;
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: .4s;
-webkit-transition: -webkit-transform .4s ease-out;
-moz-transition: -moz-transform .4s ease-out;
transition: transform .4s ease-out;
}
#read-wall .container {
	height: auto;
	background: url(images/pattern.png) repeat;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px;
}

效果大致如下：
 
        
            Reader Wall – WordPress读者墙代码（头像、用户名、评论者链接）


 https://www.rengang.com.cn/reader-wall.html
                  
        
        
		「真诚赞赏，手留余香」
		
	
	
	
		
			
			 任刚 rengang.com.cn
			赞助用于本站维护,手机长按识别二维码。

		
		
			
				
				
				
				
				
				
			
			
								
			
		
		
			
			 
             
		
	        
        
        
  
   

      
        
		
		
        
         任刚（rengang.com.cn）整理分享，欣赏作品版权均归原作者所有，仅供学习交流。点击上方图标与好友分享！
        
              
        
	
		发表回复 取消回复
要发表评论，您必须先登录。