最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > WordPress > WordPress教程 >

wordpress中实现嵌套评论回复添加@功能

时间:2014-07-02 23:27来源:未知 作者:最模板zuimoban 点击:
构成原理: 打开 wp-includes/comment-template.php,查找 Walker_Comment 类,以下展开介绍这 4 个方法. start_lvl 子菜单列表的开始标签,默认是 ul,在第一个子条目之前生成. end_lvl 对应 start_lvl 的子菜单列

构成原理:打开 wp-includes/comment-template.php,查找 Walker_Comment 类,以下展开介绍这 4 个方法.

start_lvl

子菜单列表的开始标签,默认是 <ul>,在第一个子条目之前生成.

end_lvl

对应 start_lvl 的子菜单列表的结束标签,默认是 </ul>,在最后一个子条目之后生成.

start_el

条目的前半部分,包括开始符号和评论内容,开始符号是 <div> 或者 <li> (外层是 ol 或 ul 的情况下是 <li>); 评论内容就是评论的相关信息显示,WordPress 向我们提供了可即用的布局,但也可以通过 callback 方法改变评论内容的结构,调用回调函数的部分代码示意如下:

  1. function start_el(&$output$comment$depth$args) { 
  2.  $depth++; 
  3.  $GLOBALS['comment_depth'] = $depth
  4.  
  5.  // 如果定义了回调函数, 则调用其回调函数, 并终止后面的处理. 
  6.  if ( !emptyempty($args['callback']) ) { 
  7.   call_user_func($args['callback'], $comment$args$depth); 
  8.   return
  9.  } 
  10.  
  11.  // 如果没有定义回调函数, 则执行本方法中后面的处理, 生成默认的评论布局. 
  12.  ... 

我们所谓的自定义嵌套回复,就是创建一个 callback 方法,并在 wp_list_comments 方法中调用这个它生成自定义的评论结构.也可以认为是定义一个新的方法,取代 start_el 方法内部的默认布局.

end_el

条目的后半部分,其实就一个结束符号.这里也提供一个名为 end-callback 的回调方法, 原理和 start_el 一样, 是一个自定义的处理方式. 但是 end-callback 并不常用, 因为 end_el 只生成一个简单的结束符号, 实在没必要为此再定义一个方法.我觉得只有在需要复杂的评论结构时, 才有必要用到 end-callback. 如: 要在评论的上方和下方都添加背景图效果, 评论框内可能需要多一个 DIV 层, 则可能用上 end-callback. 在 callback 方法中以 <div><div> 作为开始, 而 end-callback 中以 </div></div> 结束掉.

举例说明,下面将以一个嵌套回复的例子来证明上述内容.现有评论嵌套结构如下:

  1. comment (1) 
  2.         comment (1.1)  
  3.         comment (1.2) 
  4.             comment (1.2.1)  
  5.     comment (2) 

依照上述方法,执行顺序如下:

  1. start_el (1) 
  2. start_lvl (1) 
  3. start_el (1.1) 
  4. end_el (1.1) 
  5. start_el (1.2) 
  6. start_lvl (1.2) 
  7. start_el (1.2.1) 
  8. end_el (1.2.1) 
  9. end_lvl (1.2) 
  10. end_el (1.2) 
  11. end_lvl (1) 
  12. end_el (1) 
  13. start_el (2) 
  14. end_el (2) 

假设方法配置都是默认的,则代码如下:

  1. start_lvl 为 <ul> 
  2. end_lvl 为 </ul> 
  3. start_el 为 <li> 和内容部分 
  4. end_el 为 </li> 

又设 “…” 为评论内容,则代码生成如下:

  1. <li> 
  2.  ... (1) 
  3.  
  4.  <ul> 
  5.   <li> 
  6.    ... (1.1) 
  7.  
  8.   </li> 
  9.   <li> 
  10.    ... (1.2) 
  11.  
  12.    <ul> 
  13.     <li> 
  14.      ... (1.2.1) 
  15.  
  16.     </li> 
  17.    </ul> 
  18.   </li> 
  19.  </ul> 
  20. </li> 
  21. <li> 
  22.  ... (2) 
  23.  
  24. </li> 

好了原理讲了下面我们来实现了.

一、添加评论@回复js代码

js代码如下,可自行新建js文件调用,也可添加到已有的js文件,代码所在js文件必须在文章页面有调用:

  1. /*   
  2. 嵌套评论@回复,添加@链接,  
  3. */   
  4.     jQuery(document).ready(function($){         //Begin jQuery     
  5.         $(‘.reply’).click(function() {     
  6.             var atid = ’“#’ + $(this).parent().attr(“id“) + ’”‘;            //获取当前评论的链接地址      
  7.             var atname = $(this).prevAll().find(“.fayan”).text();           //获取当前评论的姓名    
  8.             $(“#comment”).attr(“value”,’<a href=’ + atid + ’>@’ + atname + ’</a>’ + “:”).focus();   
  9.             });    
  10.         $(‘.cancel-comment-reply a’).click(function() {                     //点击取消回复评论清空评论框的内容     
  11.             $(“#comment”).attr(“value”,”);   
  12.             }   
  13.             );   
  14.     }) 

注意对照我所调用的相应div 的ID,对应你所要修改的主题,对照性修改!

二、修改CSS代码

接下来,把子评论的右移去掉(这玩意儿太占手机屏幕了)

.commentlist li.comment ul.children {margin-left:20px;border-top: 0px;}  

把其中的margin-left:20px;删去,或修改为margin-left:0;

三、清除function函数模板中的冲突函数

如果你的主题添加了评论跳转代码,则要修改其中的代码,避免造成@链接跳转错误,可对照如下代码:

  1. /*评论链接跳转*/      
  2. add_filter(‘get_comment_author_link’, ’add_redirect_comment_link’, 5);      
  3. //add_filter(‘comment_text’, ’add_redirect_comment_link’, 99);      
  4. function add_redirect_comment_link($text = ”){      
  5.     $text=str_replace(‘href=“‘, ’href=”‘.get_option(‘home’).’/?go=’, $text);      
  6.     $text=str_replace(“href=’”, “href=’”.get_option(‘home’).“/?go=”, $text);      
  7.     return $text;      
  8. }      
  9. add_action(‘init’, ’redirect_comment_link’);      
  10. function redirect_comment_link(){      
  11.     $redirect = $_GET['go'];      
  12.     if($redirect){      
  13.         if(strpos($_SERVER['HTTP_REFERER'],get_option(‘home’)) !== false){      
  14.             header(“Location: $redirect”);      
  15.             exit;      
  16.         }      
  17.         else {       
  18. header(“Location: /”);      
  19. exit;      
  20. }      
  21. }      

可以看到其中的第3行已经被我注释掉了,主要原因就是该行代码会在评论内容(text)存在的链接自动加上go跳转,我们原来的评论链接为:

  1. <a href=“#comment-976″>@XXX</a>    
  2. 其相当于完整链接: 
  3. <a href=“/error-sto.html#comment-976″>@XXX</a>   
  4. 当被加上go跳转后则变成: 
  5. <a href=“/?go=#comment-976″>@XXX</a>   

打开这个链接试试,是不是跳转到首页去了,这样的话,@链接就失去意义了,为了防止这样的“悲剧”,我们一定要清除冲突的代码,给你的@巩固地位.

 
(责任编辑:最模板)
------分隔线----------------------------
栏目列表
推荐内容