2017-02-24 08:59 阅读 88

自定义html Wordpress评论与头像和回复

I am developing a theme and has no idea how wordpress handles the comment outputs.

I havewp_list_comments in my comments.php, but I'm not sure how to customize the output to get the desired output like this :

enter image description here

this my html code :

  <div class="row">
    <div class="col-sm-2 text-center">
      <img src="" class="img-circle" height="65" width="65" alt="Avatar">
    <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>
      <p><span class="badge">1</span> Comment:</p><br>
      <div class="row">
        <div class="col-sm-2 text-center">
          <img src="" class="img-circle" height="65" width="65" alt="Avatar">
        <dsiv class="col-xs-10">
          <h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
          <p>Me too! WOW!</p>

Any suggestions on how to customize the output rendered by wp_list_comments ?



<div id="comments" class="comments-area">

    <?php if ( have_comments() ) : ?>
        <h2 class="comments-title">
                $comments_number = get_comments_number();

                        /* translators: 1: number of comments, 2: post title */
                            '<p><span class="badge">%1$s</span> Comments:</p><br>',
                            '<p><span class="badge">%1$s</span> Comments:</p><br>',
                            'comments title'
                        number_format_i18n( $comments_number )

<ol class="commentlist">
    <?php wp_list_comments('type=comment&callback=mytheme_comment');
</ol><!-- .commentlist -->

    <?php endif; // Check for have_comments(). ?>

        comment_form( array(
            'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
            'title_reply_after'  => '</h2>',
        ) );

</div><!-- .comments-area -->
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    doucigua0449 doucigua0449 2017-02-24 09:05

    You can override the template using the wp_list_comments function.

    Refer to this link.

    You can put that code inside of a function and call that from the wp_list_comments as a callback. All the info on how to do that is in that link.

    点赞 评论 复制链接分享
  • doucong4535 doucong4535 2018-12-08 09:53

    You can use the callback function on wp_list_comments() function.


    Usually, you will find this line in comments.php file of your wordpress theme. And the output from this command is a pretty straightforward HTML structure.

    Wordpress have a option of passing the callback function as an argument to wp_list_comments function.

    This callback function should return the modified HTML structure of comments section, which we are looking to implement.

    <ul class="comment-list comments">
        wp_list_comments( array(
            'style'      => 'ul',
            'short_ping' => true,
                'callback' => 'better_comments'
        ) );
    </ul><!-- .comment-list -->

    You can check detailed tutorial here

    点赞 评论 复制链接分享