Membuat form reply comment di wordpress

Tutorial singkat cara membuat threaded comment di wordpress. Tutorial ini ditujukan kepada developer saja, dan langsung aja deh ^_^

1. Buka file comments.php yang berada didalam folder themes yang digunakan.

2. Struktur tag html untuk daftar komentar diperkirakan harus seperti berikut ini supaya mudah:

<ul>

<li id="comment_<?php echo $comment->comment_ID; ?>">
<div>
<strong><a href="javascript:;" onclick="javascript:open_reply('comment_<?php echo $comment->comment_ID; ?>', '<?php echo $post->ID; ?>', '<?php echo $comment->comment_ID; ?>')">REPLY</a></strong>
<strong><?php comment_author_link() ?></strong>&nbsp;/&nbsp;  <?php echo $comment->comment_date; ?>
<div></div>
</div>
<?php comment_text() ?>
<div></div>
</li>

</ul>

3. Buat sebuah form untuk melakukan reply terhadap comment, simpan dimana saja dan hanya 1, seperti dibawah ini:

<div id="comment_form_reply" style="display:none;">
<?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 method="post" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php">
<a href="javascript:;" onclick="javascript:close_form_reply();" title="close">close</a>
<h2>POST A COMMENT</h2>
<?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 &raquo;</a></p>
<?php else : ?>
<label>Name: *</label><br />
<input type="text" name="author" /><br />
<label>Email: *</label><br />
<input type="text" name="email" /><br />
<label>Website / URL:</label><br />
<input type="text" name="url" /><br />
<label>Comment: *</label><br />
<?php endif; ?>
<textarea name="comment"></textarea><br />
<input id="comment_post_ID" type="hidden" value="0" name="comment_post_ID" style="border:0px;margin:0px;padding:0px;"/>
<input id="comment_parent" type="hidden" value="0" name="comment_parent" style="border:0px;margin:0px;padding:0px;"/>
<input type="submit" value="SUBMIT COMMENT"/>
</form>
<?php endif; ?>
</div><!-- form -->

4. Siapkan javascript, karena WP sudah default menggunakan jQuery, maka kita akan menggunakan jQuery untuk memanipulasi form reply nya:

<script language="javascript" type="text/javascript">
// <![CDATA[
function open_reply(commentID, postID, parentID) {
var comment_reply = jQuery('#comment_form_reply');
jQuery('#comment_post_ID', comment_reply).val(postID);
jQuery('#comment_parent', comment_reply).val(parentID);
comment_reply.clone().appendTo(jQuery('#' + commentID).find('.sys_comment_post_container')).css('display', 'block');
comment_reply.remove();
}

function close_form_reply() {
jQuery('#comment_form_reply').hide();
}
// ]]>
</script>

udah deh segitu aja.

Penjelasan singkat:

Pada poin 1, adalah untuk default theme yg tidak menggunakan plugin apa pun untuk bagian comment.

Pada poin 2, gunakan looping pada bagian

untuk menampilkan semua komentar, jika sudah berupa threaded comment maka looping disini harus menggunakan recursive loop untuk mendapatkan child dari komentar yg di reply. Setiap

tersebut kita tambahkan tag

untuk menampilkan form yg tadi kita buat.

Pada poin 3, form ini kita berikan id dan di sembunyikan, karena akan ditampilkan jika ada yang menekan link REPLY. Kunci dimana kita bisa mengetahui apakah komentar yang disubmit child dari komentar mana yaitu pada input comment_parent, secara default WP sudah menyiapkan field untuk menyimpan data tersebut di tabelnya. Untuk proses submit action, kita menggunakan standar WP yang mengarah ke wp-comments-post.php.

Pada poin 4, javascript ini mempunyai dua fungsi: open_reply dan close_form_reply. open_reply berfungsi untuk melakukan copy dan paste form yang sudah kita sediakan dan di tampilkan kedalam tag div yg sudah kita siapkan sebelumnya, dan menghapus semua form yang sebelumnya sudah tampil dibagian yang lain supaya tidak terjadi penggandaan. Untuk mengetahui lebih jelas tentang proses ini bisa di lihat di Trik mengolah HTML on-the-fly menggunakan jQuery + JSON. close_form_reply berfungsi untuk menyembunyikan form reply tersebut.

Yup seperti itu saja, jika ada hal-hal yang lain mengenai tutorial singkat ini untuk jangan sungkan – sungkan memberikan komentar dan semoga bermanfaat.

“People Always Forget How Fast We Did A Job, But They Will Remember How well We Did It”

Category: Experience

Tags: comment, form, reply, threaded, wordpress