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

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

By 砼砼 on 2009 年 11 月 29 日

这篇日志在2011-10-31 01:38:59最后一次修订。

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

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

既然添加了，那还是简单的记录一下，添加过程～具体的原理，流程等等就不细说了，需要的童鞋可以和我一样去参考（抄袭）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: '正在拉取评论请稍候～',
                    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: '拉取评论信息成功！',
                    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: '拉取评论信息失败！',
                    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下面能不能通过呢？

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

Posted in , | Tagged , , , , , | 22 Responses

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

小时候,一直以为自己的咪咪是蚊子叮的,每天洗完澡以后就拿着盒万金油在搽,希望它可以早日康复,直到念大班的时候，我放弃了。 http://t.qq.com/tosspig

相关推荐

日志信息

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

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

Articles in this series

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

  1. 回复TA 吓我一跳
    吓我一跳 2009 年 11 月 29 日 at 10:23 |

    呵呵 这个没试过

  2. 回复TA derek
    derek 2009 年 11 月 29 日 at 11:27 |

    我都没IE6了 :mrgreen:

  3. 回复TA A.shun
    A.shun 2009 年 11 月 29 日 at 15:51 |

    我用嵌套的就需要这个了

  4. 回复TA 砼砼
    砼砼 2009 年 11 月 29 日 at 20:59 |

    @吓我一跳:那尝试一下了，哈哈
    @derek:几乎玩独立BLOG的很少有吧
    @A.shun:拿去吧，呵呵

  5. 回复TA zwwooooo
    zwwooooo 2009 年 11 月 30 日 at 11:50 |

    我有ie6，但我前几天升级到ie8了，哇咔咔，你自个用ietester吧

    话说我的是嵌套，貌似就不折腾这个了

  6. 回复TA 卢松松
    卢松松 2009 年 11 月 30 日 at 19:31 |

    我看看啥效果呢？

  7. 回复TA zrl
    zrl 2009 年 11 月 30 日 at 21:45 |

    呃，其实我想和你换个链接的，你的链接我已经加上了~ :cool:

  8. 回复TA 疾风
    疾风 2009 年 12 月 01 日 at 03:14 |

    挺酷的 恶化和

  9. 回复TA Halu
    Halu 2009 年 12 月 03 日 at 03:00 |

    @砼砼:您好…照你上方所教的方式，我的主題沒辦法顯示。我的主題是 “Techified”，請問是少了些什麼?!還要更改那些地方呢?!comments-tip.js 這又是怎樣生成的?!不好意思，剛入門的菜鳥…什麼都不懂!!請您見諒…. :smile:

  10. 回复TA 砼砼
    砼砼 2009 年 12 月 03 日 at 13:33 |

    @zwwooooo:事实说明你是坏人。。。。
    @卢松松:嘿嘿
    @zrl:已经添加了,嘿嘿

  11. 回复TA 砼砼
    砼砼 2009 年 12 月 03 日 at 15:54 |

    @Halu:应该是DIV结构不同的问题，

    comments-tip.js

    汗，我写错文件名了。。。马上更改，

  12. 回复TA mytion
    mytion 2009 年 12 月 03 日 at 19:57 |

    我来学习了。 :x 先做笔记。

  13. 回复TA Halu
    Halu 2009 年 12 月 03 日 at 23:25 |

    @冰淼·十二少:原來是寫錯了~難怪覺得奇怪!! DIV 的結構嗎?!那我就再用不靈光的腦袋再想看看啦!!謝謝~~

  14. 回复TA Halu
    Halu 2009 年 12 月 03 日 at 23:26 |

    @砼砼:怪了，怎麼點回覆給你，是回覆到 @冰淼·十二少??

  15. 回复TA 砼砼
    砼砼 2009 年 12 月 04 日 at 13:06 |

    @Halu:估计当时我在调整后台，，，，囧

  16. 回复TA andy
    andy 2009 年 12 月 05 日 at 08:40 |

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

  17. 回复TA Halu
    Halu 2009 年 12 月 05 日 at 19:55 |

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

  18. 回复TA 砼砼
    砼砼 2009 年 12 月 13 日 at 12:00 |

    @andy:那个是用的插件

  19. 回复TA blueandhack
    blueandhack 2010 年 06 月 11 日 at 20:32 |

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

  20. 回复TA blueandhack
    blueandhack 2010 年 06 月 13 日 at 13:06 |

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

  21. 回复TA Demon
    Demon 2011 年 09 月 15 日 at 22:49 |

    演示效果好像木有了呢。

  22. 回复TA 砼砼
    砼砼 2011 年 10 月 06 日 at 14:54 |

    @Demon:还有的哦。。。

Leave a Reply

无觅相关文章插件，快速提升流量