17713433920 info@mac163.com
如何设置样式和自定义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开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部