Comments With CSS #1 – WordPress Snippet Generator

Functions.php

// Custom Callback
            
function your_theme_slug_comments($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment; ?>
  <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
      
    <div class="comment-wrap">
      <div class="comment-img">
        <?php echo get_avatar($comment,$args['avatar_size'],null,null,array('class' => array('img-responsive', 'img-circle') )); ?>
      </div>
      <div class="comment-body">
        <h4 class="comment-author"><?php echo get_comment_author_link(); ?></h4>
        <span class="comment-date"><?php printf(__('%1$s at %2$s', 'your-text-domain'), get_comment_date(),  get_comment_time()) ?></span>
        <?php if ($comment->comment_approved == '0') { ?><em><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> <?php _e('Comment awaiting approval', 'your-text-domain'); ?></em><br /><?php } ?>
        <?php comment_text(); ?>
        <span class="comment-reply"> <?php comment_reply_link(array_merge( $args, array('reply_text' => __('Reply', 'your-text-domain'), 'depth' => $depth, 'max_depth' => $args['max_depth'])), $comment->comment_ID); ?></span>
      </div>
    </div>
<?php }

// Enqueue comment-reply

add_action('wp_enqueue_scripts', 'your_theme_slug_public_scripts');

function your_theme_slug_public_scripts() {
    if (!is_admin()) {
        if (is_singular() && get_option('thread_comments')) { wp_enqueue_script('comment-reply'); }
    }
}

// Enqueue fontawesome

add_action('wp_enqueue_scripts', 'your_theme_slug_public_styles');

function your_theme_slug_public_styles() {
        wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0', 'all');
}

Comments.php

            
<?php if ( post_password_required() ) { return; } ?>
<div id="comments" class="comments-area">
  <?php if ( have_comments() ) { ?>
    <h4 class="comments-title"><?php comments_number(__('No Comments', 'your-text-domain'), __('1 Comment', 'your-text-domain'), '% ' . __('Comments', 'your-text-domain') ); ?></h4>
    <span class="title-line"></span>
    <ol class="comment-list">
      <?php wp_list_comments( array( 'avatar_size' => 70, 'style' => 'ul', 'callback' => 'your_theme_slug_comments', 'type' => 'all' ) ); ?>
    </ol>
    <?php the_comments_pagination( array( 'prev_text' => '<i class="fa fa-angle-left" aria-hidden="true"></i> <span class="screen-reader-text">' . __( 'Previous', 'your-text-domain') . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Next', 'your-text-domain') . '</span> <i class="fa fa-angle-right" aria-hidden="true"></i>', ) ); ?>
  <?php } ?>
  <?php if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) { ?>
    <p class="no-comments"><?php _e( 'Comments are closed.', 'your-text-domain'); ?></p>
  <?php } ?>
  <?php comment_form(); ?>
</div>

Style.css

Add this code to your style.css file. Scroll down to learn more.

/* Images */
    
.img-responsive{display: block;max-width: 100%;height: auto;margin: 0px auto;}
.img-circle { border-radius: 50%; }    
    
/* Comments */

textarea, input {border:1px solid #e4e4e4;}
textarea {width:100%;}
.comment-list, .children{list-style:none;}
ul.children {list-style:none;padding-left:0px; margin-left:0px;}
.comment-wrap { border-bottom: 1px solid #ccc; padding-bottom: 40px; margin-bottom: 50px; position:relative; }
.comment-wrap .comments-title{padding-top:60px;}
.comment-wrap .comment-img { float: left; margin-right: 20px; padding-bottom:25px;}
.comment-author {text-align:left;}
.comment-reply {position:absolute;top:0px;right:0px;font-style:italic; padding:5px 5px;background:#f5f5f5;}
.comment-author,.comment-author a{font-size: 14px;text-transform: uppercase; letter-spacing: 2px;margin-bottom:2px;}
.comment-date{font-size: 10px;text-transform: uppercase; letter-spacing: 2px;font-style:italic;display:block;padding-bottom:7px;}
.depth-2 .comment-wrap {padding-left:30px;}
.depth-3 .comment-wrap {padding-left:60px;}
.depth-4 .comment-wrap {padding-left:90px;}
.depth-5 .comment-wrap {padding-left:120px;}
.depth-6 .comment-wrap {padding-left:150px;}
.depth-7 .comment-wrap {padding-left:180px;}
.depth-8 .comment-wrap {padding-left:210px;}
.depth-9 .comment-wrap {padding-left:240px;}
.depth-10 .comment-wrap {padding-left:270px;}
#commentform #comment,#commentform #author,#commentform #email,#commentform #url{display:block;width:100%;}
#commentform input[type="submit"]{display:inline-block;padding:8px 15px;border:1px solid #e4e4e4;font-size: 10px;text-transform: uppercase;letter-spacing: 3px;background: #fff;margin-top:15px;}
#commentform input[type="submit"]:hover {background: #e2fcff;}
.title-line{border-top: 1px dotted #ccc;display: block;max-width: 30%;margin: 0 auto 25px;}

/* Responsive */

@media (max-width: 767px) {
    .comment-list, .children { padding-left: 0px; }
    .comment-wrap .comment-img { float: none;margin: 0px;width: 100%;padding-bottom: 0px; }
    .comment-img>img { display: block;margin: 0px auto; }
    .comment-author, .comment-author a, .comment-date { text-align:center; }
    .depth-2 .comment-wrap,.depth-3 .comment-wrap,.depth-4 .comment-wrap,.depth-5 .comment-wrap,.depth-6 .comment-wrap,.depth-7 .comment-wrap,.depth-8 .comment-wrap,.depth-9 .comment-wrap,.depth-10 .comment-wrap {padding-left:0px;}
    .comment-reply { position: relative; text-align: center; display: block; margin-top: 25px;}
}

If you’re developing a WordPress theme, one of the most important page elements you’ll need to implement is the comments layout. As it so happens, it’s also one of the most frustrating components to develop. Getting the style right is difficult, and messing it up is incredibly easy.

The comments section of a website is a great place for readers to engage with one another and allows website owners to increase user interaction. With this in mind, we’ve put together this simple yet powerful code snippet generator that helps developers add a responsive comments section to their WordPress themes.

How Does the Comments Template and the Custom Callback Work?

By default, WordPress displays comments in a theme based on the code and configuration settings of the comments.php file in the theme’s directory.

Comments Template

To start things off, the comment template tag is wrapped in a conditional statement (using the have_comments() function) to determine whether there are any comments to loop over or not. If true, the template proceeds to display the total number of comments for the current post using the comments_number() function.

Next, the template specifies arguments, filters, and callbacks for the wp_list_comments() function. This function is used to display the entire comments list.

Finally, we have a conditional statement (combining the comments_open(), get_comments_number(), post_type_supports() functions) which determines whether or not comments are open for the post or not (i.e. does the post support comments). If true, the message Comments are closed. will be displayed on the screen.

Custom Callback

The callback argument for the wp_list_comments() function is used to reference the function that will build the beginning of an individual comment. This means that the callback will make your custom function get called to display each comment bypassing WordPress’ internal functionality.

How Do I Use This WordPress Comments With CSS Snippet Generator Tool?

This comments with CSS code snippet generator is designed specifically to help you integrate a well-designed comments section into your WordPress theme. Since I’m using Bootstrap, I’ve pulled a few image styles over from bootstrap.css. Additionally, the generated code ensures that the comments section’s styling will default to the user’s theme’s font style.

To use the tool, all you have to do is enter your theme’s details and let the tool generate a theme-specific code snippet for you to use on your WordPress theme.

• General Tab

  • Theme Slug: The theme’s slug should be in all lowercase letters, numbers, and/or underscores. It’s used to prefix any functions or variables that could potentially cause incompatibility issues with the WordPress core, themes, or plugins. Typically, the theme slug is the exact same string as the text domain with any underscores replaced by hyphens.
  • Text Domain: The text domain is a unique key that will be used to identify translatable strings in your theme or plugin. It should be the same string as your theme’s name in all lowercase letters, numbers, and/or hyphens. In most cases, the text domain matches the theme’s directory name in your site’s root directory.

• Code Tab

  • Once you’ve entered both of the required fields, head over to the Code tab. You’ll see that the Functions.php, Comments.php, and Style.css areas are populated with custom code snippets for adding a pre-designed comments section to your WordPress site.

来源：https://www.nimbusthemes.com/comments-with-css-1-wordpress-snippet-generator/#code_tabs2