WordPress网站主题开发，WordPress评论列表伸缩显示子评论教程分享

Wordpress3年前 (2022)发布 SUYEONE

640 0 0

许多网站管理员追求提升用户体验，尤其是在评论区。今天，我们将探讨如何定制WordPress 主题，以实现评论列表中子评论的折叠和展开功能，通过点击”查看对话”按钮来控制显示。这个交互设计会在缩放过程中同步更新，使得用户操作更加直观。

实施步骤如下：

1. 首先，我们需要确定哪些评论有子评论。这可以通过检查$comment->comment_parent是否为0来实现，这意味着这是一个父级评论。另外，我们需要知道子评论的数量，这可以通过一个名为child_comment_counter($comment->comment_ID)的函数来判断，如果返回值大于0，说明存在子评论。因此，我们的条件代码会是这样的：

“`php
comment_ID) > 0 && $comment->comment_parent == ‘0’) { ?>
查看对话

“`

2. 接下来，我们要处理”查看对话”按钮的行为。初次点击应显示子评论，并将按钮文本更改为”关闭对话”。再次点击则应隐藏子评论并恢复为”查看对话”。这里是一个使用jQuery实现的示例：

“`javascript
/* 查看/关闭子评论 */
$(“.part .js-comment”).click(function(){
var $children = $(“ul.children”);
if ($children.CSS(“display”) === “none”) {
$children.fadeIn();
$(this).htML(‘关闭对话’);
} else {
$children.fadeOut();
$(this).html(‘查看对话’);
}
});
“`
请注意，初始状态下，`ul.children`的CSS样式应设置为`display: none`，以便默认隐藏子评论。