17713433920 info@mac163.com
wordpress动态
如何设置样式和自定义WordPress评论表
如何设置样式和自定义WordPress评论表

comment_form() 输出一个完整的评论表格，用于WordPress主题模板。

大多数字符串和表单字段都可以通过$args传递给函数的数组来控制，而comment_form_default_fields如果您想添加一个新字段或删除单个字段，则也可以选择使用过滤器来修改默认字段的数组。

所有字段都也可以单独通过以下形式的过滤器comment_form_field_$name，其中$name是域的阵列中使用的密钥。

WordPress 3.0+功能– comment_form()具有2个参数，您可以根据自己的喜好随意修改。

这是可以使用的示例参数：

<?php comment_form($args, $post_id); ?>
  • $args: 这包含我们在表单等中的字符串和字段的选项。
  • $post_id: 帖子ID用于生成表单，如果为null，它将使用当前帖子。

我今天修改了评论表单并添加了一些CSS，并注意到我的评论表单有很大的不同。

希望与您分享我的更改。

让我们开始吧：

方法1）使用functions.php文件–仅用于创世纪

  • 去 Appearance
  • 点击 Editor
  • 打开主题的functions.php函数文件，并在下面的代码。

这就是我使用Genesis WordPress框架主题时对Crunchify所做的事情。

// Modify comments header text in comments
add_filter( 'genesis_title_comments', 'child_title_comments');
function child_title_comments() {
    return __(comments_number( '<h3>No Responses</h3>', '<h3>1 Response</h3>', '<h3>% Responses...</h3>' ), 'genesis');
}


// Unset URL from comment form
function crunchify_move_comment_form_below( $fields ) {
    $comment_field = $fields['comment'];
    unset( $fields['comment'] );
    $fields['comment'] = $comment_field;
    return $fields;
}
add_filter( 'comment_form_fields', 'crunchify_move_comment_form_below' );


// Add placeholder for Name and Email
function modify_comment_form_fields($fields){
    $fields['author'] = '<p class="comment-form-author">' . '<input id="author" placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
                esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'.
                '<label for="author">' . __( 'Your Name' ) . '</label> ' .
                ( $req ? '<span class="required">*</span>' : '' )  .
                '</p>';
    $fields['email'] = '<p class="comment-form-email">' . '<input id="email" placeholder="your-real-email@example.com" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
                '" size="30"' . $aria_req . ' />'  .
                '<label for="email">' . __( 'Your Email' ) . '</label> ' .
                ( $req ? '<span class="required">*</span>' : '' )
                 .
                '</p>';
    $fields['url'] = '<p class="comment-form-url">' .
             '<input id="url" name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /> ' .
            '<label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
               '</p>';


    return $fields;
}
add_filter('comment_form_default_fields','modify_comment_form_fields');

方法2）对于其他任何WordPress主题
只需打开comments.php文件并替换$args为以下代码即可使用占位符美化注释代码。

$args = array(
'fields' => apply_filters(
'comment_form_default_fields', array(
'author' =>'<p class="comment-form-author">' . '<input id="author" placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'.
'<label for="author">' . __( 'Your Name' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'</p>'
,
'email' => '<p class="comment-form-email">' . '<input id="email" placeholder="your-real-email@example.com" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
'" size="30"' . $aria_req . ' />' .
'<label for="email">' . __( 'Your Email' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) 
.
'</p>',
'url' => '<p class="comment-form-url">' .
'<input id="url" name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /> ' .
'<label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
'</p>'
)
),
'comment_field' => '<p class="comment-form-comment">' .
'<label for="comment">' . __( 'Let us know what you have to say:' ) . '</label>' .
'<textarea id="comment" name="comment" placeholder="Express your thoughts, idea or write a feedback by clicking here & start an awesome comment" cols="45" rows="8" aria-required="true"></textarea>' .
'</p>',
'comment_notes_after' => '',
'title_reply' => '<div class="crunchify-text"> <h5>Please Post Your Comments & Reviews</h5></div>'
);

要自定义评论表单，您可以使用任何HTML标签/元素，因为您看到我在placeholder上面放置了额外的html标签。

评论表–之前：

WordPress评论表–之前
WordPress评论表–之前

评论表–之后：

WordPress评论表–之后
WordPress评论表–之后

您可以通过多种方式修改评论表单。只需不断添加不同的文本和html样式即可对其进行修改。

怎么办？您是否要使用以下外观修改CSS？

您是否要使用以下外观修改CSS
您是否要使用以下外观修改CSS

如果要修改注释表单的CSS，则可以在handy code其中添加主题的style.css文件。

/* ## Comments
--------------------------------------------- */
.comment-respond,
.entry-pings,
.entry-comments {
color: #444;
padding: 20px 45px 40px 45px;
border: 1px solid #ccc;
overflow: hidden;
background: #fff;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
border-left: 4px solid #444;
}
.entry-comments h3{
font-size: 30px;
margin-bottom: 30px;
}
.comment-respond h3,
.entry-pings h3{
font-size: 20px;
margin-bottom: 30px;
}
.comment-respond {
padding-bottom: 5%;
margin: 20px 1px 20px 1px;
border-left: none !important;
}
.comment-header {
color: #adaeb3;
font-size: 14px;
margin-bottom: 20px;
}
.comment-header cite a {
border: none;
font-style: normal;
font-size: 16px;
font-weight: bold;
}
.comment-header .comment-meta a {
border: none;
color: #adaeb3;
}
li.comment {
background-color: #fff;
border-right: none;
}
.comment-content {
clear: both;
overflow: hidden;
}
.comment-list li {
font-size: 14px;
padding: 20px 30px 20px 50px;
}
.comment-list .children {
margin-top: 40px;
border: 1px solid #ccc;
}
.comment-list li li {
background-color: #f5f5f6;
}
.comment-list li li li {
background-color: #fff;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%;
}
.comment-respond label {
display: block;
margin-right: 12px;
}
.entry-comments .comment-author {
margin-bottom: 0;
position: relative;
}
.entry-comments .comment-author img {
border-radius: 50%;
border: 5px solid #fff;
left: -80px;
top: -5px;
position: absolute;
width: 60px;
}
.entry-pings .reply {
display: none;
}
.bypostauthor {
}
.form-allowed-tags {
background-color: #f5f5f5;
font-size: 16px;
padding: 24px;
}
.comment-reply-link{
cursor: pointer;
background-color: #444;
border: none;
border-radius: 3px;
color: #fff;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
padding: 4px 10px 4px;
text-transform: uppercase;
width: auto;
}
.comment-reply-link:hover{
color: #fff;
}
.comment-notes{
display:none; 
}

我们目前正在使用Disqus评论插件。到目前为止，我们喜欢它并将继续使用它。

微信二维码

微信扫描二维码联系我们！
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答：WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等！

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！

随机推荐

回到顶部