Membuat Validasi Komentar WordPress dengan Ajax Tanpa Plugin

25 Mei 2022
Baca 3 menit
410 Views

Daftar Isi

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 Jetpackakan 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.

Validasi Komentar WordPress di Halaman yang Sama Tanpa Plugin

Untuk membuat validasi komentar WordPress tanpa plugin, kita membutuhkan sedikit kode tambahan berikut:

Custom Snippet Code

/*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');

Di Mana Kode Tersebut Diletakkan?

Cara pertama: Letakkan di file function.php

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 kedua: Menggunakan plugin Codesnippet

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:

Custom CSS Untuk Pesan Error

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
}

Di Mana Kode CSS Tersebut Ditambahkan?

Cara Pertama: Menambahkan Kode CSS dari Customizer

Dari dashboard WordPress Anda, Tampilan > Sesuaikan > CSS Tambahan, lalu tambahkan kode CSS di atas. Silakan modifikasi kode CSS sesuai selera Anda, lalu terbitkan.

Cara Kedua: Menggunakan Plugin Codesnippet

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.

Kesimpulan

  • Untuk membuat validasi komentar WordPress dan menampilkan eror di halaman yang sama dengan Ajax, Anda dapat menggunakan:
  • Untuk menambahkan kode snippet di atas Anda dapat menggunakan:
    • File function.php pada folder tema aktif yang sedang Anda gunakan, dan Anda sangat disarankan menggunakan child theme.
    • Menggunakan plugin Codesnippet, selain ini mudah dan minim risiko, plugin juga akan sangat membantu Anda dalam kustomisasi lainnya.
  • Anda dapat memodifikasi pesan eror menggunakan kode CSS seperti contoh di atas.
  • Jangan lupa untuk membersihkan cache setelah Anda melakukan langkah-langkah di atas jika Anda menggunakan plugin caching.
Tags: ,

Penulis: Mohammad Ridwanullah

Founder www.zaad.my.id | Author | Web Developer | Alumni Darul Ihsan Sana Daja & Ma'had Al-Ittihad Al-Islami Camplong. Melanjutkan pendidikan S1 Fakultas Syariah di LIPIA Jakarta. Melanjutkan pendidikan S2 di Fakultas Syariah jurusan Fiqh dan Ushul Fiqh di LIPIA Jakarta.

Artikel Terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

file-adduserslaptop-phoneclockdownloadmagnifiercrossmenulistchevron-leftchevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram