如何设置WordPress评论表的样式(终极指南)

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

Styling WordPress comment form

入门之前

WordPress主题控制您的网站的外观。每个WordPress主题都附带了几个文件,包括模板文件,函数文件,JavaScripts和样式表。

样式表包含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();?>

默认情况下,此函数生成带有三个文本字段(名称,电子邮件和网站)的注释表单,注释文本的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: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 Twenty Sixteen主题后的样子更改:

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社交登录页面到配置插件设置。

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 >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 >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字段,只需将以下代码添加到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

在注释表单中添加Quicktags

Quicktags是格式化按钮,使用户可以轻松设置其注释的样式。这些按钮包括粗体,斜体,添加链接或块引用。

要添加quicktags,您需要安装并激活Basic Comment Quicktags插件。有关详细信息,请参阅有关如何在WordPress评论表单中轻松添加quicktags的文章。

这是添加quicktags后评论表单的外观。

quicktags in comment form

我们希望本文能帮助您了解如何设置WordPress评论表单的样式,以使其对您的用户更有趣。您可能还希望看到我们的提示,以获得有关您的WordPress博客帖子的更多评论。

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

Styling WordPress comment form

入门之前

WordPress主题控制您的网站的外观。每个WordPress主题都附带了几个文件,包括模板文件,函数文件,JavaScripts和样式表。

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

如果您之前没有这样做过,那么请参阅我们的文章,了解如何在初学者的WordPress中添加自定义CSS。

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

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

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

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

在WordPress中更改注释表单样式

在大多数WordPress主题中,有一个名为comments.php的模板。此文件用于在您的博客帖子上显示评论和评论表单。WordPress评论表单是使用以下函数生成的:&lt;?php comment_form();?&gt;

默认情况下,此函数生成带有三个文本字段(名称,电子邮件和网站)的注释表单,注释文本的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: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 Twenty Sixteen主题后的样子更改:

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社交登录页面到配置插件设置。

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 >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 >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字段,只需将以下代码添加到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

在注释表单中添加Quicktags

Quicktags是格式化按钮,使用户可以轻松设置其注释的样式。这些按钮包括粗体,斜体,添加链接或块引用。

要添加quicktags,您需要安装并激活Basic Comment Quicktags插件。有关详细信息,请参阅有关如何在WordPress评论表单中轻松添加quicktags的文章。

这是添加quicktags后评论表单的外观。

quicktags in comment form

我们希望本文能帮助您了解如何设置WordPress评论表单的样式,以使其对您的用户更有趣。您可能还希望看到我们的提示,以获得有关您的WordPress博客帖子的更多评论。

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-06-05 04:53:30
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[加我微信]
chaoneo
注:点击复制微信号并打开微信APP,添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: