如何自定义 Wordpress comment_form();
Posted
技术标签:
【中文标题】如何自定义 Wordpress comment_form();【英文标题】:How to customize Wordpress comment_form(); 【发布时间】:2012-07-05 05:40:39 【问题描述】:我目前正在开发自己的 Wordpress 主题,并且最近一直致力于自定义 comments_template();
。我已经读过,使用wp_list_comments();
方法是拉入和显示每页/帖子的 cmets 的最佳实践。我已经成功地自定义了通过该方法拉入并显示 cmets 的方式。
我还读到使用comment_form();
方法是显示评论表单的最佳实践。但是,我真的很难尝试自定义它。我对 $args、filters 和 actions 有点困惑。
基本上我想彻底改变评论表单的部分内容。在仍然使用 comment_form();
方法的最佳实践的同时,我该如何更改评论表单的某些部分?
我真正需要做的就是将几个现有的<p>
标签包装在<divs>
中。我正在尝试进行的更新列表如下:
-
将
<h3>
标头调整为<h2 class="comments-header">Tell us about you!</h2>
在<fieldset></fieldset>
中包装表单字段
将<label>
包裹在<div class="label"></div>
中
将<input>
包裹在<div class="field"></div>
中
使<p class="form-allowed-tags"></p>
显示之前评论<textarea>
而不是之后
更改表单提交按钮以使用<button>
元素而不是<input>
请查看下面的代码以获得进一步的解释......
默认comment_form();输出代码:
<div id="respond">
<h3 id="reply-title">Leave a Reply</h3>
<form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform">
<p class="comment-notes">
Your email address will not be published. Required fields are marked
<span class="required">*</span>
</p>
<p class="comment-form-author">
<label for="author">Name</label>
<span class="required">*</span>
<input id="author" name="author" type="text" value="John Doe" size="30" aria-required="true">
</p>
<p class="comment-form-email">
<label for="email">Email</label>
<span class="required">*</span>
<input id="email" name="email" type="text" value="johndoe@dodgeit.com" size="30" aria-required="true">
</p>
<p class="comment-form-url">
<label for="url">Website</label>
<input id="url" name="url" type="text" value size="30">
</p>
<p class="comment-form-comment">
<label for="comment">Comment</label>
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
</p>
<p class="form-allowed-tags">
You may use these html tags and attributes...
</p>
<p class="form-submit">
<input name="submit" type="submit" id="submit" value="Post Comment">
<input type="hidden" name="comment_post_ID" value="22" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>
</form>
</div> <!-- #respond -->
我要输出的代码:
<div id="respond">
<h2 class="comments-header">Tell us about you!</h2>
<form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform">
<fieldset>
<div class="label"><label for="author">Name <span class="required">*</span></label></div>
<div class="field"><input id="author" name="author" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div>
</fieldset>
<fieldset>
<div class="label"><label for="email">E–mail (will not be published) <span class="required">*</span></label></div>
<div class="field"><input id="email" name="email" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div>
</fieldset>
<p class="form-allowed-tags">
You may use these HTML tags and attributes...
</p>
<fieldset>
<div class="field"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></div>
</fieldset>
<p class="form-submit">
<button class="story-submit-btn" type="submit" name="submit" id="sub">Post your story</button>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>
</form>
</div> <!-- #respond -->
非常感谢任何帮助!
【问题讨论】:
我绝对需要调整的最大的是上面列表中的数字 1、2、5 和 6。其他的我认为我可以通过 CSS 正确定位。但是,我需要更改标题文本,将我的字段包装在<fieldsets>
中,更改 HTML 标记 <p>
的显示顺序,并将 <input>
更改为 <button>
。
【参考方案1】:
如果一切都失败了,在你的主题目录中的 cmets.php 中,
将comment_form($args);
更改为
ob_start();
comment_form($args);
$comment_form = ob_get_clean();
//insert code to modify $comment_form
echo $comment_form;
我用它来将提交按钮更改为图像按钮。
【讨论】:
【参考方案2】:如何更改一些评论表单字段的简单示例。
$comments_args = array(
// change the title of send button
'label_submit'=>'Send',
// change the title of the reply section
'title_reply'=>'Write a Reply or Comment',
// remove "Text or HTML to be displayed after the set of comment fields"
'comment_notes_after' => '',
// redefine your own textarea (the comment body)
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
);
comment_form($comments_args);
欲了解更多信息:comment_form() documentation on WordPress Codex
【讨论】:
【参考方案3】:我使用functions.php
来修改cmets 显示。我不知道这是否是现在的方式(我使用 WP 开发并需要 cmets 的最后一个站点是在 2009 年;)),但它就是这样(将它放在 functions.php
文件中!:
function THEMENAME_comment($comment, $args, $depth)
$GLOBALS['comment'] = $comment;
*your comment display code*
记得创建 pingback 主题。你做的和 cmets 类似,唯一的区别是第一行:
函数 THEMENAME_pings($comment, $args, $depth)
其他方式可能是使用comments_template。
【讨论】:
【参考方案4】:comment_form 使用一个字段数组。该数组中的值是一个字符串。您可以通过为相应的键添加自己的字符串来覆盖字段的输出,如下所示:
function modify_comment_fields($fields)
$fields = array('author' =>'<div><p class="comment-form-author"><label for="author">Author</label><input id="author" name="author" type="text"/></p></div>');
return $fields;
然后在你的函数中添加一个过滤器:
add_filter('comment_form_default_fields','modify_comment_fields');
这里是 comment_form 函数的 Codex 链接: http://codex.wordpress.org/Function_Reference/comment_form
【讨论】:
【参考方案5】:发布内容后在 Single.php 上
将其用于自定义评论表单html和设计
<?php $comments_args = array(
// change the title of send button
'label_submit'=>'Submit',
// change the title of the reply section
'title_reply'=>'Add a comment',
// remove "Text or HTML to be displayed after the set of comment fields"
'comment_form_top' => 'ds',
'comment_notes_before' => '',
'comment_notes_after' => '',
// redefine your own textarea (the comment body)
'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" placeholder="Your Comment* " aria-required="true"></textarea></p>',
'fields' => apply_filters( 'comment_form_default_fields', array(
'author' =>
'<p class="comment-form-author">' .
'<input id="author" class="blog-form-input" placeholder="Your Name* " name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
'" size="30"' . $aria_req . ' /></p>',
'email' =>
'<p class="comment-form-email">'.
'<input id="email" class="blog-form-input" placeholder="Your Email Address* " name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
'" size="30"' . $aria_req . ' /></p>',
'url' =>
'<p class="comment-form-url">'.
'<input id="url" class="blog-form-input" placeholder="Your Website URL" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
'" size="30" /></p>'
)
),
);
comment_form($comments_args);?>
【讨论】:
至于2021年,这应该是公认的答案。【参考方案6】:你检查过代码:http://codex.wordpress.org/Function_Reference/comment_form
定制并不容易,但可行
【讨论】:
【参考方案7】:function THEMENAME_comment($comment, $args, $depth)
$GLOBALS['comment'] = $comment;
*your comment display code*
【讨论】:
【参考方案8】:我的主题使用了默认函数comment_form,所以我在子主题中做了一个改动。
if(function_exists('glutton_comment_form'))
glutton_comment_form(); //custom function for displaying comments, defined in glutton-child/functions.php
else
comment_form();
【讨论】:
以上是关于如何自定义 Wordpress comment_form();的主要内容,如果未能解决你的问题,请参考以下文章