WP自定义评论教程

if (comments_open(  ) || get_comments_number( )) {
          comments_template();
        }

<?php 
// @refrrence https://developer.wordpress.org/reference/functions/comment_form/
if (post_password_required(  )) {
	return;  //use return will end the function 
} ?>


<?php if (have_comments()) { ?>
	<div class="comments-list" style="margin-top:5rem">
	<h3 id="comments-title"><span><?php comments_number(); ?></span> Comments</h3>
        
        <?php 

        var_dump($comments);
        foreach($comments as $comment) {  ?>
          <div style="margin-bottom: 20px;" class="comment">
            <?php echo get_avatar( $comment, 60, '', '', array(
              'style'  => 'width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; float: left;'

            ) ); ?>
        
        <div style="overflow: hidden;" class="comment-details">
          <div style="margin-bottom: 5px;" class="comment-author"><?php comment_author(  ); ?></div>

          <div style="margin-bottom: 5px;" class="comment-text">
            <?php comment_text(); ?>
          </div>

          <div class="comment-time"><?php comment_date(); ?></div>
          <button style="background-color: #007bff; color: #fff; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;" class="reply-button">Reply</button>
        </div>
      </div>


          <?php


         
        }  the_comments_pagination(  );

        ?>

 </div>

	<?php 
	// code...
} ?>


<div class="comments">
	

<div style="max-width: 600px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
	<?php 
		comment_form(array(
			'comment_field'  => '<label for="comment" style="margin-bottom: 8px;">Comment:</label>
    <textarea id="comment" name="comment" rows="4" required style="padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ccc;"></textarea>', 
			'fields'  => array(
				'author'  => '<label for="name" style="margin-bottom: 8px;">Name:</label>
    <input type="text" id="name" name="author" required style="padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ccc;">',
    			'email'  => '<label for="email" style="margin-bottom: 8px;">Email:</label>
    <input type="email" id="email" name="email" required style="padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ccc;">',



			),

			'class_submit'  => 'form-button',
			'label_submit'  => '提交你的评论',
			'title_reply'  => '留下你的<span>评论</span>',
			'class_form'  => 'form-comment'

		));

	 ?>
 
</div>
</div>