Cara mendesain formulir komentar WordPress (panduan definitif)
Ingin mengubah gaya formulir komentar WordPress di situs Anda? Komentar memainkan peran penting dalam membangun keterlibatan pengguna di situs web. Formulir komentar yang menarik dan mudah digunakan mendorong pengguna untuk bergabung dalam diskusi. Inilah sebabnya kami telah membuat panduan akhir untuk mendesain formulir komentar WordPress dengan mudah.
Sebelum saya mulai
Tema WordPress mengontrol tampilan situs Anda. Setiap tema WordPress berisi file yang berbeda, termasuk file template, file fitur, JavaScripts, dan style sheet.
Lembar gaya berisi aturan CSS untuk semua elemen yang digunakan oleh tata letak WordPress Anda. Anda dapat menambahkan CSS khusus Anda sendiri untuk mengganti aturan gaya untuk tema Anda.
Jika Anda belum melakukannya, lihat artikel kami tentang cara menambahkan CSS khusus ke WordPress untuk pemula.
Selain CSS, Anda mungkin perlu menambahkan beberapa fungsi untuk mengubah tampilan default dari formulir komentar WordPress Anda. Jika Anda belum melakukannya, baca artikel kami tentang cara menyalin dan menempelkan kode di WordPress.
Dengan itu, mari kita lihat bagaimana formulir komentar WordPress dirancang.
Karena ini adalah panduan yang cukup komprehensif, kami telah membuat daftar isi untuk membantu Anda menavigasi:
- Ubah komentar WordPress dengan kelas CSS standar
- Tambahkan login sosial ke formulir komentar WordPress
- Masukkan teks kebijakan komentar di formulir komentar WordPress
- Pindahkan kotak teks komentar ke bawah
- Hapus bilah situs (URL) dari formulir komentar WordPress
- Tambahkan kotak centang Berlangganan ke Komentar di WordPress
- Tambahkan tag cepat di komentar WordPress
Sebagian besar tema WordPress memiliki templat yang disebut comment.php. File ini digunakan untuk menampilkan komentar dan formulir komentar pada posting blog Anda. Formulir komentar WordPress dihasilkan dengan fungsi:
Secara default, fitur ini menghasilkan formulir umpan balik Anda dengan tiga bidang teks (nama, email, dan situs web), kotak teks umpan balik, kotak centang kepatuhan GDPR, dan tombol Kirim.
Anda dapat dengan mudah mengubah salah satu bidang ini dengan menyesuaikan kelas CSS standar. Di bawah ini adalah daftar kelas CSS standar yang ditambahkan WordPress ke setiap formulir komentar.
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit
Dengan hanya menyesuaikan kelas-kelas CSS ini, Anda dapat sepenuhnya mengubah tampilan formulir komentar WordPress Anda.
Mari kita ubah beberapa hal untuk memberi Anda ide bagus tentang cara kerjanya.
Pertama, kami memilih bidang formulir aktif. Dengan menyoroti bidang yang sedang aktif, formulir Anda lebih mudah diakses oleh orang-orang dengan kebutuhan khusus, dan formulir komentar Anda terlihat lebih baik di perangkat yang lebih kecil.
#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}
/* Highlight active form field */
#respond input(type=text), textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
#respond input(type=text):focus,
input(type=email):focus,
input(type=url):focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}
Seperti inilah bentuk tampilan kami di tema WordPress Twenty Sixteen setelah perubahan:
Kelas-kelas ini memungkinkan Anda untuk mengubah perilaku tampilan teks di bidang input. Kami mengubah format teks untuk nama penulis dan bidang URL.
#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
}
#url {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}
Jika Anda melihat lebih dekat pada tangkapan layar di bawah ini, nama dan sumber bidang email berbeda dari URL situs.
Anda juga dapat mengubah gaya tombol kirim di formulir komentar WordPress. Alih-alih menggunakan tombol "Kirim" default, kami memberikannya gradien CSS3 dan bayangan kotak.
#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}
Ambil formulir komentar WordPress ke tingkat berikutnya
Mungkin Anda pikir itu terlalu mudah. Kita harus mulai di sana sehingga semua orang bisa mengikuti kita.
Anda dapat mengambil formulir komentar WordPress Anda ke tingkat berikutnya dengan mengatur ulang bidang formulir, menambahkan login sosial, berlangganan komentar, pedoman komentar, tag cepat, dan banyak lagi.
Tambahkan login sosial ke komentar WordPress
Mari kita mulai dengan menambahkan login sosial ke komentar WordPress.
Pertama, instal dan aktifkan plugin login sosial WordPress. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami untuk menginstal plugin WordPress.
Setelah kunjungan aktivasi Pengaturan »WP Sosial Login Konfigurasikan halaman konfigurasi plugin.
Plugin membutuhkan kunci API untuk terhubung ke platform sosial. Anda akan melihat tautan ke petunjuk tentang cara membawa informasi ini ke setiap platform.
Setelah memasukkan kunci API Anda, klik tombol Simpan Pengaturan untuk menyimpan perubahan Anda.
Anda sekarang dapat mengunjungi situs Anda untuk melihat tombol login sosial di atas formulir komentar Anda.
Kami mencintai semua pengguna kami dan menghargai bahwa Anda meluangkan waktu untuk meninggalkan komentar di situs web kami. Namun, untuk menciptakan lingkungan diskusi yang sehat, penting untuk memoderasi komentar.
Untuk transparansi penuh, kami telah membuat halaman kebijakan komentar. Namun, Anda tidak dapat memasukkan tautan ini di footer.
Kami ingin kebijakan komentar kami menjadi menonjol dan terlihat oleh semua pengguna yang meninggalkan komentar. Karena alasan ini, kami telah memutuskan untuk memasukkan kebijakan komentar dalam formulir komentar WordPress kami.
Untuk menambahkan halaman kebijakan komentar, pertama-tama buat halaman WordPress dan tentukan kebijakan komentar Anda (Anda dapat mencuri kami dan menyesuaikannya dengan kebutuhan Anda).
Anda kemudian dapat menempelkan kode berikut ini ke file theme.php tema Anda atau plugin khusus situs.
function wpbeginner_comment_text_before($arg) {
$arg('comment_notes_before') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Kode di atas menggantikan formulir komentar standar sebelum catatan dengan teks ini. Kami juga menambahkan kelas CSS ke kode sehingga kami dapat menggunakan CSS untuk menyoroti peringatan. Berikut adalah contoh CSS yang kami gunakan:
p.comment-policy {
border: 1px solid #ffd499;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}
Ini seperti apa yang terlihat di halaman pengujian kami:
Untuk menampilkan tautan berdasarkan area teks komentar, gunakan kode berikut.
function wpbeginner_comment_text_after($arg) {
$arg('comment_notes_after') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');
Jangan lupa untuk mengubah URL yang sesuai. Lalu buka halaman kebijakan komentar Anda alih-alih example.com 
Secara default, formulir komentar WordPress menampilkan area bidang komentar terlebih dahulu, dan kemudian bidang Nama, Email, dan Situs Web. Perubahan ini dibuat di WordPress 4.4 diperkenalkan.
Sebelumnya, situs WordPress pertama kali menampilkan bidang Nama, Email, dan Situs Web, dan kemudian kotak teks Komentar. Kami percaya bahwa pengguna kami terbiasa menampilkan formulir komentar dalam urutan ini, jadi kami terus menggunakan urutan bidang lama di WPBeginner.
Jika diinginkan, cukup tambahkan kode berikut ke file file.php tema Anda atau ke plugin khusus situs.
function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields('comment');
unset( $fields('comment') );
$fields('comment') = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');
Kode ini hanya memindahkan bidang ke bawah di area teks komentar.
Hapus bidang situs (URL) dari formulir komentar WordPress
Bidang situs di kotak komentar menarik banyak spammer. Penghapusan tidak menghentikan spammer atau mengurangi komentar spam, tetapi itu pasti akan mencegah Anda dari secara tidak sengaja menyetujui komentar dengan tautan ke situs penulis yang salah.
Itu juga menyusut bidang dalam bentuk komentar, membuatnya lebih mudah dan lebih ramah pengguna. Untuk informasi lebih lanjut tentang topik ini, lihat artikel kami tentang cara menghapus bidang url situs dari formulir komentar WordPress
Untuk menghapus bidang URL dari formulir komentar, cukup tambahkan kode berikut ke file features.php Anda atau plugin khusus situs.
function wpbeginner_remove_comment_url($arg) {
$arg('url') = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
Jika pengguna meninggalkan komentar di situs Anda, mereka dapat mengikuti utas ini untuk menentukan apakah seseorang merespons komentar Anda. Dengan menambahkan kotak centang untuk berlangganan komentar, pengguna dapat diberitahu segera ketika komentar baru muncul di posting.
Untuk menambahkan kotak centang ini, Anda harus menginstal dan mengaktifkan terlebih dahulu isi ulang komentar. Setelah mengaktifkan, buka Pengaturan »Berlangganan ke komentar untuk mengonfigurasi pengaturan plugin.
Untuk petunjuk langkah demi langkah yang terperinci, lihat artikel kami tentang bagaimana pengguna dapat berlangganan komentar di WordPress.
Tag cepat adalah tombol pemformatan yang memudahkan pengguna untuk berkomentar. Ini termasuk tombol tebal dan miring, menambahkan tautan atau kutipan blok.
Untuk menambahkan tag cepat, instal dan aktifkan plugin tag dasar. Untuk informasi lebih lanjut, lihat artikel kami tentang cara menambahkan tag cepat dengan mudah ke formulir komentar WordPress.
Seperti inilah bentuk komentar Anda saat Anda menambahkan tag cepat.
Kami harap artikel ini telah membantu Anda mendesain formulir komentar WordPress agar lebih menyenangkan bagi pengguna Anda. Anda juga dapat membaca tips kami untuk lebih banyak komentar di posting blog WordPress Anda.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.
