Browse: Home / , / WP:跨页悬浮显示 @ 评论 (抄袭篇)

WP:跨页悬浮显示 @ 评论 (抄袭篇)

By 砼砼 on 2009年11月29日

这篇日志在2009-12-03 15:56:04最后一次修订。

不得不承认，我是一个极度缺乏创意的人，极度缺乏想象力的人

一觉睡醒闲来无事，又添加了一个比较鸡肋的功能。。。。。

既然添加了，那还是简单的记录一下，添加过程～具体的原理，流程等等就不细说了，需要的童鞋可以和我一样去参考（抄袭）NeoEase的跨页悬浮显示 @ 评论 (代码篇)/（原理篇）

同样的这次还是在hybird的子主题上面添加，其实和普通主题除了评论跨页回调其他的没什么不一样，呵呵

我会尽量写一些注释在代码里面，应该都能看懂了吧。。。

还有，我发现每次我写点东西总是要废话一大篇，哎～习惯了啊。。。。

@ 回复是个好东西, 因为它结构简单, 处理方便; 嵌套回复则有更友好的用户体验, 可以调动访客回复的积极性. 对 @ 回复而言, 悬浮显示 @ 评论 (显示评论提示框) 在一定程度上可以提升 @回复的用户体验. 但是当评论出现分页的时候, 评论提示框就像被阉割一样, 功能不全. 表现为不能获取其他页面的评论信息, 本文将告诉你如何跨页处理.

step by step：

打开你主题的 functions.php文件，在里面添加一下代码：

<?php
wp_enqueue_script("prototype");//引入WP自带的prototype内裤
wp_register_script('commentstip', IMT_GREEN_URL.'/js/comments-tip.js', false, '0.2');
wp_enqueue_script('commentstip', false, false, '0.2');
//上面这三行根据自己的情况选择插入的地方
//因为只有is_single()||is_page()这样的地方才有评论啊，哈哈

add_action('init', 'imt_load_comment');//这一段是引入一个action，
function imt_load_comment(){
    if($_GET['action'] =='load_comment' && $_GET['id'] != ''){
        $comment = get_comment($_GET['id']);
        if(!$comment) {
            fail(printf('Whoops! Can\'t find the comment with id  %1$s', $_GET['id']));
        }
 
        hybrid_comments_callback($comment, null,null);
        hybrid_comments_end_callback();//这个和上面的一行是格式化我的评论样式
        die();
    }
}
?>

JS里面使用了“cumulativeOffset”。所以需要引入prototype。就因为忘记引入这个东东，浪费了我好多时间。。。。

下面是/js/comments-tip.js的代码：

$imt(document).ready(function() {
var id=/^#comment-/;
var at=/:$/;
$imt('#comments li p a').each(function() {
    if($imt(this).attr('href').match(id)&& $imt(this).text().match(at)) {
        $imt(this).addClass('tip-atreply');
    }
});
//找出需要悬浮显示 @ 评论的地方，并加上tip-atreply

$imt('.tip-atreply').hover(function() {
    var target = this;
    var _commentId = $imt(this).attr('href');
 
    if($imt(_commentId).is('.comment')) {
        $imt('<li class="comment-tip"></li>').hide().html($imt(_commentId).html()).appendTo($imt('ol.comment-list'));
        $imt('ol.comment-list .comment-tip').css({
            left:Position.cumulativeOffset(target)[0] + $imt(target).width() + 10,
            top:Position.cumulativeOffset(target)[1] - 22
        }).fadeIn(400);
    } else {
        var id = _commentId.slice(9);
        $imt.ajax({
            type:         'GET'
            ,url:         '?action=load_comment&id=' + id
            ,cache:       false
            ,dataType:    'html'
            ,contentType: 'application/json; charset=utf-8'
 
            ,beforeSend: function(){
                $imt('<li class="comment-tip"></li>').hide().html('<p class="ajax-loader msg"></p>').appendTo($imt('ol.comment-list'));
                $imt('ol.comment-list .comment-tip').block({
                    message: '<img src="'+imt_mysite_url+'images/ajax-loader.gif" />正在拉取评论请稍候～',
                    fadeIn: 1000,
                    fadeOut: 1000,
                    css: {width: '350px', top: '10px',left: '', right: '10px', border: 'none',  padding: '5px',  backgroundColor: '#000000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .6, color: '#fff',cursor:'wait' }  
                });
               
                $imt('ol.comment-list .comment-tip').css({
                    left:Position.cumulativeOffset(target)[0] + $imt(target).width() + 10,
                    top:Position.cumulativeOffset(target)[1] - 22
                }).fadeIn(400);
            }
 
            ,success: function(data){
                $imt('ol.comment-list .comment-tip').block({
                    message: '<img src="'+imt_mysite_url+'images/ajax-loader.gif" />拉取评论信息成功！',
                    fadeIn: 1500,
                    fadeOut: 1500,
                    timeout: 4000,
                    showOverlay: false,
                    centerY: false,
                    css: {width: '620px', top: '10px',left: '', right: '10px', border: 'none',  padding: '5px',  backgroundColor: '#000000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .6, color: '#fff',cursor:'wait' }
                });
                var addedComment = $imt(data);
                addedComment.hide().appendTo($imt('ol.comment-list'));
                $imt('ol.comment-list .comment-tip').html(addedComment.html());
            }
 
            ,error: function(){
                $imt('ol.comment-list .comment-tip').block({
                    message: '<img src="'+imt_mysite_url+'images/ajax-loader.gif" />拉取评论信息失败！',
                    fadeIn: 1500,
                    fadeOut: 1500,
                    timeout: 4000,
                    showOverlay: false,
                    centerY: false,
                    css: {width: '620px', top: '10px',left: '', right: '10px', border: 'none',  padding: '5px',  backgroundColor: '#000000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .6, color: '#fff',cursor:'wait' }
                });
                $imt('ol.comment-list .comment-tip').html('<p class="msg">拉取评论信息失败！</p>');
            }
        });
    }
}, function() {
    $imt('ol.comment-list .comment-tip').fadeOut(400, function(){
        $imt(this).remove();
    });
});
})

我做了一些小的修改，添加了一点点特效。。。感觉没什么好解释。。。每个主题的DIV结构不一样，参照修改吧。。。

当然我不要忘了加入CSS样式，把我的给大家参考一下：

#comments .comment-tip{
position:absolute;
z-index:999;
border:1px solid #000000;
background-color:#ffffff;
padding:5px 5px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
width:626px;}

忘记了是在哪个时候弄的这段代码了，马马虎虎将就用用吧，我相信你改的肯定比我好看（个屁）～

具体的DOME可以参考我的blog留言比较多的是“留言本”，去看看吧，半夜起来弄的，没有测试兼容性，在FF通过不知道IE6下面能不能通过呢？

有条件的童鞋帮忙测试一下了，谢谢，记得把结果告诉我！

收藏&分享:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • Haohao
  • MisterWong
  • PDF
  • Ping.fm
  • QQ书签
  • RSS
  • StumbleUpon
  • Twitter
  • 豆瓣
  • 豆瓣九点

Posted in , | Tagged , , , , , | 20 Responses

Burn after reading » Now you're done reading. What's next?

砼砼

小时候,一直以为自己的咪咪是蚊子叮的,每天洗完澡以后就拿着盒万金油在搽,希望它可以早日康复,直到念大班的时候偶放弃类

相关日志

日志信息

如需转载烦请添加以下信息: 本文内容转载自砼砼's blog[http://TossP.com].
如喜欢这篇文章或者本站,建议您RSS订阅本站,以及时地获取更多精彩内容!

可以通过订阅Comments RSS 2.0 feed，一直不断的跟踪这篇日志的的评论~
欢迎您点击发表评论参与这篇日志的讨论，如果您需要引用或者转载此文，请确保让我知道，并建议使用trackback将转载信息通知到本页面。

Articles in this series

Articles in this series

20 responses to “WP:跨页悬浮显示 @ 评论 (抄袭篇)”

  1. andy
    andy
    2009年12月05日 at 08:40 |

    对了 ，你是怎么实现文章里面的代码在黑框框里面显示的。。教教我吧。。我博客也更换了主题，现在兼容性好多了。………… :grin:

    Notify
  2. Halu
    Halu
    2009年12月05日 at 19:55 |

    @砼砼:喔~~~我現在已經暫時放棄這個效果了!!完全搞不懂怎麼修改.....希望以後能出相關插件之類的!!

    Notify
  3. 砼砼
    砼砼
    2009年12月13日 at 12:00 |

    @andy:那个是用的插件

    Notify
  4. blueandhack
    blueandhack
    2010年06月11日 at 20:32 |

    你好~
    我很喜欢hybird可是不知道怎么去改~
    你能教教我吗？
    我的QQ已留下
    能不能交流一下~
    谢谢~ :grin:

    Notify
  5. blueandhack
    blueandhack
    2010年06月13日 at 13:06 |

    问一下comments-tip.js这个放到哪里？？
    你看看我的为什么不可以？？
    我的也是hybird的主题
    没有修改过的~
    请加我的QQ

    Notify
1 2

Leave a Reply