调整WordPress Cosimo主题的评论回复显示位置

嘿，我来帮你搞定这个评论布局调整！要把回复从父评论下方移到侧边，咱们用CSS就能轻松实现，具体步骤如下：

1. 添加自定义CSS代码 #

首先，你需要给主题添加一段自定义CSS，用来修改评论的布局结构。这段代码会让父评论容器变成弹性布局，把子评论区域放到侧边：

/* 父评论容器设置为Flex，让子评论显示在侧边 */
.comment.has-children {
    display: flex;
    gap: 2rem; /* 父评论与子评论的间距，可根据需求调整 */
    padding-bottom: 2.5rem; /* 为子评论预留垂直空间 */
    flex-wrap: wrap;
}

/* 子评论区域固定宽度占比 */
.comment.has-children .children {
    flex: 0 0 28%; /* 子评论宽度占28%，可调整 */
    min-width: 280px; /* 小屏幕下保证最小宽度，避免太挤 */
}

/* 父评论内容占据剩余宽度 */
.comment.has-children .comment-body {
    flex: 1;
}

/* 小屏幕（手机端）恢复垂直布局，提升可读性 */
@media (max-width: 768px) {
    .comment.has-children {
        flex-direction: column;
        gap: 1.5rem;
    }
    .comment.has-children .children {
        flex: 1;
        min-width: auto;
    }
}

2. 如何添加这段CSS #

你有两种安全的方式添加这段代码，避免主题更新后丢失修改：

• 方法一：通过WordPress自定义面板：进入后台 → 外观 → 自定义 → 额外CSS，把上面的代码粘贴进去，点击“发布”即可。
• 方法二：使用子主题：如果你用了Cosimo的子主题，直接把代码加到子主题的style.css文件里即可。

3. 适配主题类名（可选） #

如果上面的代码没生效，可能是主题的评论类名和我假设的不一样。你可以用浏览器的开发者工具（按F12），右键点击父评论区域，选择“检查”，找到父评论的类名（通常类似.comment、.cosimo-comment），然后替换代码里对应的选择器就行。

这样调整后，你的评论回复就会自动显示在对应父评论的侧边啦，手机端还会自动变回垂直布局，兼顾移动端体验~

内容的提问来源于stack exchange，提问作者Moshe Moses Potravny