How to implement reader wall in wordpress

#How to implement reader wall in wordpress?

The example in this article describes the method of implementing the reader wall in WordPress. Share it with everyone for your reference. The specific implementation method is as follows:

Recommended: "wordpress tutorial"

1. Copy the PAGE.php page, rename it to readerwall.php, and then Add the following code at the top of it:

The code is as follows:

<?php 
/* 
Template Name: Reader wall 
*/ 
?>

Tip: You can modify part of the code before running it.

2. Add the following code where you need to add a reader wall:

The code is as follows:

<!-- 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=&#39;0&#39; AND comment_author_email != &#39;改成你的邮箱账号&#39; AND post_password=&#39;&#39; AND comment_approved=&#39;1&#39; AND comment_type=&#39;&#39;) AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 39";//
?>

Please change the administrator’s email address to yours, the last one is 39 How many avatars are selected? You can modify it according to your own theme to suit the theme width. The code is as follows:

The code is as follows:

<?php 
$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 = &#39;36&#39;, $default = get_bloginfo(&#39;wpurl&#39;).&#39;/avatar/default.jpg&#39; ); 
$tmp = "<li><a target="_blank" href="".$comment->comment_author_url."">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br>".$comment->comment_author_url."</a></li>"; 
$output .= $tmp; 
} 
$output = "<ul class="readers-list">".$output."</ul>"; 
echo $output ; 
?> 
<!-- end 读者墙 -->

Tip: You can modify part of the code before running it.

3. Add the following style to style.css in the theme directory:

The code is as follows:

.readers-list{line-height:18px;text-align:left;overflow:hidden;_zoom:1} 
.readers-list li{width:200px;float:left;*margin-right:-1px} 
.readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2)} 
.readers-list a{position:relative;display:block;height:36px;margin:4px;padding:4px 4px 4px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:2px;box-shadow:#eee 0 0 2px} 
.readers-list img,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out} 
.readers-list img{width:36px;height:36px;float:left;margin:0 8px 0 -40px;border-radius:2px} 
.readers-list em{color:#666;font-style:normal;margin-right:10px} 
.readers-list strong{color:#ddd;width:40px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei} 
.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none} 
.readers-list a:hover img{opacity:.6;margin-left:0} 
.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei} 
.readers-list a:hover strong{color:#EE8B17;right:150px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}

Tips: You can modify part of the code first and then run it.

I hope this article will be helpful to everyone in building a WordPress website.

The above is the detailed content of How to implement reader wall in wordpress. For more information, please follow other related articles on the PHP Chinese website!