Merubah Comment Form Pada Theme WordPress

by -

Cara mudah merubah comment form default atau bawaan WordPress tanpa menggunakan plugin, tapi dengan mengedit theme WordPress.

default-comment-form

Buat file baru pada folder theme anda dengan nama comments-form.php kemudian copy paste code dibawah ini.

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">
<textarea name="comment" id="comment" placeholder="Isi komentar *" cols="45" rows="10" tabindex="4"></textarea>
<input type="text" name="author" id="author"  value="<?php echo $comment_author; ?>" placeholder="Name *" size="30" tabindex="1" />
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" placeholder="Email *" size="30" tabindex="2" />
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" placeholder="Website" size="30" tabindex="3" />
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>
</form>

Untuk memanggil comments-form.php atau menampilkan comment form yang telah kita buat tadi edit file comment.php.

// Cari code seperti ini
<?php comment_form(); ?>
// Kemudian ganti dengan code dibawah ini
<?php get_template_part('comments-form'); ?>

Kemudian kita dapat mempercantik tampilan comment form tersebut dengan mengedit CSS pada theme lalu tambahkan code css dibawah ini.

.comments {
    background: #FFF;
    margin-top: 30px;
}
.comments textarea, .content textarea, input#author, input#email, input#url {
    width: 95.5%;
    border: 1px solid #E4E4E4;
    margin-bottom: 18px;
    padding: 2%;
}
.comments input#submit {
    background-color: #0274BE;
    padding: 12px 15px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    border: none;
    border-radius: 3px;
}

Hasilnya comment form akan tampil seperti gambar dibawah ini.

merubah-comment-form