一周一次 WordPress 主题开发教程,短短一篇文章,一开始可能觉得不够看、看不够,慢慢的是不是就不想看,懒得看了?
我就是这样,对一件事刚知道的时候,极度热情;了解一点后,觉得不过尔尔;深入学习一下,感觉还是有点麻烦;动手实践一下,呃……还是算了……
上述过程就是我当前正在学习blender时的真实写照。如果,一个 WordPress 新手来看这一系列 WordPress 主题开发教程,大概也是这个样子吧。
在开始这系列教程文章的时候,我就在想,如果能像短视频一样,很短的时间就能收到反馈-每看一篇文章,就能完成主题中的一个或几个功能,也许能让人学起来轻松一点。
但事实证明,学习就是很枯燥乏味的,没有任何办法能解决这个问题。因为,我学习blender的时候,看的教程,自认为比我写的这些要优秀至少100倍,但我学习的过程依旧痛苦……
有人研究新东方的老师,专业知识是一方面,更厉害的是讲段子,正是这些段子让枯燥乏味的学习过程稍稍变得好受了一些,让人更容易坚持下去。
再说一点题外话。在研究生扩招的大环境下,考研成功的首要条件是什么呢?坚持。只要坚持,有始有终,大多数人都能考研上岸。现在的问题是,岸上是不是也有点挤。当然,比在河里水深火热的,肯定要好一丢丢。
刷短视频得到的是即时奖励,学习一门技术只能得到延迟奖励。在得到奖励之前,只能硬着头皮坚持。
上篇文章介绍的是 WordPress 中,【评论表单】如何实现。这次轮到【评论列表】了。
搞定这个【评论列表】,只要掌握一个函数就可以:wp_list_comments。
官方文档:
wp_list_comments 函数有两个参数,$args 和 $comments。$comments 比较简单,就是一个 WP_comment 对象列表。$args 需要重点关注一下。
walker,漫步者,我们可以写一个继承 Walker_Comment 的类,覆写其中的方法,修改一些细节。walker 算是高级用法,大多数时候用不到,如果有兴趣,自行研究吧。
官方文档:
max_depth,评论嵌套最大层级。会影响生成结构的 class。每条评论的 calss 中有一项类似:depth-n。其中 n 表示当前评论的层级。使用这个 class 可以很方便地展示树状UI。
style,自定义评论列表的 html 元素。接受 ul,ol,div。默认 ul。
callback,回调函数,默认为空。如果需要全方面的自定义评论列表,可以自定义这个回调函数。酱茄开源主题中就是这么干的-其原因是设计师已经写好了结构。自定义回调函数,可以使用设计师的结构,不然就得让设计师重新写CSS去适配 WordPress 的默认结构。大家在实践中,可灵活掌握。
end-callback,结尾的回调函数-就是评论区后面的小尾巴。
type,需要展示的类型。接受:'all', 'comment', 'pingback', 'trackback', 'pings'。默认,all。一般都是使用 comment。
page,分页用的页码。
per_page, 每页评论数量。
avatar_size,头像尺寸,默认 32。
reverse_top_level,是否优先展示最新的评论。默认 null。
reverse_children,子评论列表,是否优先展示最新的评论。默认 null。
format,输出格式,'html5' 或 'xhtml,默认 html5。
short_ping,是否输出短ping。默认值为false。
echo,直接输出到屏幕还是返回字符串。
wp_list_comments 包含一个钩子 apply_filters( ‘wp_list_comments_args’, array $parsed_args )。看上去是修改传入参数的。需要什么参数直接传就可以了啊,为啥还要弄个钩子去修改呢?岂不是多此一举?
钩子其实大多数都是用在插件中的。比如,我们用了一个 WordPress 主题。对于其评论列表大体满意,少许细节需要调整。这时候可以搞个插件,用上这个钩子。
为啥不直接修改 WordPress 主题的代码呢?一旦修改了主题的源代码,想再跟随主题的更新就比较麻烦了。
动手实践一下吧。
直接把酱茄开源主题的代码搬过去。在 functions.php 中添加下面的代码:
/**
* 评论样式
*/
function the_first_comment_list($comment, $args, $depth)
{
echo '<div class="content-comment-item content-comment-item-depth-' . $depth . '">';
echo '<p class="simple-info">';
echo '<a href="' . ($comment->comment_author_url ? $comment->comment_author_url : '#') . '" title="">';
jiangqie_avatar($comment->user_id);
$comment_author = get_user_meta($comment->user_id, 'nickname', true);
if (empty($comment_author)) {
$comment_author = $comment->comment_author;
}
echo '<em>' . $comment_author . '</em>';
echo '</a>';
echo comment_reply_link(array_merge($args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'])));
echo edit_comment_link();
echo get_comment_time('Y-m-d H:i ');
echo '</p>';
echo '<div class="content-comment-info">';
echo '<p class="content-comment-text">' . get_comment_text() . '</p>';
echo '</div>';
echo '</div>';
}
在 comments.php 文件中,把评论列表修改成:
<h5 class="mb-20">评论信息</h5>
<div class="content-comment mb-20">
<?php wp_list_comments('type=comment&callback=the_first_comment_list') ?>
</div>
搞定!简简单单!
大家可以试试其他参数,一样简单好用。