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 != 'dangwei831120@gmail.com' 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 != ‘dangwei831120@gmail.com’ 设置自己的邮箱

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

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

《WordPress添加JQuery效果读者墙》有24个想法

  1. 请问两个头像之间的间隔是怎么改的? 还有我的设置好之后,放上鼠标头像会变大.离开鼠标之后 头像不回到原位,而是向左移动,每个都往左移动了大约20px.请问是什么情况? 急求博主帮助.

    1. 头像之间的间隔可以修改CSS (.wall img);头像移动可以试着调整 jQuery(“.wall img”).hover(function() 内容。建议安装firebug调试,因为主题不一样所以小细节还是要自己动手修改的。

      1. 还想请问下 博主 这个 读者墙有没有时间限制 就像只显示最近30天 还是所有的都显示?
        或者是只显示本月评论的人? 请博主指点一下.
        您的那个放大效果 我没用.我在网上找到一个 用纯css放大图片的效果.我看着效果还不错 .就拿来用了.效果博主可以去我的博客看看.

发表评论

电子邮件地址不会被公开。 必填项已用*标注