Artikel ini akan menjelaskan cara membuat validasi komentar WordPress dengan menampilkan pesan eror di halaman yang sama menggunakan Ajax tanpa plugin tambahan.
Secara default, tombol kirim pada kolom komentar WordPress tetap bisa diklik sekalipun ruas wajib diisi masih kosong yang kemudian pelanggan akan diarahkan pada halaman error disertai petunjuk untuk mengisi ruas wajib diisi di kolom komentar.
Hal ini tentu akan membuat pengunjung merasa kurang nyaman, sebab mereka diharuskan kembali ke halaman sebelumnya untuk memberikan komentar, selain itu pengunjung bisa saja sudah menulis komentar panjang namun terakhir lupa memasukkan nama atau alamat emailnya, pada akhirnya pengunjung harus mengetik ulang komentar yang telah dibuat, atau pada akhirnya pengunjung akan memilih membatalkan berkomentar.
Berbicara tentang validasi komentar, memang ada beberapa plugin yang dapat mengatasi ini seperti Enhanced Comment Validation dan comment validation, atau Anda bisa menggunakan plugin komentar seperti Disqus Comment System, Comments – wpDiscuz atau menggunakan plugin Jetpack, akan tetapi banyak dari kita yang menghindari penggunaan terlalu banyak plugin karena dapat sangat mempengaruhi performa website kita.
Dalam artikel ini akan dijelaskan cara menambahkan validasi komentar di halaman yang sama tanpa diarahkan ke halaman error WordPress dan tentunya tanpa plugin tambahan.
Untuk membuat validasi komentar WordPress tanpa plugin, kita membutuhkan sedikit kode tambahan berikut:
/*Comment Validation www.zaad.my.id*/
function comment_validation_init() {
if(is_single() && comments_open() ) { ?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#commentform').validate({
rules: {
author: {
required: true, /*true=wajib diisi, false=tidak wajib diisi*/
minlength: 2 /*Jumlah karakter minimal untuk nama pengunjung, silakan ganti sesuai selera Anda*/
},
email: {
required: true, /*true=wajib diisi, false=tidak wajib diisi*/
email: true
},
comment: {
required: true, /*true=wajib diisi, false=tidak wajib diisi*/
minlength: 20 /*Jumlah karakter minimal yang harus ditulis di kolom komentar, silakan ganti sesuai selera Anda*/
}
},
/*PESAN ERROR, GANTI SESUAI SELERA ANDA*/
messages: {
author: "Tulis nama Anda",
email: "Tulis email Anda",
comment: "Tulis komentar Anda"
},
errorElement: "div",
errorPlacement: function(error, element) {
element.after(error);
}
});
});
</script>
<?php
}
}
add_action('wp_footer', 'comment_validation_init');Kode tersebut dapat di letakkan di file function.php pada folder tema aktif yang sedang Anda gunakan, saya sangat menyarankan Anda menggunakan child theme agar ketika terjadi error tidak mempengaruhi parent theme, selain itu ketika parent theme update snippet code yang sudah Anda tambahkan tidak hilang.
Cara ini tergolong sangat mudah dan minim risiko, yang perlu Anda lakukan hanya men-download plugin tersebut di sini, lakukan install, lalu aktifkan. Plugin ini akan sangat membantu Anda dalam menambahkan kode snippet atau ketika Anda hendak menambahkan custom CSS, JS, PHP dan lainnya, dan tidak hanya akan membantu Anda dalam membuat validasi komentar dengan Ajax. Anda hanya perlu menambahkan kode snippet di atas pada plugin Codesnippet, perhatikan bahwa yang akan Anda tambahkan adalah kode PHP, Anda bisa melihat pada daftar kode di Snippetcode contoh untuk menambahkan kode PHP, silakan tambahkan kodenya lalu aktifkan. Jangan lupa untuk selalu membersihkan cache jika Anda menggunakan plugin caching.
Sampai pada tahap ini validasi komentar WordPress di halaman yang sama menggunakan Ajax sudah selesai dan berfungsi, silakan Anda mencobanya.
Jika Anda ingin mengubah warna border atau warna teks peringatan silakan tambahkan kode CSS berikut:
Anda juga dapat memodifikasi warna pada teks dan border ketika pesan error muncul melalui kode CSS berikut:
#commentform textarea.error, input.error {
border: 1px solid #ff9999;
}
#commentform div.error {
color: #ff6666
}
Dari dashboard WordPress Anda, Tampilan > Sesuaikan > CSS Tambahan, lalu tambahkan kode CSS di atas. Silakan modifikasi kode CSS sesuai selera Anda, lalu terbitkan.
Seperti dijelaskan sebelumnya bahwa plugin Codesnippet akan sangat membantu Anda dalam kustomisasi website Anda dengan mudah, silakan lihat contoh untuk menambahkan kode CSS (Example CSS Snippet), lalu silakan tambahkan kode CSS di atas pada tempat yang telah ditentukan, terbitkan lalu aktifkan.
