You are here: Home » All Categories » WordPress » WP Trick » 点击生成评论引用的jQuery代码

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

Aug 28th, 2010 10:18 | Leave a comment?(130) Go to comments

题外话:这几天一直在折腾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 手册。

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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25284

Filed under

WP Trick

| Tags:

, ,

Related Posts

Most Popular

130 Comments.

⊕Leave a comment?
  1. 风小 风小 Firefox 3.6.6Windows XP

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

    41楼
  2. 园子 园子 Firefox 3.6.8Windows XP

    没时间折腾这个了
    呵呵。

    42楼
  3. 有点蓝 有点蓝 TheWorld BrowserWindows XP

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

    43楼
  4. 小邪 小邪 Google Chrome 6.0.496.0Windows XP

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

    44楼
  5. qiumu qiumu Firefox 4.0Windows 7

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

    46楼
    • zwwooooo zwwooooo Namoroka 3.6.17Windows 7

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

  6. 主角 主角 Google Chrome 16.0.912.75Windows XP

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

    47楼

Leave a Reply


Trackbacks and Pingbacks: