Menyembunyikan Form Komentar WordPress

Posted by Poer on Feb 20, 2010 in Tips and Tricks, WordPress Themes | 11 comments

Menyembunyikan yang kumaksud disini itu seperti ini: form komentar tersembunyi, dan baru akan terbuka ketika pengunjung mengklik link untuk membukanya.

Sebelumnya untuk mendapatkan efek seperti itu aku menggunakan plugin Hidden Comment Form dari github.com. Sayangnya ternyata plugin ini membuat halaman single post-nya tidak XHTML valid dan tidak bisa dibuka di IE8 *aku ga nyoba di IE versi lain, kebetulan barusan ngecek tampilannya di laptopku yg cuma punya IE8*.

Setelah muter2 nyari di Google, akhirnya nemu postingannya om Prelovac yang satu ini: How to toggle comments with one line of code. Ternyata trik untuknya cukup sederhana dan cuma butuh 1 baris kode. Hasilnya XHTML valid, dan berjalan dengan lancar di IE8.

Sebagai contoh disini, aku gunakan theme default bawaan WordPress.

#1. Buka file comments.php dan lihat baris ke 63, ini untuk mencari tahu CSS ID dari form komentar theme tersebut.

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

Untuk theme default ini ID-nya adalah “commentform”.

#2. Berdasarkan ID form komentar itu, sekarang kita bisa membentuk kode untuk menyembunyikan dan menampilkan form komentar tadi:

<p><a style="cursor:pointer" onclick="jQuery('#commentform').toggle();">Tampilkan form komentar</a> »</p>

Sesuaikan kode yg jQuery(‘#commentform’) dengan ID dari form komentar tadi. Jadi kalau ID-nya “comments”, ubah kodenya jadi jQuery(‘#comments’).

#3. Letakkan kode di langkah ke-2 tadi dibagian bawah judul komentarnya. Untuk theme default kira2 di baris ke 54, tepat di bawah kode berikut ini:

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

#4. Tambahkan kode style=”display:none;” untuk menyembunyikan form komentar pada kode deklarasi form komentar di baris ke 63 tadi *lihat langkah ke-1*, sehingga menjadi seperti ini:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" style="display:none;">

Dengan mengikuti ke-4 langkah ini, ketika halaman posting tersebut di buka, form komentar akan tersembunyi. Dia baru akan terlihat ketika pengunjung mengklik link “Tampilkan form komentar”.

Note:

Efek ini bisa jalan kalau WordPress themenya support JQuery. Kalau enggak, coba tambahkan kode berikut ini di header.php setelah kode wp_head();

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Atau bisa juga dg menginstall plugin Use Google Libraries.

Selamat mencoba

Tags:

jquery komentar di wordpress