[英]Custom html Wordpress Comments with avatar and reply
I am developing a theme and has no idea how wordpress handles the comment outputs. 我正在开发一个主题,并且不知道wordpress如何处理注释输出。
I have wp_list_comments
in my comments.php
, but I'm not sure how to customize the output to get the desired output like this : 我在comments.php
有wp_list_comments
,但我不确定如何自定义输出以获得所需的输出:
this my html code : 这是我的HTML代码:
<div class="row">
<div class="col-sm-2 text-center">
<img src="https://freeiconshop.com/wp-content/uploads/edd/person-flat.png" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
<p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<p><span class="badge">1</span> Comment:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="http://www.noviasalcedo.es/wp-content/uploads/2016/05/person-girl-flat.png" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<dsiv class="col-xs-10">
<h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
<p>Me too! WOW!</p>
<br>
</div>
</div>
</div>
Any suggestions on how to customize the output rendered by wp_list_comments
? 有关如何自定义wp_list_comments
呈现的输出的任何建议?
comments.php
: comments.php
:
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
$comments_number = get_comments_number();
printf(
/* translators: 1: number of comments, 2: post title */
_nx(
'<p><span class="badge">%1$s</span> Comments:</p><br>',
'<p><span class="badge">%1$s</span> Comments:</p><br>',
$comments_number,
'comments title'
),
number_format_i18n( $comments_number )
);
?>
</h2>
<ol class="commentlist">
<?php wp_list_comments('type=comment&callback=mytheme_comment');
?>
</ol><!-- .commentlist -->
<?php endif; // Check for have_comments(). ?>
<?php
comment_form( array(
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after' => '</h2>',
) );
?>
</div><!-- .comments-area -->
You can override the template using the wp_list_comments
function. 您可以使用wp_list_comments
函数覆盖模板。
You can put that code inside of a function and call that from the wp_list_comments as a callback. 您可以将该代码放在函数中,并将其作为回调从wp_list_comments中调用。 All the info on how to do that is in that link. 有关如何执行此操作的所有信息都在该链接中。
You can use the callback function on wp_list_comments() function. 您可以在wp_list_comments()函数上使用回调函数。
wp_list_comments();
Usually, you will find this line in comments.php file of your wordpress theme. 通常,您会在wordpress主题的comments.php文件中找到此行。 And the output from this command is a pretty straightforward HTML structure. 此命令的输出是一个非常简单的HTML结构。
Wordpress have a option of passing the callback function as an argument to wp_list_comments function. Wordpress可以选择将回调函数作为参数传递给wp_list_comments函数。
This callback function should return the modified HTML structure of comments section, which we are looking to implement. 这个回调函数应该返回修改后的HTML注释结构部分,我们正在寻求实现。
<ul class="comment-list comments">
<?php
wp_list_comments( array(
'style' => 'ul',
'short_ping' => true,
'callback' => 'better_comments'
) );
?>
</ul><!-- .comment-list -->
You can check detailed tutorial here 你可以在这里查看详细的教程
https://www.5balloons.info/custom-html-for-comments-section-in-wordpress-theme/ https://www.5balloons.info/custom-html-for-comments-section-in-wordpress-theme/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.