wordpress表单调用
Do you want to change the style of WordPress comment form on your website? Comments play an important role in building user engagement on a website. A good-looking user-friendly comment form encourages users to participate in discussion. That’s why we have created the ultimate guide on how to easily style the WordPress comment form.
您是否要在您的网站上更改WordPress评论表的样式？ 评论在建立网站用户参与度方面起着重要作用。 美观的用户友好评论表单鼓励用户参与讨论。 这就是为什么我们创建了有关如何轻松设置WordPress注释表单样式的最终指南。
开始之前 (Before Getting Started)
WordPress themes control the appearance of your website. Each WordPress theme comes with several files including template files, functions file, JavaScripts, and stylesheets.
WordPress主题控制着您网站的外观。 每个WordPress主题都带有几个文件，包括模板文件， 函数文件 ，JavaScript和样式表。
Stylesheets contain the CSS rules for all elements used by your WordPress theme. You can add your own custom CSS to override your theme’s style rules.
样式表包含WordPress主题使用的所有元素的CSS规则。 您可以添加自己的自定义CSS来覆盖主题的样式规则。
If you haven’t done this before, then see our article on how to add custom CSS in WordPress for beginners.
如果您以前没有做过，请参阅我们的文章， 如何为初学者在WordPress中添加自定义CSS 。
Apart from CSS, you may also need to add some functions to modify the default appearance of your WordPress comment form. If you haven’t done this before, then please see our article on how to copy and paste code in WordPress.
除CSS外，您可能还需要添加一些功能来修改WordPress注释表单的默认外观。 如果您以前没有做过，请参阅我们的文章， 了解如何在WordPress中复制和粘贴代码 。
That being said, let’s take a look at how to style the WordPress comment form.
话虽如此，让我们看一下如何设置WordPress注释表单的样式。
Since this is a fairly comprehensive guide, we have created a table of content for easy navigation:
由于这是一个相当全面的指南，因此我们创建了一个目录以便于导航：
- Change WordPress Comments with Default CSS Classes使用默认CSS类更改WordPress注释
- Adding Social Login to WordPress Comment Form将社交登录添加到WordPress评论表
- Adding Comment Policy Text in WordPress Comment Form在WordPress评论表单中添加评论政策文本
- Moving Comment Text Field to Bottom将注释文本字段移到底部
- Removing Website (URL) Field from WordPress Comment Form从WordPress评论表中删除网站(URL)字段
- Adding Subscribe to Comments Checkbox in WordPress在WordPress中添加订阅评论复选框
- Add Quicktags in WordPress Comments在WordPress注释中添加Quicktag
在WordPress中更改评论表单样式 (Changing Comment Form Style in WordPress)
Inside most WordPress themes there is a template called comments.php. This file is used to display comments and comment form on your blog posts. The WordPress comment form is generated by using the function: <?php comment_form(); ?>.
在大多数WordPress主题中，都有一个名为comments.php的模板。 此文件用于在您的博客文章上显示评论和评论表单。 WordPress注释表单是通过使用以下函数生成的： <?php comment_form(); ?> <?php comment_form(); ?> 。
By default, this function generates your comment form with three text fields (Name, Email, and Website), a textarea field for the comment text, a checkbox for GDPR compliance, and the submit button.
默认情况下，此功能使用三个文本字段(名称，电子邮件和网站)，注释文本的textarea字段， 符合GDPR的复选框以及提交按钮生成注释表单。
You can easily modify each of these fields by simply tweaking the the default CSS classes. Below is a list of the default CSS classes that WordPress adds to each comment form.
您可以通过简单地调整默认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
By simply tweaking these CSS classes, you can completely change the look and feel of your WordPress comment form.
通过简单地调整这些CSS类，您可以完全改变WordPress注释表单的外观。
Let’s go ahead and try to change a few things, so you can get a good idea on how this works.
让我们继续尝试更改一些内容，以便您可以很好地了解其工作原理。
First, we will start by highlighting the active form field. Highlighting the currently active field makes your form more accessible for people with special needs, and it also makes your comment form look nicer on smaller devices.
首先，我们将从突出显示活动表单字段开始。 突出显示当前活动的字段可以使您的表单对有特殊需求的人更易于访问，并且还可以使注释表单在较小的设备上看起来更好。
#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);
}
This is how our form looked like in the WordPress Twenty Sixteen theme after the changes:
更改后，这就是我们的表单在WordPress 26主题中的样子：
Using these classes, you can change the behavior of how text appears inside input boxes. We will go ahead and change the text style of the author name and the URL fields.
使用这些类，可以更改文本在输入框中的显示方式。 我们将继续更改作者姓名和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;
}
If you take a close look in the screenshot below, the name and email field font is different than the website URL.
如果您仔细查看下面的屏幕截图，则名称和电子邮件字段字体与网站URL不同。
You can also change the style of the WordPress comment form submit button. Instead of using the default submit button, let’s give it some CSS3 gradient and box shadow.
您还可以更改WordPress注释表单提交按钮的样式。 让我们给它一些CSS3渐变和阴影，而不是使用默认的Submit按钮。
#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;
}
将WordPress评论表格提升到新的水平 (Taking WordPress Comment Forms to the Next Level)
You might be thinking that was too basic. Well we have to start there, so everyone can follow along.
您可能会认为这太基础了。 好吧，我们必须从这里开始，以便每个人都可以跟随。
You can take your WordPress comment form to the next level by rearranging form fields, adding social login, subscribe to comments, comment guidelines, quicktags, and more.
您可以通过重新排列表单字段，添加社交登录，订阅评论，评论指南，快速标签等来将WordPress评论表单提升到新的水平。
将社交登录添加到WordPress评论 (Add Social login to WordPress Comments)
Let’s start with adding social logins to WordPress comments.
让我们从向WordPress评论添加社交登录开始。
The first thing you need to do is install and activate the WordPress Social Login plugin. For more details, see our step by step guide on how to install a WordPress plugin.
您需要做的第一件事是安装并激活WordPress社交登录插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
Upon activation, you need to visit Settings » WP Social Login page to configure plugin settings.
激活后，您需要访问设置»WP社会登录页面以配置插件设置。
The plugin will require API keys in order to connect with social platforms. You will see links with instructions on how to get this information for each platform.
该插件将需要API密钥才能与社交平台连接。 您将看到有关如何获取每个平台此信息的说明的链接。
After entering your API keys, click on the save settings button to store your changes.
输入API密钥后，单击“保存设置”按钮以存储您的更改。
You can now visit your website to see the social login buttons above your comment form.
现在，您可以访问您的网站以查看评论表单上方的社交登录按钮。
在评论表之前或之后添加评论策略文本 (Adding Comment Policy Text Before or After Comment Form)
We love all of our users, and we really appreciate them taking a few minutes to leave a comment on our site. However, to create a healthy discussion environment it is important to moderate comments.
我们喜欢所有用户，非常感谢他们花几分钟在我们的网站上发表评论。 但是，要创建一个健康的讨论环境，重要的是要缓和评论 。
To have full transparency, we created a comment policy page, but you can’t just put this link in the footer.
为了完全透明，我们创建了一个评论策略页面，但是您不能仅将此链接放在页脚中。
We wanted to have our comment policy be prominent and visible for all users who are leaving a comment. This is why we decided to add the comment policy in our WordPress comment form.
我们希望我们的评论政策突出并对所有发表评论的用户可见。 这就是为什么我们决定在WordPress评论表单中添加评论政策的原因。
If you want to add a comment policy page, then the first thing you need to do is create a WordPress page and define your comment policy (you can steal ours and modify it to meet your needs).
如果要添加评论策略页面，那么您要做的第一件事就是创建一个WordPress页面并定义您的评论策略(您可以窃取我们的内容并对其进行修改以满足您的需求)。
After that, you can add the following code in your theme’s functions.php file or a site-specific plugin.
之后，您可以在主题的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');
The above code will replace the default comment form before notes with this text. We have also added a CSS class in the code, so that we can highlight the notice using CSS. Here is the sample CSS we used:
上面的代码将用此文本替换注释前的默认注释形式。 我们还在代码中添加了一个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;
}
This is how it looked on our test site:
这是在我们的测试站点上的外观：
If you want to display the link after the comment text area, then use the following code.
如果要在注释文本区域后显示链接，请使用以下代码。
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');
Don’t forget to change the URL accordingly, so it goes to your comment policy page rather than example.com
不要忘记相应地更改URL，因此它会转到您的评论政策页面，而不是example.com。
将注释文本字段移到底部 (Move Comment Text Field to Bottom)
By default, WordPress comment form displays the comment text area first and then name, email, and website fields. This change was introduced in WordPress 4.4.
默认情况下，WordPress注释表单首先显示注释文本区域，然后显示名称，电子邮件和网站字段。 此更改是WordPress 4.4中引入的。
Before that, WordPress websites displayed name, email, and website fields first, and then the comment text box. We felt that our users are used to seeing the comment form in that order, so we still use the old field order on WPBeginner.
在此之前，WordPress网站首先显示名称，电子邮件和网站字段，然后显示注释文本框。 我们认为我们的用户习惯于按此顺序查看评论表单，因此我们仍然使用WPBeginner上的旧字段顺序。
If you want to do that, then all you need to do is add the following code to your theme’s functions.php file or a site-specific plugin.
如果要这样做，则只需将以下代码添加到主题的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');
This code simply moves the comment text area field to the bottom.
此代码只是将注释文本区域字段移到底部。
从WordPress评论表中删除网站(URL)字段 (Remove Website (URL) Field from WordPress Comment Form)
The website field in the comment form attracts a lot of spammers. While removing it won’t stop spammers or even reduce spam comments, it will certainly save you from accidentally approving a comment with bad author website link.
评论表单中的网站字段吸引了大量垃圾邮件发送者。 虽然删除它不会阻止垃圾邮件发送者，甚至不会减少垃圾邮件评论，但它无疑可以使您免于意外批准带有不良作者网站链接的评论。
It will also reduce a field from the comment form, making it easier and more user-friendly. For more on this topic, see our article on removing website url field from WordPress comment form
它还将减少评论表单中的字段，使其更容易使用，并且更加友好。 有关此主题的更多信息，请参阅我们关于从WordPress注释表单中删除网站url字段的文章
To remove URL field from comment form, simply add the following code to your functions.php file or a site-specific plugin.
要从注释表单中删除URL字段，只需将以下代码添加到您的functions.php文件或特定于站点的插件中。
function wpbeginner_remove_comment_url($arg) {
$arg['url'] = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
在WordPress中添加“订阅评论”复选框 (Add a Subscribe to Comments Checkbox in WordPress)
When users leave a comment on your website, they might want to follow up on that thread to see if someone has replied to their comment. By adding a subscribe to comments checkbox, you enable users to receive instant notifications whenever a new comment appears on the post.
当用户在您的网站上发表评论时，他们可能想跟进该话题，以查看是否有人回复了他们的评论。 通过添加“订阅评论”复选框，您可以使用户能够在帖子中出现新评论时立即接收通知。
To add this checkbox, first thing you need to do is install and activate Subscribe to Comments Reloaded plugin. Upon activation, you need to visit Settings » Subscribe to Comments to configure the plugin settings.
要添加此复选框，您需要做的第一件事就是安装并激活“ 订阅评论重新加载”插件。 激活后，您需要访问设置»订阅评论以配置插件设置。
For detailed step by step instructions, see our article on how to allow users to subscribe to comments in WordPress.
有关详细的分步说明，请参阅我们的文章，介绍如何允许用户订阅WordPress中的评论 。
在评论表中添加快速标签 (Add Quicktags in Comment Form)
Quicktags are formatting buttons that enable users to easily style their comments. These include buttons to bold, italicize, add a link, or blockquote.
快速标记是格式化按钮，使用户可以轻松设置其注释样式。 这些按钮包括加粗，斜体，添加链接或块引用的按钮。
To add quicktags, you need to install and activate the Basic Comment Quicktags plugin. For details, see our article on how to easily add quicktags in WordPress comment form.
要添加快速标签，您需要安装并激活基本评论快速标签插件。 有关详细信息，请参阅有关如何轻松地以WordPress注释形式添加快速标签的文章。
This is how your comment form will look after adding quicktags.
这是添加快速标签后您的评论表单的外观。
We hope this article helped you learn how to style WordPress comment form to make it more fun for your users. You may also want to see our tips to get more comments on your WordPress blog posts.
我们希望本文能帮助您学习如何设置WordPress注释表单的样式，以使其对用户更加有趣。 您可能还希望查看我们的技巧，以获取有关WordPress博客文章的更多评论 。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-style-wordpress-comment-form/
wordpress表单调用
2004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
