JQ仿Twitter最新消息滚动显示最新评论

网站APP, 转自点点 13 年前 回复

, , , , ,

看到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

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)