使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

添加 Ctrl+Enter 快捷回复
这里送上两种方法，首先是 jQuery 方法，前段时间一直在研究 jQuery ，因此对 jQuery 方法比较熟悉，如果你的主题本来已经加载 jQuery 库，建议你使用下面的方法。

把这段代码加入 js 文件中，如果你已经加载 jQuery ，现在就可以使用 Ctrl+Enter 进行快捷回复。

jQuery(document).ready(function($){
//Ctrl+Enter回复
  jQuery(document).keypress(function(e){
    if(e.ctrlKey && e.which == 13 || e.which == 10) {
      jQuery("#commentform").submit();
    }
  })
});

解释一下代码，在 chrome 等现代浏览器中， js 是使用 e.which ==13 判断 Enter ，在 ie6 中， js 是使用 e.which ==10 判断 Enter 。

另一种方法：
在 comments.php 中找到一段类似以下代码（即评论框的代码），

<textarea name="comment" id="comment" rows="10" cols="50" tabindex="4"></textarea>

替换为以下的一段代码：

<textarea name="comment" id="comment" rows="10"?cols="50"?tabindex="4" onkeydown="if(event.ctrlKey&&event.keyCode==13 || Key&&event.keyCode==10){document.getElementById('submit').click();return false};"></textarea>

实现 Ctrl+Enter 快捷回复的原理跟 jQuery 版的差不多，这里就不作详细解释了。

实现  @回复 
在回复时带有“ @ ”的功能大家应该不陌生了，在微博， BBS 中都可以见到“ @ ”的身影，连腾讯的 Qzone 也加入了“ @回复 ”的功能。的确，“ @回复 ”使到回复的对象更加清晰了，对于多重回复效果更加明显。

但是， WordPress 的评论模板中并没有自带这个功能，因此我们需要手动添加进去，其实这个功能在 WordPress 中已经比较流行了，不少主题中都带有这个功能，实现的原理也有多种，而我在本文中介绍的是 jQuery 实现的方法，由于网上流传的文章大多都是直接给出 jQuery 代码，没有详细的解释，而不同的网站 DOM 不一定相同，因此不熟悉 jQuery 的童鞋在使用 jQuery 实现“ @回复 ”时可能会出现各种问题。

1.加载 jQuery 库，可以直接用 google 的。

2. jQuery 代码，可以直接放到 js 文件中。

jQuery(document).ready(function($){
$('.comment-reply-link').click(function() {
   //获取回复者的id
   var atid = '"#' + $(this).parent().parent().attr("id") + '"';
   //获取回复者的昵称
  var atname = $(this).parent().find('.comment_author').text();
$("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>").focus();
});
$('#cancel-comment-reply a').click(function() {
$("#comment").attr("value",'');
});
});

3.解释 jQuery 代码

在实现“ @回复 ”中，关键是获取所要回复的对象的 id 和昵称，因此定义了两个量 atid ， atname ，分别用于保存所要回复的对象的 id 和昵称。当用户用鼠标单击 .comment-reply-link 后jQuery会获取其上两级父元素的 id 属性，保存在量 atid 中，然后在其父元素的子辈元素中寻找 .comment_author ，并获取其内容保存在 atname 中。或许上面的描述较难理解，下面再用图片说明一下！

要获取用户 id ，首先需要了解评论部分的 DOM 结构，以 Melody 为例，用 Firebug 查看其一条评论的部分 HTML ，

看了图相信童鞋们应该大概明白了， .comment-reply-link 的上两级父元素包含回复者的 id ，因此可以在这里获取回复者的id，而在 .comment-reply-link 的同辈元素中包含了用户的昵称，看到这里相信各位童鞋再看看上面的 jQuery 代码应该不难理解了！

我们首先应该知道自己的评论模板在哪里有输出回复者的 id ，在哪里有输出回复者的昵称，然后用 jQuery 的选择器即可以获取相关的数据。

赞 (0)

相关推荐

  • WordPress过滤垃圾评论的几种主要方法小结

    由于个人博客小站的空间与mysql空间往往有限,共享服务器资源也有限,所以垃圾评论一定要拦截在写入数据库之外. 更可气的是看到空间的统计,很几千的IP访问,但基本上都是这个垃圾评论的IP,所以实在不能忍 网上找了一些方法,主要有三个,如果将这三个一块使用基本上就可以拦截绝大多数垃圾评论 一.使用Akismet插件(https://wordpress.org/plugins/akismet/),后台申请一个免费的key,可以拦截99%的垃圾评论,但是这个插件还是会将垃圾评论写入数据库的,一会几千条

  • 在WordPress中实现评论头像的自定义默认和延迟加载

    自定义 WordPress 默认评论头像 对于没有设置Gravatra头像的评论者来说,WordPress会显示一个你在后台设置的默认头像,可以是神秘人.空白.默认的Gravatar 标志等等.但是这些头像有一个共同的不足之处,就是不怎么美观,可看性不强!打个比方,如果你去一个博客阅读文章,但当你放心评论文章的读者头像都是小怪物.复古等一系列WordPress自动生成的"不堪入目"的头像时,你还有很浓的兴趣去阅读这个博客的文章吗?我想答案是肯定的!那么,你有没有想过,自己设计或找一个属

  • 利用jQuery实现WordPress中@的ID悬浮显示评论内容

    利用jQuery实现WordPress中@的ID悬浮显示评论内容

    比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的: @A How much money do you have? 就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中. 实现步骤 在这里我们将以iNove主题为例进行讲解. 1. 将以下代码保存为commenttips.js: jQuery(document).ready( function(){ var id=/^#comment-/; var at=/^@/; jQuery('#t

  • WordPress中限制非管理员用户在文章后只能评论一次

    之前有网友提出,在WordPress中有没有办法实现每篇文章只允许用户评论一次? 暂不说这个需求有没有用,毕竟WordPress就是给有各种需求的人用的.这个功能实现起来也比较简单,只需每次用户发表的评论进数据库之前,从当前文章的所有评论中查找是否有相同的用户名或邮箱已经发表过评论,如果有就跳到错误页面即可. 实现代码,放到当前主题的functions.php中即可(这里还增加了对IP的判断,更保险): // 获取评论用户的ip,参考wp-includes/comment.php functio

  • 利用AJAX实现WordPress中的文章列表及评论的分页功能

    文章列表页分页 一.加载 jQuery 库 既然是 jQuery 驱动的 Ajax ,加载 jQuery 库是必须的. 二.文章列表格式 在你的文章列表页面(首页 index.php.归档 archive.php )需要确保有以下类似的结构 <!-- 包含所有文章的容器 --> <div id="content"> <!-- 各文章的容器 --> <div class="post"></div> <d

  • 修改PHP脚本使WordPress拦截垃圾评论的方法示例

    拦截英文垃圾评论 由于绝大多数的垃圾评论都是英文的,所以国内不少朋友在使用 Some Chinese Please 插件,它可以有效地拦截内容中不带有中文字的comment和trackback(pingback),不写入数据库中,可有效地减小spam对blog服务器的无谓使用.虽然已经 2 年多没有更新,但还是可用的. 其实还可以简化下,直接将下面的代码添加到主题的 functions.php 文件,效果与使用 Some Chinese Please 插件相同: /* refused spam

  • WordPress中利用AJAX异步获取评论用户头像的方法

    WordPress中利用AJAX异步获取评论用户头像的方法

    在评论者输入邮箱后,异步获得评论者的头像并显示出来,个人感觉这个功能虽不能给用户体验带来多大的提升,也不算是一个实用的功能,但至少很炫,看到有的网站有添加这个功能,我也不甘寂寞所以也写了个脚本,没有时间做封装,所以直接上原理和代码. 异步动态调用头像原理 获得用户输入 过滤用户输入 传递变量到后台 后台处理数据,并返回头像的HTML代码 获得后台返回数据,将HTML代码加载到当前页面 貌似很多步骤,其实很简单,我们只要将自己的主题稍作修改就可以到达效果. 简单功能截图: 实现 功能代码:Java

  • 讲解WordPress中用于获取评论模板和搜索表单的PHP函数

    comments_template()(获取评论模板) comments_template() 函数用来获取评论模板,一般只能用在文章或者页面上,如果不是文章或者页面将无法显示. 用法 comments_template( $file, $separate_comments ); 参数 $file (字符串)(可选)要评论模板文件. 默认值:/comments.php(当前主题根目录的 comments.php 文件). $separate_comments (布尔)(可选)是否根据评论的类型区

  • WordPress中对访客评论功能的一些优化方法

    WordPress中对访客评论功能的一些优化方法

    前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之后资料输入框会被隐藏起来, 如同登录了一般. 访客可以选择修改相关资料再进行评论. 给予访客很好的用户体验. 今天我将这个功能移植到了自己的主题上, 制作不难, 分享一下吧. 需求 细心的朋友可能已经注意到了: 当在某个 WordPress 发表评论后再次访问该 Blog, 资料就不需要再次填写, 因为它们都已经在资料输入框里面. 但没评论过的或者清除了 Cookie 之后, 资料输入框将空空如也. 1. 当访客

  • 使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    添加 Ctrl+Enter 快捷回复 这里送上两种方法,首先是 jQuery 方法,前段时间一直在研究 jQuery ,因此对 jQuery 方法比较熟悉,如果你的主题本来已经加载 jQuery 库,建议你使用下面的方法. 把这段代码加入 js 文件中,如果你已经加载 jQuery ,现在就可以使用 Ctrl+Enter 进行快捷回复. jQuery(document).ready(function($){ //Ctrl+Enter回复 jQuery(document).keypress(fun

  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

    键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上.在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点). 键盘事件可以传

  • WordPress中利用AJAX技术进行评论提交的实现示例

    一直对 WordPress 的 Ajax 交互研究感兴趣,也一直很关注于这方面的技术,谈到 WordPress Ajax 就不得不谈到评论 Ajax提交,作为一个博客.论坛评论的 Ajax 提交不仅可以改善用户体验,还可以大幅缩减服务器开支,毕竟输出单条评论内容比重新组织输出一个页面要简单的多. 虽说现在访问量一直比较低,不存在服务器压力的问题,但一向注重用户体验的我,当然不能放弃这么一个提升用户体验的机会.今天抽了一下午的空,把这个主题的 Ajax 评论提交初步完成了. 直接开门见山,直接上代

  • jQuery ctrl+Enter shift+Enter实现代码

    通过事件的which可以找到键码 不过当有组合键的时候还需要注意一下 如ctrl+enter键,虽然都是用e.ctrlKey但是 enter键的键码不是始终为13了 在ff中 判断 ctrl+enter 是 e.ctrlKey && e.which ==13 在ie6中 判断ctrl+enter 是 e.ctrlKey && e.which ==10 示例: 复制代码 代码如下: $(document).keypress(function(e){ if(e.ctrlKey

  • 使用JQuery实现Ctrl+Enter提交表单的方法

    有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单. 我们发帖时,在内容输入框中输入完内容后,可以点击"提交"按钮来发表内容.可是,如果你够"懒",你可以不用动鼠标,只需按住键盘上的Ctrl+Enter键,即可提交表单,完成内容发布. 当然,由于输入框是一个多行文本输入框textarea,我们知道,在textarea中按Enter(回车)键可以换行,并不能直接提交表单(submit),而默认情况下,浏览器忽略

  • jQuery实现ctrl+enter（回车）提交表单

    以jQuery插件开发的方法开发.具体代码如下: jQuery.fn.extend({ /** * ctrl+enter提交表单 * @param {Function} fn 操作后执行的函数 * @param {Object} thisObj 指针作用域 */ ctrlSubmit:function(fn,thisObj){ var obj = thisObj || this; var stat = false; return this.each(function(){ $(this).key

  • jquery实现Ctrl+Enter提交表单的方法

    本文实例讲述了jquery实现Ctrl+Enter提交表单的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Text Box Enter</title> <style type="

随机推荐