WordPress添加JQuery效果读者墙

给WordPress添加读者墙不仅使博客内容充实，而且可以方便回访。WordPress读者墙是根据访客的留言来统计并展示Gravatar头像的博客页面，样子请看JQuery效果读者墙。

JQuery效果读者墙实现并不复杂，首先在自己的博客主题模版中找到文章页面模版(single.php)，然后新建PHP文件如(ReaderWall.php) 将single内容复制到ReaderWall中并修改第二行Template Name为ReaderWall。

然后在适当的位置添加读者墙代码就可以了，这个位置因主题而定也不好描述，我把我的JQuery效果读者墙模版代码贴出来，大家可以根据自己的主题来修改。

<?php
/*
Template Name: commentswall
*/
?>

<?php get_header(); ?>
<?php $options = get_option('inove_options'); ?>

<?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

<div id="post-<?php the_ID(); ?>">

<div align="center"><h2>在此留言就可以挂到墙上哦</h2></div>
<div><BR></div>

<!-- start 读者墙 -->


<style type="text/css">
div,img,ul,li{margin:0; padding:0;}
img{border:0; vertical-align:top;}
ul,li{list-style:none;}
.wall{width:605px; height:160px; background:#FFF; margin:0px 0 100px 0px;}
.wall a{padding:3px;}
.wall a:hover img {opacity:1;}
.wall img{width:40px; height:40px; position:absolute;-moz-box-shadow:2px 2px 6px #999999; background:none repeat scroll 0 0 #F4F4F4; border:1px solid #CCCCCC !important; opacity:0.8; padding:1px;}
.wall li{float:left; display:inline; width:40px; height:40px; position:relative; margin:10px 0 0 10px;}
.zin{z-index:999;}
</style>
<script type="text/javascript">
jQuery(function(){
	jQuery(".wall img").hover(function(){
		jQuery(this).stop(true).parents("li").addClass("zin").end().animate({left:-20,top:-20,width:80,height:80},200);
	},function(){
		jQuery(this).stop(true).parents("li").removeClass("zin").end().animate({left:0,top:0,width:40,height:40},200);
	});
});
</script>


<div class="wall"><ul>
<?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 1 MONTH ) AND user_id='0' AND comment_author_email != '[email protected]' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 48";

    $wall = $wpdb->get_results($query);

    foreach ($wall as $comment)

    {

        if( $comment->comment_author_url )

        $url = $comment->comment_author_url;

        else $url="#";

        $tmp = "<li><a href='".$url."' target='_blank' title='".$comment->comment_author." (".$comment->cnt.")'>".get_avatar($comment->comment_author_email, 80)."</a></li>";

        $output .= $tmp;

     }

    echo $output ;

?>
<ul></div>
<BR>
<BR>
<!-- end 读者墙 -->
<div>
<?php the_content(); ?>
<div></div>

</div>

</div>

<?php else : ?>
<div>
<?php _e('Sorry, no posts matched your criteria.', 'inove'); ?>
</div>
<?php endif; ?>

<?php include('templates/comments.php'); ?>

<!--<?php //wp_link_pages( $args ); ?>-->

<?php get_footer(); ?>

说明：

.wall{width:605px; height:160px; background:#FFF; margin:0px 0 100px 0px;} 这行可以调整墙的大小和位置

comment_author_email != ‘[email protected]’ 设置自己的邮箱

comment_author_email ORDER BY cnt DESC LIMIT 48″;设置显示显示头像的个数

CSS的样式可以根据自己的模版来修改。有任何疑问可以在这里交流！