如何设计 WordPress 评论表单(终极指南)

您想更改网站上 WordPress 评论表单的样式吗?评论在建立用户在网站上的参与度方面发挥着重要作用.一个好看的用户友好的评论表单鼓励用户参与讨论.这就是为什么我们创建了有关如何轻松设置 WordPress 评论表单样式的终极指南.

Styling WordPress comment form

开始之前

WordPress 主题控制您网站的外观.每个 WordPress 主题都带有多个文件,包括模板文件、函数文件、JavaScript 和样式表.

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

如果您以前没有这样做过,请参阅我们关于如何为初学者在 WordPress 中添加自定义 CSS 的文章.

除了 CSS,您可能还需要添加一些功能来修改 WordPress 评论表单的默认外观.如果您以前没有这样做过,请参阅我们关于如何在 WordPress 中复制和粘贴代码的文章.

话虽如此,让我们来看看如何设计 WordPress 评论表单的样式.

由于这是一份相当全面的指南,我们创建了一个目录以便于导航:

  • 使用默认 CSS 类更改 WordPress 评论
  • 将社交登录添加到 WordPress 评论表单
  • 在 WordPress 评论表单中添加评论政策文本
  • 将评论文本字段移至底部
  • 从 WordPress 评论表单中删除网站 (URL) 字段
  • 在 WordPress 中添加订阅评论复选框
  • 在 WordPress 评论中添加 Quicktags

更改 WordPress 中的评论表单样式

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

默认情况下,此功能会生成您的评论表单,其中包含三个文本字段(姓名、电子邮件和网站)、一个用于评论文本的文本区域字段、一个 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:0 10px 0 10px;
}
 
/* Highlight active form field */
 
#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
  
  
#respond input[type=text]:focus,
input[type=email]:focus, 
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

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

Highlight active comment form field

使用这些类,您可以更改文本在输入框中的显示方式.我们将继续更改作者姓名和 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 不同.

Changing comment form input style

您还可以更改 WordPress 评论表单提交按钮的样式.与其使用默认的提交按钮,不如给它一些 CSS3 渐变和框阴影.

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

Comment form button style

将 WordPress 评论表单提升到一个新的水平

您可能认为这太基础了.好吧,我们必须从那里开始,这样每个人都可以跟上.

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

将社交登录添加到 WordPress 评论

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

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

激活后,您需要访问设置» WP Social Login 页面来配置插件设置.

WP Social Login settings

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

输入您的 API 密钥后,点击保存设置按钮以存储您的更改.

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

Add social login buttons to comment form

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

我们爱所有的用户,我们非常感谢他们花几分钟时间在我们的网站上发表评论.但是,要营造健康的讨论环境,审核评论很重要.

为了完全透明,我们创建了一个评论政策页面,但您不能只将此链接放在页脚中.

我们希望让所有发表评论的用户都能看到我们的评论政策.这就是我们决定在我们的 WordPress 评论表单中添加评论政策的原因.

如果您想添加评论政策页面,那么您需要做的第一件事就是创建一个 WordPress 页面并定义您的评论政策(您可以窃取我们的并修改它以满足您的需求).

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


function wpbeginner_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: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

这是它在我们的测试站点上的样子:

Comment policy notice

如果要在评论文本区后面显示链接,那么使用下面的代码.


function wpbeginner_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 文件或特定于站点的插件中.

function wpb_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'); 

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

Comment text area to bottom

从 WordPress 评论表单中删除网站 (URL) 字段

评论表单中的网站字段吸引了大量垃圾邮件发送者.虽然删除它不会阻止垃圾邮件发送者甚至减少垃圾评论,但它肯定会避免您意外批准带有不良作者网站链接的评论.

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

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

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

Remove URL field from comment form

在 WordPress 中添加订阅评论复选框

当用户在您的网站上发表评论时,他们可能想要跟进该主题,看看是否有人回复了他们的评论.通过添加订阅评论复选框,您可以让用户在帖子上出现新评论时收到即时通知.

要添加此复选框,您需要做的第一件事是安装并激活订阅评论重新加载插件.激活后,您需要访问设置»订阅评论以配置插件设置.

有关详细的分步说明,请参阅我们关于如何允许用户在 WordPress 中订阅评论的文章.

Subscribe to comments reloaded

在评论表单中添加快速标签

快速标签是格式按钮,可让用户轻松设置评论的样式.这些包括加粗、斜体、添加链接或块引用的按钮.

要添加快速标签,您需要安装并激活基本评论快速标签插件.有关详细信息,请参阅我们关于如何在 WordPress 评论表单中轻松添加快速标签的文章.

这是添加快速标签后评论表单的外观.

quicktags in comment form

我们希望本文能帮助您了解如何设计 WordPress 评论表单的样式,使其对您的用户更有趣.您可能还想查看我们的提示,以获取有关您的 WordPress 博客文章的更多评论.

8

发表回复