如何在 WordPress 中创建时尚的评论部分

想要为您的网站创建时尚的评论部分？ 评论部分是所有访问者讨论内容和留下反馈的地方。 默认注释部分非常简单，没有样式。 因此，Web 开发人员必须随着时间的推移完全自定义注释部分。

与 WordPress 中所有格式的样式一样，此方法围绕 CSS 和 HTML 展开，但不要担心初学者会感到熟悉。 如果你有 注释部分无效请考虑重新启用它。 今天，我将向您展示 WordPress 中可用的注释部分以及如何设置各种设计样式。

为什么注释部分的样式很重要？

你可能只有少数的评论，没有看到多少部分的价值，或者只是一个新的网站，不知道如何 处理他们.这也是许多网站禁用评论部分之一，以避免负面评论，这是大多数评论部分的问题。 无论如何，评论部分是任何网站的重要组成部分，有助于建立一个社区环境。

如果您没有收到大量评论，可能是因为评论部分看起来不太好。 是的，人们实际上关心这个地区的样子。 创建与网站的其余部分相匹配的设计非常重要，并有助于使所有评论脱颖而出。 造型不仅重要， 更多头像 改进注释部分的另一种方法是。

如何在 WordPress 中创建时尚的评论部分

今天，我将向您展示 WordPress 中可用的注释部分以及如何设置各种设计样式。 您选择的设计必须融入当前主题，并且可以完全自定义颜色选项。 有数以百计的选择，请记住，我只是在网上分享一些流行的东西。

即使您没有编码经验，也不要担心。 有两件事需要注意。 首先，复制并粘贴未为主题编写的代码可能不起作用。 例如，如果获取 Twenty Twelve 主题的注释样式，并在具有 Poseidon 的网站上使用它，则结果为零。 这是因为每个主题的命名约定都不同。 您需要了解主题的命名约定是什么。 其次，您只需编辑颜色和字体选项即可使其正常工作。

为参考，所有示例都为“主题”编写。

交替注释的背景颜色

更常见的注释设计选项之一是在背景中包含交替颜色。 这有助于访问者将评论区分开来。 选择主题中存在的颜色是一个很好的经验法则。

在左侧的管理面板中，单击[外観]，然后单击[CSSの編集]选择一个选项。

[追加のCSS]单击选项。

复制以下代码并将其粘贴到相应的文本框中：[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].commentlist .even .comment {
背景颜色：#c0c0c0;
}
.commentlist .odd .comment {
背景颜色：#ffd700;
}[/ht_message]

请注意，如果您不使用相同的主题，则它不起作用。 如果您需要其他帮助，请访问主题支持页面。 添加代码后，您应该能够看到所做的更改。

你可以把颜色变成你喜欢的颜色。 在这里 CSS 颜色代码列表.确保应用颜色后，您仍然可以阅读注释。 单击“发布”按钮以保存更改。

设置作者姓名字段的样式

评论部分的另一个改进是，您可以轻松地确定谁写了评论。 您可以通过向注释的个人信息添加不同颜色的背景来执行此操作。

复制以下代码并将其粘贴到相应的文本框中：[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].comments-area article header {
边距： 0 0 48px;
溢出：隐藏;
位置：相对;
背景颜色：#006400;
颜色：#FFFFFF;
填充：10 像素。
}[/ht_message]

再次验证作者的姓名和信息是否可见。[公開]单击该按钮可保存您的工作。

注释按钮样式

大多数注释部分有多个按钮。 它通常包括编辑、回复和取消回复按钮。[返信のキャンセル]仅当留下回复时，才会显示该按钮。

[返信]下面是按钮的代码。[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].reply {
浮动：右侧;
边距：010px 10px 0;
文本对齐：居中[てきすとりんちょう:かきょ
背景色: #000000;
境界線:1ピクセルの実線#55737D。
境界線半径:3ピクセル;
パディング:3ピクセル;
幅:50ピクセル。
ボックスシャドウ:1ピクセル1ピクセル2ピクセル2ピクセル#4f4f4f。
}

.comment article {
パディングボトム:2.79レム;
}

a.コメント-返信-リンク、
a.comment-edit-link {
色: #FFFFFF;
フォントサイズ:13ピクセル。
フォントサイズ:0.928571429rem;
行の高さ:1.846153846;
テキスト装飾:なし;
}

a.コメント返信リンク:ホバー、
a.comment-edit-link:hover {
色: #f6e7d7;
}[/ht_message]

[編集]下面是按钮的代码。[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
a.comment-edit-link {
浮动：左侧;
边距：00 10 像素 10 像素;
文本对齐：居中[てきすとりんちょう:かきょ
背景色: #000000;
境界線:1ピクセルの実線#55737D。
境界線半径:3ピクセル;
パディング:3ピクセル;
幅:50ピクセル。
ボックスシャドウ:1ピクセル1ピクセル2ピクセル2ピクセル#4f4f4f。
}[/ht_message]

[返信のキャンセル]下面是按钮的代码。[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]#cancel-comment-reply-link {
文本对齐：居中[てきすとりんちょう:かきょ
背景色: #000000;
境界線:1ピクセルの実線#55737D。
境界線半径:3ピクセル;
パディング:3ピクセル;
幅:50ピクセル。
色: #FFFFFF;
ボックスシャドウ:1ピクセル1ピクセル2ピクセル2ピクセル#4f4f4f。
テキスト装飾:なし;
}[/ht_message]

[公開]单击该按钮可保存您的工作。

确保一切匹配

样式注释部分的关键是使注释部分看起来更好。 问题是，如果它与网站的其余部分不匹配。 这听起来可能不协调，您可能需要设置网站的其余部分的样式。 在这两种情况下，你都需要确保一切都匹配，没有突出或好看的东西。

导致这种情况的最大因素是颜色选择。 我建议你只使用主题或类似的东西的颜色。 此外，请确保所有文本都可见，因为无法强调。 这是当今网站上最常见的错误之一，不应发生。

您使用的是哪种设计？ 你认为你的评论部分现在看起来更好吗？