Beberapa hari yang lalu saya penasaran dengan tampilan comment dari beberapa blog yang saya temukan. List ataupun tampilan comment tersebut terlihat lebih menarik karena ditampilkan secara “nested” ( di mana reply comment langsung ditampilkan di bawah comment bersangkutan ).  Awalnya saya menyangka blog – blog tersebut menggunakan plugin tertentu ( sempat browsing di wordpress buat nyari plugin-nya ).

Ternyata cara untuk menampilkan comment wordpress secara “nested” sangat sederhana, yaitu dengan menggunakan CSS dan perubahan sedikit pada file “comments.php”. Bagi yang belum bisa membuat “nested comment” di blog yang berbasis wordpress, berikut adalah caranya  ( saya mencoba cara ini di versi 2.8.4 ) :

1. Login ke admin page,  pilih “Setting -> Discussion” terus di bagian “Other comment settings” pilih “Enable threaded (nested) comments levels deep” ( saya menggunakan 2 untuk level deep ).
2. Tambahkan kode CSS berikut ke style tema yang sedang dipakai

   
   ol.commentlist {}
   ol.commentlist li {}
   ol.commentlist li.alt {}
   ol.commentlist li.bypostauthor {}
   ol.commentlist li.byuser {}
   ol.commentlist li.comment-author-admin {}
   ol.commentlist li.comment {}
   ol.commentlist li.comment div.comment-author {}
   ol.commentlist li.comment div.vcard {}
   ol.commentlist li.comment div.vcard cite.fn {}
   ol.commentlist li.comment div.vcard cite.fn a.url {}
   ol.commentlist li.comment div.vcard img.avatar {}
   ol.commentlist li.comment div.vcard img.avatar-32 {}
   ol.commentlist li.comment div.vcard img.photo {}
   ol.commentlist li.comment div.vcard span.says {}
   ol.commentlist li.comment div.commentmetadata {}
   ol.commentlist li.comment div.comment-meta {}
   ol.commentlist li.comment div.comment-meta a {}
   ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
   ol.commentlist li.comment div.reply {}
   ol.commentlist li.comment div.reply a {}
   ol.commentlist li.comment ul.children {}
   ol.commentlist li.comment ul.children li {}
   ol.commentlist li.comment ul.children li.alt {}
   ol.commentlist li.comment ul.children li.bypostauthor {}
   ol.commentlist li.comment ul.children li.byuser {}
   ol.commentlist li.comment ul.children li.comment {}
   ol.commentlist li.comment ul.children li.comment-author-admin {}
   ol.commentlist li.comment ul.children li.depth-2 {}
   ol.commentlist li.comment ul.children li.depth-3 {}
   ol.commentlist li.comment ul.children li.depth-4 {}
   ol.commentlist li.comment ul.children li.depth-5 {}
   ol.commentlist li.comment ul.children li.odd {}
   ol.commentlist li.even {}
   ol.commentlist li.odd {}
   ol.commentlist li.parent {}
   ol.commentlist li.pingback {}
   ol.commentlist li.pingback div.comment-author {}
   ol.commentlist li.pingback div.vcard {}
   ol.commentlist li.pingback div.vcard cite.fn {}
   ol.commentlist li.pingback div.vcard cite.fn a.url {}
   ol.commentlist li.pingback div.vcard span.says {}
   ol.commentlist li.pingback div.commentmetadata {}
   ol.commentlist li.pingback div.comment-meta {}
   ol.commentlist li.pingback div.comment-meta a {}
   ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
   ol.commentlist li.pingback div.reply {}
   ol.commentlist li.pingback div.reply a {}
   ol.commentlist li.pingback ul.children {}
   ol.commentlist li.pingback ul.children li {}
   ol.commentlist li.pingback ul.children li.alt {}
   ol.commentlist li.pingback ul.children li.bypostauthor {}
   ol.commentlist li.pingback ul.children li.byuser {}
   ol.commentlist li.pingback ul.children li.comment {}
   ol.commentlist li.pingback ul.children li.comment-author-admin {}
   ol.commentlist li.pingback ul.children li.depth-2 {}
   ol.commentlist li.pingback ul.children li.depth-3 {}
   ol.commentlist li.pingback ul.children li.depth-4 {}
   ol.commentlist li.pingback ul.children li.depth-5 {}
   ol.commentlist li.pingback ul.children li.odd {}
   ol.commentlist li.thread-alt {}
   ol.commentlist li.thread-even {}
   ol.commentlist li.thread-odd {}
   

3. Ganti file comments.php ( pada tema yang sedang digunakan ) dengan kode berikut

   
   <?php
   
   // Do not delete these lines
   if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
   die ('Please do not load this page directly. Thanks!');
   
   if ( post_password_required() ) { ?>
   <p>This post is password protected. Enter the password to view comments.</p>
   <?php
   return;
   }
   ?>
   
   <!-- You can start editing here. -->
   
   <?php if ( have_comments() ) : ?>
   <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
   
   <div>
   <div><?php previous_comments_link() ?></div>
   <div><?php next_comments_link() ?></div>
   </div>
   
   <ol>
   <?php wp_list_comments(); ?>
   </ol>
   
   <div>
   <div><?php previous_comments_link() ?></div>
   <div><?php next_comments_link() ?></div>
   </div>
   <?php else : // this is displayed if there are no comments so far ?>
   
   <?php if ('open' == $post->comment_status) : ?>
   <!-- If comments are open, but there are no comments. -->
   
   <?php else : // comments are closed ?>
   <!-- If comments are closed. -->
   <p>Comments are closed.</p>
   
   <?php endif; ?>
   <?php endif; ?>
   
   <?php if ('open' == $post->comment_status) : ?>
   
   <div id="respond">
   
   <h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
   
   <div>
   <small><?php cancel_comment_reply_link(); ?></small>
   </div>
   
   <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
   <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
   <?php else : ?>
   
   <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
   
   <?php if ( $user_ID ) : ?>
   
   <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>
   
   <?php else : ?>
   
   <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
   <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
   
   <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
   <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
   
   <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
   <label for="url"><small>Website</small></label></p>
   
   <?php endif; ?>
   
   <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
   
   <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
   
   <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
   <?php comment_id_fields(); ?>
   </p>
   <?php do_action('comment_form', $post->ID); ?>
   
   </form>
   
   <?php endif; // If registration required and not logged in ?>
   </div>
   
   <?php endif; // if you delete this the sky will fall on your head ?>

4. Tambahkan kode berikut ke bagian header.php ( kalau belum ada )

   
      <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

5. Sekarang tampilan comment pada blog anda akan seperti ini http://balisidenotes.com/?p=426#comments

Tampilan "Nested Comments" di Wordpress