2010年08月28日 143条评论

点击生成评论引用的jQuery代码

题外话:这几天一直在折腾Ajax评论提交,走了一个大圈还是回到了原点:willin的Ajax评论提交方式。不过算是了解了,可以自己升级修改了,精简了一些不必要的功能加快评论速度,再改改一些效果……麻烦大家继续测试ing

好,进入正题:这篇文章所说的内容其实对于熟悉jQuery的朋友来说非常简单,但因为有人要,就贴出来,顺便解决一下即将来临的文囧。

前提

1. 挂 jQuery 库,如果没有挂就把下面的js调用扔到 header.php 里面的 <?php wp_head() ?> 前面

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2. 使用标准的评论结构,参考 WordPress 官方 http://codex.wordpress.org/Function_Reference/wp_list_comments 的 Examples 部分

准备

在functions.php找到主题的回调函数,找到类似下面的

<div class="reply">
	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>

复制一份稍微修改一下,变成如下

<div class="reply">
	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
<div class="quote">
	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>

注:你可能还需要修改 quote 显示样式css,最简单的就是在 .reply 上加上一个 .quote,自个折腾

jQuery代码:(把下面的添加到你的js文件或者直接加到footer.php的<?php wp_foot() ?>后面,用<script type="text/javascript"></script>引用)

2010.8.28 Edit)漏一句jQ代码,为复制的reply按钮文字换为“quote”

//评论引用 by zwwooooo
jQuery(".quote a").text("quote");//替换复制的reply按钮文字为quote
jQuery('.quote').click(function() {
	var atname = jQuery(this).parent().find('cite:first').text();//获得作者名称
	var quotecontent = jQuery(this).parent().find('.comment-content:first').html();//获得评论内容
	jQuery("#comment").attr("value","<blockquote><strong>" + atname + ": </strong>" + quotecontent + "</blockquote>\n").focus();//组合成引用
});

如果你要带@xxx的就如下:

//评论引用 by zwwooooo
jQuery(".quote a").text("quote");//替换复制的reply按钮文字为quote
jQuery('.quote').click(function() {
	var atid = '"#' + jQuery(this).parent().attr("id") + '"';//获取评论ID
	var atname = jQuery(this).parent().find('cite:first').text();//获得作者名称
	var quotecontent = jQuery(this).parent().find('.comment-content:first').html();//获得评论内容
	jQuery("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>\n" + "<blockquote><strong>" + atname + ": </strong>" + quotecontent + "</blockquote>\n").focus();//组合成引用
});

有些主题比较特殊,也就是说自定义了评论结构,那么就要根据自个主题修改 jQ 选择器了,不懂可以翻翻 jQuery 手册。

就这样,有兴趣的慢慢折腾。

zww
or
oooo

“点击生成评论引用的jQuery代码”有143条评论

  1. 风小 says:

    :smile: 很不错,我也要多学学jQuery了。。

    1. zwwooooo says:

      @风小 jQ很有趣很强大

    2. 默玉 says:

      @zwwooooo
      博主很强大,收藏你博客了

    3. layouswitch says:

      @风小

      风小: 很不错,我也要多学学jQuery了。。

      测试下表情能引用不 我的不可以

    4. zwwooooo says:

      @layouswitch
      看来是不行,我没注意这个,貌似不太需要,连引用都很少人用。

    5. @zwwooooo

      zwwooooo: 看来是不行,我没注意这个,貌似不太需要,连引用都很少人用。

      测试一下引用

    6. crazy says:

      @coreldraw插件

      coreldraw插件:

      zwwooooo: 看来是不行,我没注意这个,貌似不太需要,连引用都很少人用。
      测试一下引用

      测试看看。。。。

  2. 园子 says:

    没时间折腾这个了
    呵呵。

    1. zwwooooo says:

      @园子 有时间再折腾

  3. 有点蓝 says:

    会是什么效果呢? 测试一下。

    1. zwwooooo says:

      @有点蓝

      有点蓝:

      会是什么效果呢? 测试一下。

      没啥效果,就是生成引用,像我这个回复一样

    2. MOPVHS says:

      @zwwooooo
      :twisted: 这个引用样式好看~~

    3. zwwooooo says:

      @MOPVHS
      嘻嘻,不错吧

  4. 小邪 says:

    唔,如果无限嵌套的时候顺序乱掉了,倒是必须的呢 ~

    1. zwwooooo says:

      @小邪 讨论多也需要,但的确很少用

  5. [...] 总觉得嵌套评论嵌套过多了会有乱七八糟的感觉,所以今天为评论增加了@功能,并将所有的评论都靠左对齐。本来想自己写的,但发现网上有不少现成的代码,就决定懒一把。但在本文我不想解释怎么去用这些代码,因为我发现这么做没有意义,但事实上却有很多人愿意copy一段代码成一篇文章,曾今我也这么干过,但现在我对这些做法“深恶痛疾”,因为我发现在搜索某些问题时总是千篇一律的搜出来copy版本,这花费了我大量时间去删选!下面这段代码来自zwooooo的博客 Laguage» jQuery Title» 评论quote [...]

  6. qiumu says:

    :evil: 我怎么弄都不行,不知道为什么。

    1. zwwooooo says:

      @qiumu
      这个要懂点jQuery才行,或者你的主题用的评论结构跟默认主题一样。

  7. 主角 says:

    正在寻找完美的解决方法,能够即时显示GRAVATAR头像。

    1. zwwooooo says:

      @主角
      有人写过吧,搜搜

  8. emric says:
    <div id="comment-2" class="comment-body">
    <div class="comment-author"><img alt="" src="" class="avatar avatar-28 photo" ></div>
    <div class="comment-head">
    <span class="name">emric</span>
    <div class="date">四月 13, 2012 18:33:18 #1</div>
    </div>
    <div class="comment-entry">
    <div class="comment-text">
    <p>测试测试</p>
    </div>
    <div class="comment-reply"><a class="comment-reply-link" href="" onclick="">@</a></div>
    </div>
    </div>

    评论样式素这个, 我真的没辙了 TAT,木会JS

    1. zwwooooo says:

      @emric
      你这结构肯定不能直接使用文章中的代码,我文中好像说了,评论结构要跟 WP 官方的那种结构相同才能直接套用,不然就要自己根据自己的评论结构修改 jQuery 代码。

    2. emric says:

      @zwwooooo
      改了好几次吧,就素获取不到ID, 和名字,

    3. zwwooooo says:

      @emric
      假定你在(这是根据你评论提供的结构复制的)

      <div class="comment-reply"><a class="comment-reply-link" href="" onclick="">@</a></div>

      后面复制了一份回复按钮为如下

      <div class="comment-reply quote"><a class="comment-reply-link" href="" onclick="">@</a></div>

      然后你试试修改过的jQ:

      jQuery(".quote a").text("quote");//替换复制的reply按钮文字为quote
      jQuery('.quote').click(function() {
      	var atid = '"#' + jQuery(this).parent().parent().attr("id") + '"';//获取评论ID
      	var atname = jQuery(this).parent().parent().find('.name:first').text();//获得作者名称
      	var quotecontent = jQuery(this).parent().find('.comment-text:first').html();//获得评论内容
      	jQuery("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>\n" + "<blockquote><strong>" + atname + ": </strong>" + quotecontent + "</blockquote>\n").focus();//组合成引用
      });
    4. emric says:

      @zwwooooo
      TAT, 成功了, ZWO 大叔素好淫,好淫,

    5. zwwooooo says:

      @emric
      好淫难做,好淫吃亏。共享精神+刚好有时间罢了 :grin:

    6. emric says:

      @zwwooooo
      很猥琐的说肿么去掉IMG这些标签呢?unwrap()? :grin:

    7. emric says:

      @zwwooooo
      找到了 =v = 素text()

  9. SEV says:

    问题是二级后的评论引用,把@xx和链接给引用进去了,怎么办排除呢?

    1. zwwooooo says:

      @SEV
      修改下jQ代码,看看手册就懂了

    2. 大肥羊 says:

      @zwwooooo
      大叔,你这主题的 Quote 失效了。 :mrgreen:

      1. zwwooooo says:

        @大肥羊
        对的,其几天发现了,没去修正

  10. 大佬怎么才能像你现在这样快速提交评论。

    1. zwwooooo says:

      没什么吧,我的也没怎么优化,服务器速度好点,哦,还有服务器里面我用用 Postfix 代替 sendmail 来发邮件,或者你干脆关掉邮件通知。

发表评论

昵称 *

网址

B em del U Link Code Quote