Add CSS3 to your WordPress blog, that is, the most active readers of your article are displayed on a separate page, first look at the effect:
1. Copy the page.php of the theme, Save as readerwall.php, and add the code at the top of it
| 12345 |
< ?php/*Template Name: Reader wall*/?> |
2. Then change the file below to find
| 1 |
< ?php the_content(‘‘);?> |
Add the following code in front of it
| 12345678910111213141516171819 |
<!-- 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 != ‘这里改成你自己的邮箱‘ AND post_password=‘‘ AND comment_approved=‘1‘ AND comment_type=‘‘) AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 39";//大家把管理员的邮箱改成你的,最后的这个39是选取多少个头像，大家可以按照自己的主题进行修改,来适合主题宽度 $wall= $wpdb->get_results($query); $maxNum= $wall[0]->cnt; foreach($wallas$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= ‘36‘, $default= get_bloginfo(‘wpurl‘).‘/avatar/default.jpg‘); $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读者墙 --> |
3. Add the following CSS style to the theme's Style.css file (I have modified it, you can also modify the corresponding code according to your own theme)
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66676869707172737475767778798081828384858687888990919293949596979899100 |
.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-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; font-size:12px; 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}.readers-list { line-height: 18px; text-align: left; _zoom: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-text-overflow: ellipsis;} |
4. Create a new page, template select readerwall.php, the content is not filled, the title "Reader Wall", and then add the page to the menu.
Get!
Add CSS3 reader wall to your WordPress blog
