看到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最新消息滚动显示最新评论
发表评论