WordPress 评论回复嵌套功能的构成原理

WordPress教程 9995

对于 WordPress 新手来说 WordPress 的评论回复功能实现上可能会有些许难度（本人也折腾了不少时间），本次博客吧转载了neoease博客的《WordPress 嵌套回复构成原理》一文，以帮助新手了解下WordPress的嵌套回复从而便于主题制作。下面是WordPress嵌套回复实现原理的详细介绍。

WordPress 评论回复嵌套构成原理：

打开 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
2
3
4
5
6
7
8
9
10
11
12
13

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

    我们所谓的自定义嵌套回复, 就是创建一个 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
2
3
4
5

    comment (1)
        comment (1.1) 
        comment (1.2)
            comment (1.2.1) 
    comment (2)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

start_el (1)
start_lvl (1)
start_el (1.1)
end_el (1.1)
start_el (1.2)
start_lvl (1.2)
start_el (1.2.1)
end_el (1.2.1)
end_lvl (1.2)
end_el (1.2)
end_lvl (1)
end_el (1)
start_el (2)
end_el (2)

假设方法配置都是默认的, 则:

1
2
3
4

start_lvl 为 <ul>
end_lvl 为 </ul>
start_el 为 <li> 和内容部分
end_el 为 </li>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<li>
	... (1)
 
	<ul>
		<li>
			... (1.1)
 
		</li>
		<li>
			... (1.2)
 
			<ul>
				<li>
					... (1.2.1)
 
				</li>
			</ul>
		</li>
	</ul>
</li>
<li>
	... (2)
 
</li>

原文

精品推荐：