如何设置WordPress评论表单的样式（最终指南）

2020-05-27
WordPress

您是否要在网站上更改WordPress评论表的样式？评论在建立网站用户参与度方面起着重要作用。美观的用户友好评论表单鼓励用户参与讨论。这就是为什么我们创建了有关如何轻松设置WordPress注释表单样式的最终指南。

开始之前

WordPress主题控制着您网站的外观。每个WordPress主题都带有几个文件，包括模板文件，函数文件，JavaScript和样式表。

样式表包含WordPress主题使用的所有元素的CSS规则。您可以添加自己的自定义CSS来覆盖主题的样式规则。

如果您以前没有做过，请参阅有关如何在WordPress中为初学者添加自定义CSS的文章。

除CSS外，您可能还需要添加一些功能来修改WordPress注释表单的默认外观。如果您以前没有做过，请参阅我们的文章，了解如何在WordPress中复制和粘贴代码。

话虽如此，让我们看一下如何设置WordPress注释表单的样式。

由于这是一个相当全面的指南，因此我们创建了一个目录以便于导航：

在WordPress中更改评论表单样式

在大多数WordPress主题中，有一个名为comments.php的模板。此文件用于在您的博客文章上显示评论和评论表单。WordPress注释表单是通过使用函数生成的<?php comment_form(); ?>。

默认情况下，此功能生成带有三个文本字段（名称，电子邮件和网站），注释文本的textarea字段，符合GDPR要求的复选框以及提交按钮的注释表单。

您可以通过简单地调整默认CSS类轻松地修改每个字段。以下是WordPress添加到每个注释表单的默认CSS类的列表。

#respond { } #reply-title { } #cancel-comment-reply-link { }#commentform { } #author { } #email { } #url{ } #comment #submit.comment-notes { } .required { }.comment-form-author { }.comment-form-email { } .comment-form-url{ }.comment-form-comment { } .comment-form-cookies-consent { }.form-allowed-tags { } .form-submit

通过简单地调整这些CSS类，您可以完全改变WordPress注释表单的外观。

让我们继续尝试更改一些内容，以便您可以很好地了解其工作原理。

首先，我们将从突出显示活动表单字段开始。突出显示当前活动的字段可以使您的表单对有特殊需求的人更易于访问，并且还可以使注释表单在较小的设备上看起来更好。

#respond { background: #fbfbfb;padding:010px010px;} /* Highlight active form field */ #respond input[type=text], textarea { -webkit-transition: all0.30s ease-in-out; -moz-transition: all0.30s ease-in-out; -ms-transition: all0.30s ease-in-out; -o-transition: all0.30s ease-in-out; outline: none; padding: 3px0px3px3px; margin: 5px1px3px0px; border: 1pxsolid#DDDDDD;} #respond input[type=text]:focus,input[type=email]:focus, input[type=url]:focus,textarea:focus {box-shadow: 005pxrgba(81, 203, 238, 1);margin: 5px1px3px0px;border: 2pxsolidrgba(81, 203, 238, 1);}

更改后，这就是我们的表单在WordPress 26主题中的样子：

使用这些类，可以更改文本在输入框中的显示方式。我们将继续更改作者姓名和URL字段的文本样式。

#author, #email { font-family: "Open Sans", "Droid Sans", Arial;font-style:italic;color:#1d1d1d; letter-spacing:.1em;} #url { color: #1d1d1d;font-family: "Luicida Console", "Courier New", "Courier", monospace; }

如果您仔细查看下面的屏幕截图，则名称和电子邮件字段字体与网站URL不同。

您还可以更改WordPress评论表单提交按钮的样式。代替使用默认的提交按钮，让我们给它一些CSS3渐变和框阴影。

#submit {background:-moz-linear-gradient(top, #44c7675%, #5cbf2a100%);background:-webkit-linear-gradient(top, #44c7675%, #5cbf2a100%);background:-o-linear-gradient(top, #44c7675%, #5cbf2a100%);background:-ms-linear-gradient(top, #44c7675%, #5cbf2a100%);background:linear-gradient(to bottom, #44c7675%, #5cbf2a100%);background-color:#44c767;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;border:1pxsolid#18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:16px31px;text-decoration:none;text-shadow:0px1px0px#2f6627;} #submit:hover {background:-webkit-gradient(linear, lefttop, leftbottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));background:-moz-linear-gradient(top, #5cbf2a5%, #44c767100%);background:-webkit-linear-gradient(top, #5cbf2a5%, #44c767100%);background:-o-linear-gradient(top, #5cbf2a5%, #44c767100%);background:-ms-linear-gradient(top, #5cbf2a5%, #44c767100%);background:linear-gradient(to bottom, #5cbf2a5%, #44c767100%);background-color:#5cbf2a; }#submit:active { position:relative;top:1px;}

将WordPress评论表格带入新的高度

您可能会认为这太基础了。好吧，我们必须从这里开始，以便每个人都可以跟随。

您可以通过重新排列表单字段，添加社交登录，订阅评论，评论指南，快速标签等来将WordPress评论表单提升到新的水平。

将社交登录添加到WordPress评论

让我们从向WordPress评论添加社交登录开始。

您需要做的第一件事是安装并激活WordPress社交登录插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问设置»WP社会登录页面以配置插件设置。

该插件将需要API密钥才能与社交平台连接。您将看到有关如何获取每个平台此信息的说明的链接。

输入API密钥后，单击“保存设置”按钮以存储您的更改。

现在，您可以访问您的网站以查看评论表单上方的社交登录按钮。

在评论表之前或之后添加评论策略文本

我们爱所有用户，非常感谢他们花几分钟在我们的网站上发表评论。但是，要创建一个健康的讨论环境，重要的是要缓和评论。

为了完全透明，我们创建了一个评论策略页面，但是您不能仅将此链接放在页脚中。

我们希望我们的评论政策突出并对所有发表评论的用户可见。这就是为什么我们决定在WordPress评论表单中添加评论政策的原因。

如果要添加评论策略页面，那么您需要做的第一件事就是创建一个WordPress页面并定义您的评论策略（您可以窃取我们的内容并对其进行修改以满足您的需求）。

之后，您可以在主题的functions.php文件或特定于站点的插件中添加以下代码。

functionwpbeginner_comment_text_before($arg) { $arg['comment_notes_before'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>"; return$arg;} add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

上面的代码将用此文本替换注释前的默认注释形式。我们还在代码中添加了一个CSS类，以便我们可以使用CSS突出显示该通知。这是我们使用的示例CSS：

p.comment-policy { border: 1pxsolid#ffd499; background-color: #fff4e5; border-radius: 5px; padding: 10px; margin: 10px0px10px0px; font-size: small; font-style: italic;}

这是在我们的测试站点上的外观：

如果要在注释文本区域后显示链接，请使用以下代码。

functionwpbeginner_comment_text_after($arg) { $arg['comment_notes_after'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>"; return$arg;} add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

不要忘记相应地更改URL，因此它会转到您的评论政策页面，而不是example.com。

将注释文本字段移到底部

默认情况下，WordPress注释表单首先显示注释文本区域，然后显示名称，电子邮件和网站字段。此更改是WordPress 4.4中引入的。

在此之前，WordPress网站首先显示名称，电子邮件和网站字段，然后显示注释文本框。我们认为我们的用户习惯于按此顺序查看评论表单，因此我们仍然使用WPBeginner上的旧字段顺序。

如果您想这样做，则只需将以下代码添加到主题的functions.php文件或特定于站点的插件中。

functionwpb_move_comment_field_to_bottom( $fields) {$comment_field= $fields['comment'];unset( $fields['comment'] );$fields['comment'] = $comment_field;return$fields;} add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');

此代码只是将注释文本区域字段移到底部。

从WordPress评论表中删除网站（URL）字段

评论表单中的网站字段吸引了大量垃圾邮件发送者。尽管删除它不会阻止垃圾邮件发送者，甚至不会减少垃圾邮件评论，但它无疑可以使您免于意外批准带有不良作者网站链接的评论。

它还将减少评论表单中的字段，使其更容易使用。有关此主题的更多信息，请参阅我们关于从WordPress评论表单中删除网站url字段的文章

要从注释表单中删除URL字段，只需将以下代码添加到您的functions.php文件或特定于站点的插件中。

functionwpbeginner_remove_comment_url($arg) { $arg['url'] = ''; return$arg;}add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');