看到twitter那种评论滚动效果很喜欢,各大微博站点首页一开始也普遍采用这种方式,显得非常具有实时性。就想能不能在WordPress里也 让评论这样滚动显示。查阅了一些资料,自己亲自都各种方法试了下,找了了个最好的最简单的办法,效果如侧栏所示。有朋友发邮件来问我这个是怎么实现的。实现的方法非常简单,大家按着我下面的提示几分钟就能搞定。
首先,在你wordpress后台或者ftp中打开wp recentcomments插件的wp recentcomments.php文件,找到wp_widget_recentcomments函数。
function wp_widget_recentcomments($args) { if ( ’%BEG_OF_TITLE%’ != $args['before_title'] ) { if ( $output = wp_cache_get(‘widget_recentcomments’, ’widget’) ) { return print($output); } ob_start(); } extract($args); $options = get_option(‘widget_recentcomments’); $title = emptyempty($options['title']) ? __(‘Recent Comments’, ’wp-recentcomments’) : $options['title']; echo $before_widget; echo $before_title . $title . $after_title; //加入了一个div标签限制高度,并给ul命名为rcslider echo ’<div style=“height:320px;overflow:hidden”><ul id=“rcslider”>’; wp_recentcomments(); //注意添加闭合标签 echo ’</ul></div>’; echo $after_widget; if ( ’%BEG_OF_TITLE%’ != $args['before_title'] ) { wp_cache_add(‘widget_recentcomments’, ob_get_flush(), ’widget’); } }
修改后保存。
再打开主题中的footer.php将以下代码放到合适位置。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var scrtime; $("#rcslider").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#rcslider");//注意这里面的名字必须与前面插件中我们给ul命名的id相同 var liHeight = $ul.find("li:last").height(); $ul.animate({marginTop : liHeight+3+"px"},1000,function(){ $ul.find("li:last").prependTo($ul); $ul.find("li:first").hide(); $ul.css({marginTop:0}); $ul.find("li:first").fadeIn(1000); }); },3000); }).trigger("mouseleave"); });</script>
注意这两段javascript必须连着放一起,其实位置都可以,不过footer还是最好的。怎么样,效果还满意不?这个效果其他地方也是可以用的!
转自http://www.iove86.com/wordpress-themes/recentcomment-slide-display-code.html
声明:本文采用 BY-NC-SA 协议进行授权,如无注明均为原创,转载请注明转自 你好!刘
本文地址:JQ仿Twitter最新消息滚动显示最新评论
本文地址:JQ仿Twitter最新消息滚动显示最新评论
发表评论