给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的样式可以根据自己的模版来修改。有任何疑问可以在这里交流!
GOOD,教程终于来了,看来我要折腾一下,把他应用到我的新主题里了
写的不好 凑活着看吧
不错。学习了~ 😎
这个不错 嘿嘿。。以后换wp 可以用到的
在什么主题上都能实现的
博主分享的很细心,学习了,以后或许会用的上。
呵呵.学习了!!不错…
这个代码和我的完全一样
都是mg12的主题 呵呵
呵呵,看起来挺酷的,有时间也添加一个
不错 以后回访便方便了 学习了
有空也做一个
没搞出来,放弃代码版本。
我弄出来的说,吼吼哦~!
请问两个头像之间的间隔是怎么改的? 还有我的设置好之后,放上鼠标头像会变大.离开鼠标之后 头像不回到原位,而是向左移动,每个都往左移动了大约20px.请问是什么情况? 急求博主帮助.
头像之间的间隔可以修改CSS (.wall img);头像移动可以试着调整 jQuery(“.wall img”).hover(function() 内容。建议安装firebug调试,因为主题不一样所以小细节还是要自己动手修改的。
还想请问下 博主 这个 读者墙有没有时间限制 就像只显示最近30天 还是所有的都显示?
或者是只显示本月评论的人? 请博主指点一下.
您的那个放大效果 我没用.我在网上找到一个 用纯css放大图片的效果.我看着效果还不错 .就拿来用了.效果博主可以去我的博客看看.
$query=”“ 这里定义了查询限制 可以自己设定
用了贵博的代码了,可是我的怎么没有放大效果啊?
这跟你用的主题有关系 以上代码在inove下直接用 在别的主题下 还需要自己调试
这个很不错
我弄出来的说,谢谢奋斗兄哦~!
晕。。。。
还不错呢。。。。。。。。。。
我也在用带血条的,不过在IE下显示不太好。