最近我们向您展示了如何设置 WordPress 评论表单的样式，我们认为如果我们不写关于样式化 WordPress 评论布局的内容，那将是不完整的。过去，我们讨论过默认 WordPress 生成的 CSS 类和 ID，以帮助主题设计人员更轻松地设置模板样式。在本文中，我们将使用这些默认类向您展示如何设置 WordPress 评论布局的样式以及您可以使用它做的一些很酷的事情。
为了这个例子，我们将在本文中修改默认的 212 WordPress 主题。注意：本文适用于对 HTML 和 CSS 有一定了解的初级主题设计师和 DIY 用户。
默认 WordPress 评论类
默认情况下，WordPress 会为评论模板中的元素生成这些类：
/*Comment Output*/ .commentlist .reply {}.commentlist .reply a {} .commentlist .alt {}.commentlist .odd {}.commentlist .even {}.commentlist .thread-alt {}.commentlist .thread-odd {}.commentlist .thread-even {}.commentlist li ul.children .alt {}.commentlist li ul.children .odd {}.commentlist li ul.children .even {} .commentlist .vcard {}.commentlist .vcard cite.fn {}.commentlist .vcard span.says {}.commentlist .vcard img.photo {}.commentlist .vcard img.avatar {}.commentlist .vcard cite.fn a.url {} .commentlist .comment-meta {} .commentlist .comment-meta a {}.commentlist .commentmetadata {}.commentlist .commentmetadata a {} .commentlist .parent {}.commentlist .comment {}.commentlist .children {}.commentlist .pingback {}.commentlist .bypostauthor {}.commentlist .comment-author {}.commentlist .comment-author-admin {} .commentlist {}.commentlist li {}.commentlist li p {}.commentlist li ul {}.commentlist li ul.children li {}.commentlist li ul.children li.alt {}.commentlist li ul.children li.byuser {}.commentlist li ul.children li.comment {}.commentlist li ul.children li.depth-{id} {}.commentlist li ul.children li.bypostauthor {}.commentlist li ul.children li.comment-author-admin {} #cancel-comment-reply {}#cancel-comment-reply a {}
如何查找需要编辑的 CSS 类
在我们继续设计 WordPress 评论布局之前，给我们的新用户一个小提示。Google Chrome 和 Mozilla Firefox 网络浏览器附带了一个方便的工具，您可以使用它来提高您的 WordPress 主题开发技能。该工具称为检查元素. 只需将鼠标移到网页上的元素上，右键单击并选择检查元素。您的浏览器窗口将分成两行，在下方窗口中您将看到该元素的源代码。同样在下部窗口中，您将能够看到 CSS 元素及其样式。您甚至可以在其中编辑 CSS 以进行测试。重要的是要记住，您使用 Inspect Element 更改的任何内容都只对您可见。刷新页面的那一刻，这些更改将消失。要使更改永久生效，您必须在主题中使用 style.css 文件或其他适当的文件。
为评论添加奇数和偶数背景颜色
为奇数和偶数评论使用不同的背景颜色是一种已经存在多年的设计趋势。如果您有很多评论，它特别有助于提高可读性。某些主题颜色看起来也非常好，这就是许多设计师想要利用此功能的原因。为了帮助设计师实现这一目标，WordPress 分别为每条评论添加了奇偶类。
通过粘贴以下代码，您可以轻松地在主题的 style.css 中为注释添加奇数/偶数样式。
.commentlist .even .comment { background-color:#ccddf2; } .commentlist .odd .comment {background-color:#CCCCCC;}
结果看起来像这样：
样式评论作者和元信息
WordPress 还为每个评论标题中显示的元素添加类。这允许主题设计者自定义作者信息和其他评论元数据的显示，例如评论日期和时间。这是一个示例代码，可粘贴到主题的 style.css 文件中，以不同方式设置这些元素的样式。在此示例中，我们为注释元添加了背景颜色以及一些间距。
.comments-area article header { margin: 0 0 48px; overflow: hidden; position: relative; background-color:#55737D; color:#FFFFFF; padding: 10px;}
它应该是这样的：
样式化帖子作者评论不同
通常，您可能会看到帖子作者评论以不同的背景颜色或一些额外的徽章突出显示。WordPressbypostauthor为帖子作者的所有评论添加了一个默认类。WordPress 主题设计者可以使用这个类来设置不同的作者评论样式。
一些主题，使用自己的回调函数来显示评论。使用回调函数，这些主题可以为帖子作者的评论添加额外的信息。例如，二十一十二在评论回调函数twentytwelve_comment()（位于functions.php主题文件中）中使用了以下行。
// If current post author is also comment author, make it known visually. ( $comment->user_id === $post->post_author ) ? ‘ ‘ . __( ‘Post author’, ‘twentytwelve’ ) . ‘‘ : ” );
此代码添加Post Author到评论元信息。根据您的 WordPress 主题如何处理帖子作者的评论，您可以将其修改为您想要的任何内容。
如果您使用的主题与二十一十二不同，那么您需要了解您的主题如何处理评论。只需打开您的主题comments.php文件。如果您的主题使用自己的回调函数，那么您会在wp_list_comments函数内部看到它，如下所示：
‘twentytwelve_comment’, ‘style’ => ‘ol’ ) ); ?>
在上面的示例中，您可以看到主题正在twentytwelve_comment用作回调函数。如果指定了回调函数，那么找到该函数的最可能位置是在主题的 functions.php 文件中。
在此示例中，我们将更改此功能以显示编辑器而不是帖子作者。为此，我们修改了评论回调函数，如下所示：
// If current post author is also comment author, make it known visually. ( $comment->user_id === $post->post_author ) ? ‘ ‘ . __( ‘Editor’, ‘twentytwelve’ ) . ‘‘ : ”);
我们还将通过在主题的 style.css 文件中添加以下内容来修改它的外观，如下所示：
li.bypostauthor cite span { color: #21759b; background-color: #f8f0cb; background-image: none; border: 1px solid #f8f0cb; border-radius: 3px; box-shadow: none; padding: 3px; font-weight:bold;}
这就是它的样子：
样式化 WordPress 评论中的评论回复链接
大多数 WordPress 主题在每条评论下方都有一个回复链接。仅当您启用了线程评论时才会显示此功能。要启用线程评论，请转到您的 WordPress 管理员（设置 » 讨论）。查看显示其他评论设置的部分，并选中启用线程（嵌套）评论框。
WordPress 为回复链接生成的默认 CSS 类是reply和comment-reply-link。我们将使用这些类来修改回复链接并变成 CSS 按钮。
.reply { float:right; margin:0 10px 10px 0; text-align:center; background-color: #55737D; border:1px solid #55737D; border-radius:3px; padding:3px; width:50px; box-shadow: 1px 1px 2px 2px #4f4f4f;} .comment article { padding-bottom:2.79rem;} a.comment-reply-link,a.comment-edit-link { color: #FFFFFF; font-size: 13px; font-size: 0.928571429rem; line-height: 1.846153846; text-decoration:none;} a.comment-reply-link:hover,a.comment-edit-link:hover { color: #f6e7d7;}
这就是它的样子：
样式注释编辑按钮
在大多数 WordPress 主题中，能够编辑评论的登录用户可以在每条评论下方看到评论编辑链接。这是一个使用默认类comment-edit-link来修改链接外观的小 CSS。
a.comment-edit-link { float:left; margin:0 0 10px 10px; text-align:center; background-color: #55737D; border:1px solid #55737D; border-radius:3px; padding:3px; width:50px; box-shadow: 1px 1px 2px 2px #4f4f4f;}
这是它的样子：
样式取消评论回复链接
在大多数优秀的 WordPress 主题中，单击回复链接会在您正在回复的评论下方打开评论表单，其中包含取消评论回复的链接。让我们使用默认的 CSS ID 修改这个取消评论回复链接cancel-comment-reply。
#cancel-comment-reply-link { text-align:center; background-color: #55737D; border:1px solid #55737D; border-radius:3px; padding:3px; width:50px; color:#FFFFFF; box-shadow: 1px 1px 2px 2px #4f4f4f; text-decoration:none;}
这是它的样子：
样式化 WordPress 评论表单
实用、美观且时尚的评论表单鼓励用户在您的博客上发表评论。之前我们已经写了一篇关于如何设置 WordPress 评论表单样式的详细文章。我们强烈建议您去检查一下，看看如何将您的 WordPress 评论表单提升到一个新的水平。
我们希望本文能帮助您设计 WordPress 评论布局。如果您有任何问题或建议，请随时通过在下面发表评论告诉我们。