Alasan saya migrasi dari blogspot ke wordpress.org adalah karena wordpress sudah mendukung yang namanya kolom komentar bersarang atau dalam bahasa kerennya Nested Comment, hal itu juga pernah saya bahas di blogspot tentang ‘BlogSpot reply comment suatu dilema’, selain alasan-alasan lain yang tidak perlu saya sebutkan satu persatu…

Sebenarnya udah banyak ataupun rata-rata template wordpress udah mendukung komentar bersarang, tapi terkadang kita terlanjur suka dengan template “anu” tapi kekurangannya tidak ada fasilitas nested comments. Sangat disayangkan memang & cara satu-satunya yang paling gampang ialah menginstal plugin WordPress Thread comment.

Saya termasuk orang yang tidak suka menggunakan banyak plugin pada blog saya, bukannya idealis akan tetapi selagi masih bisa diutak-atik kenapa tidak? Lagi pula tampilan dari plugin tersebut standar banget & saya sudah mengenali dari tampilannya jika sebuah blog menggunakan plugin tersebut & ada beberapa alasan lain juga…he..he..he…

Awal pertama kali saya mencoba di template Journalist, dimana template tersebut tidak punya fasilitas komentar bersarang & hasilnya seperti screen-shot dibawah ini :

kerenkan?..he..he..he.. Tutorialnya saya dapatkan di blognya c.bavota tentang How to Add Nested comments, kalau kamu ingin tahu lebih lanjut, silahkan berkunjung ke artikelnya.

Tapi saya belum Puas!
Ya, saya orangnya tidak pernah puas kalau hanya sekedar salin tempel tutorialnya begitu saja, saya coba memikirkan lebih lanjut bagaimana Komentar Bersarang itu dibuat dengan cara saya.
Setelah beberapa hari trial & error akhirnya bisa juga saya modifikasi sedemikian rupa, anda bisa melihat demonya disini.

Caranya tidak beda jauh denga Bavotasan.com….
pertama-tama buka comments.php dan ganti semuanya dengan kode seperti dibawah ini, tetapi untuk mengantisipasi error lebih baik diback-up dulu di notepad :

<?php // Do not delete these lines
	if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

        if (!empty($post->post_password)) { // if there's a password
            if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
				?>

				<p class="nocomments">This post is password protected. Enter the password to view comments.<p>

				<?php
				return;
            }
        }

		/* This variable is for alternating comment background */
		$oddcomment = 'alt';
?>

<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>

	<ol class="commentlist">
	<?php wp_list_comments('avatar_size=55'); ?>
	</ol>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>

	<?php endif; ?>
<?php endif; ?>

<?php if ( comments_open() ) : ?>

<div id="respond">

<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>

<div class="cancel-comment-reply">
	<?php cancel_comment_reply_link(); ?>
</div>

<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( 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 ( is_user_logged_in() ) : ?>

<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 »</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author">Name <?php if ($req) echo "(required)"; ?></label></p>

<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email">Mail (will not be published but <?php if ($req) echo "required)"; ?></label></p>

<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url">Website</label></p>

<?php endif; ?>

<!--<p><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></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" />
<?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 ?>

jangan lupa tambahkan
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
di file header.php diatas kode <?php wp_head(); ?>

Setelah beres merubah yang diatas, sekarang yang kita menuju file CSS, dan hanya menambahkan kode seperti ini :

/*---:[ comment styles ]:---*/

.commentlist li, #commentform input, #commentform textarea { font: 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif; }

.commentlist li ul li { font-size: 1em;}

.commentlist li { font-weight: bold;}

.commentlist li .avatar { float: left; border: 1px solid #eee; padding: 2px; margin-right:5px; background: #fff; }

.commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal; font-size: 1.1em; }

.commentlist p { font-weight: normal; line-height: 1.5em; text-transform: none; }

#commentform p { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }

.commentmetadata { font-weight: normal; font-size: 12px;}

/*---:[ comment form styles ]:---*/

#commentform input { width: 170px; padding: 2px; margin: 5px 5px 1px 0; }

#commentform { margin: 5px 10px 0 0; }

#commentform textarea { width: 100%; padding: 2px;}

#respond:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

#commentform #submit { float:left; font: normal 1.2em/1.2em Candara, Verdana, sans-serif !important; padding: 0.231em 0.462em; margin: 0 0 5px auto;text-transform: uppercase; letter-spacing: 1px; color: #aaa; background: #444; border: 0.154em solid #111; border-top-color: #777; border-left-color: #777; cursor: pointer; width: auto; }
#commentform #submit:hover { color: #fff; background: #d00; border-color: #9c0101; border-top-color: #fd4d4d; border-left-color: #fd4d4d; }

/* Begin Comments*/

.alt { margin: 0; padding: 10px;}

.commentlist { padding: 0; text-align: justify;}

.commentlist li { margin: 15px 0 10px; padding: 5px 5px 10px 10px; list-style: none;}

.commentlist li ul li { margin-right: -5px; margin-left: 5px;}

.commentlist p { margin: 10px 5px 10px 5px;}

.children { padding: 0; border-left: 2px solid #C8C8C8; }

#commentform p { margin: 5px 0;}

.nocomments { text-align: center; margin: 0; padding: 0; }

.commentmetadata { margin: 0; display: block;}

/* End Comments */

perbedaan saya dengan bavotasan.com hanya terletak pada kode ol dan li saja.
Sampai disini komentar udah mempunyai fasilitas Komentar Bersarang, & saya melihat kembali panduan dari Bavotasan.com untuk langkah-langkah pengaturannya.

Berikut saya tampilkan screen-shotnya, takutnya blog yang saya buat untuk uji coba disuspend ama yang punya…he..he..he…

Untuk lebih tahu hasil akhirnya berikut ada DEMONYA.

Template yang saya gunakan ini ( Neoclassical ) juga sebelumnya tidak mempunyai fasilitas Komentar Berantai & saya berhasil merubahnya.
Pendapat teman-teman gimana? Lebih enak menggunakan plugin saja atau merubahnya secara manual seperti yang saya lakukan?…