Cara Merancang Formulir Komentar WordPress (Panduan Utama)

Catatan: Dalam topik berikutnya yang akan Anda baca, Anda akan mempelajari tentang: Cara Merancang Formulir Komentar WordPress (Panduan Utama)

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. Itu sebabnya kami telah membuat panduan definitif tentang cara mendesain formulir komentar WordPress dengan mudah.

Sebelum kamu memulai

Tema WordPress mengontrol tampilan dan nuansa situs web Anda. Setiap tema WordPress memiliki file yang berbeda, termasuk file template, file fitur, JavaScript, dan style sheet.

Lembar gaya berisi aturan CSS untuk semua elemen yang digunakan dalam tema WordPress Anda. Anda dapat menambahkan CSS khusus Anda sendiri untuk mengganti aturan gaya untuk tema Anda.

Jika Anda belum pernah melakukannya, lihat artikel kami tentang cara menambahkan CSS khusus ke WordPress untuk pemula.

Selain CSS, Anda mungkin memerlukan lebih banyak fitur untuk mengubah tampilan dan nuansa default formulir komentar WordPress Anda. Jika Anda belum pernah melakukannya, lihat artikel kami tentang cara menyalin dan menempelkan kode ke WordPress.

Karena itu, mari kita lihat cara mendesain formulir komentar WordPress.

Karena ini adalah panduan yang cukup komprehensif, kami telah membuat daftar isi untuk membantu navigasi:

Ubah Komentar WordPress Menggunakan Kelas CSS Standar Tambahkan Login Sosial ke WordPress Formulir Komentar Tambahkan Kebijakan Teks Komentar ke Formulir Komentar WordPress Pindahkan Kolom Teks Komentar Turun Hapus Bidang Situs (URL) komentar formulir WordPress) Tambahkan Berlangganan ke Komentar WordPress Tambahkan Pintasan Komentar

Sebagian besar tema WordPress menyertakan templat yang disebut Comments.php. File ini digunakan untuk menampilkan komentar dan formulir komentar pada posting blog Anda. Formulir komentar WordPress dibuat dengan :.

Secara default, fitur ini membuat formulir komentar Anda dengan tiga bidang teks (nama, email, dan situs web), satu bidang teks untuk teks komentar, satu kotak centang untuk kepatuhan RGPD, dan tombol Kirim.

Anda dapat dengan mudah mengubah setiap bidang ini hanya dengan menyesuaikan kelas CSS default. 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-note {} . diperlukan {} . .comment-form-Author {} .comment-form-email {} .comment-form-url {} .comment-form-comment {} .comment-form-cookies-agree {} .form-allow-tags {} .form-kirim

Hanya dengan men-tweak kelas-kelas CSS ini, Anda dapat sepenuhnya mengubah tampilan dan nuansa formulir komentar WordPress Anda.

Lanjutkan dan coba ubah beberapa hal sehingga Anda dapat melihat cara kerjanya.

Pertama, kita mulai dengan memilih bidang formulir yang aktif. Dengan memilih bidang aktif saat ini, formulir Anda lebih mudah diakses oleh orang-orang berkebutuhan khusus, dan juga membuat formulir komentar Anda terlihat lebih baik di perangkat yang lebih kecil.

#respons {latar belakang: #fbfbfb; padding:0 10px 0 10px; } / * Tandai bidang formulir aktif * / #respond input (type = text), textarea {-webkit-transition: all 0.30s easy in and out; -moz switch: semua 0,30 mudah masuk dan keluar; -ms-process: semua 0,30 mudah masuk dan keluar; -o-forward: semua 0,30 detik masuk dan keluar dengan mudah; garis besar: tidak ada; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; perbatasan: 1px solid #DDDDDD; } #tanggapi input (type = text): fokus, input (type = email): fokus, input (type = url): fokus, textarea: fokus {box-shadow: 0 0 5px rgba (81) , 203, 238, 1); margin: 5px 1px 3px 0px; perbatasan: rpxba 2px (81, 203, 238, 1); }

Inilah tampilan kami di tema WordPress Twenty Sixteen setelah perubahan:

Dengan kelas-kelas ini, Anda dapat mengubah perilaku bagaimana teks ditampilkan di kotak input. Kami akan melanjutkan dan mengubah gaya teks untuk bidang nama dan bidang penulis.

# Penulis, #email {font-family: “Open Sans”, “Droid Sans”, Arial; font-style: miring; warna: #1d1d1d; spasi huruf: .1em; } #url {warna: #1d1d1d; keluarga font: “Konsol Luicida”, “Kurir Baru”, “Kurir”, monospace; }

Jika Anda perhatikan baik-baik tangkapan layar di bawah ini, nama dan sumber bidang email akan berbeda dengan URL situs web.

Anda juga dapat mengubah gaya tombol kirim di formulir komentar WordPress. Alih-alih menggunakan tombol kirim standar, berikan beberapa bayangan dan gradien kisi CSS3.

#submit {background: -moz-linear-gradient (atas, #44c767 5%, #5cbf2a 100%); background: -webkit-linear-gradient (atas, #44c767 5%, #5cbf2a 100%); background: -o-linear-gradient (atas, #44c767 5%, #5cbf2a 100%); background: -ms-linear-gradient (atas, #44c767 5%, #5cbf2a 100%); latar belakang: gradien linier (ke bawah, #44c767 5%, #5cbf2a 100%); background-color: #44c767; moz-border-radius: 28px; -webkit- border-radius: 28px; border-radius: 28px; batas: 1px solid #18ab29; tampilan: blok-sebaris; penunjuk: penunjuk; warna: #ffffff; font-family: Arial; ukuran font: 17px; padding: 16px 31px; dekorasi teks: tidak ada; teks-bayangan: 0px 1px 0px #2f6627; } #submit:hover {background: -webkit-gradient (linier, kiri atas, kiri bawah, stop color (00.05, #5cbf2a), stop color (1, #44c767)); background: -moz-linear-gradient (atas, #5cbf2a 5%, #44c767 100%); background: -webkit-linear-gradient (atas, #5cbf2a 5%, #44c767 100%); background: -o-linear-gradient (atas, #5cbf2a 5%, #44c767 100%); background: -ms-linear-gradient (atas, #5cbf2a 5%, #44c767 100%); latar belakang: gradien linier (ke bawah, #5cbf2a 5%, #44c767 100%); warna latar: # 5cbf2a; } #kirim: aktif {posisi: relatif; atas: 1px; }

Ambil formulir komentar WordPress ke level selanjutnya

Anda mungkin berpikir itu terlalu mendasar. Kita harus mulai dari sana agar orang bisa mengikuti kita.

Anda dapat meningkatkan formulir komentar WordPress Anda dengan mengatur ulang bidang formulir, menambahkan info masuk sosial, langganan komentar, panduan komentar, tag cepat, dan lainnya.

Tambahkan Login Sosial ke Komentar WordPress

Mari kita mulai dengan menambahkan login sosial ke komentar WordPress.

Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin login sosial WordPress. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah aktivasi, Anda harus mengakses Pengaturan » Login Sosial WP untuk mengkonfigurasi pengaturan plugin.

Plugin akan memerlukan kunci API untuk terhubung ke platform sosial. Anda akan melihat tautan ke petunjuk tentang cara mendapatkan informasi untuk setiap platform.

Setelah Anda memasukkan kunci API, klik tombol Simpan Pengaturan untuk menyimpan perubahan Anda.

Anda sekarang dapat mengunjungi situs web mereka untuk melihat tombol login sosial di atas formulir komentar mereka.

Kami mencintai semua pengguna kami dan kami sangat menghargai bahwa kami meluangkan waktu untuk memberikan komentar di situs kami. Namun, untuk menciptakan lingkungan diskusi yang sehat, penting untuk memoderasi komentar.

Untuk transparansi lengkap, kami telah membuat halaman kebijakan komentar, tetapi Anda tidak dapat meletakkan tautan ini di footer.

Kami ingin kebijakan komentar kami menonjol dan terlihat oleh semua pengguna yang meninggalkan komentar. Itu sebabnya kami memutuskan untuk menambahkan kebijakan komentar ke formulir komentar WordPress kami.

Jika Anda ingin menambahkan halaman kebijakan komentar, hal pertama yang harus Anda lakukan adalah membuat halaman WordPress dan menentukan kebijakan komentar Anda (Anda dapat mencuri halaman kami dan mengubahnya sesuai kebutuhan).

Anda kemudian dapat menambahkan kode berikut ke file feature.php tema atau plugin khusus situs Anda.

function wpbeginner_comment_before($arg) {$arg(‘comment_notes_before’) = “”; return $arg; } add_filter (‘comment_form_defaults’, ‘wpbeginner_comment version_before’);

Kode di atas akan menggantikan form komentar standar sebelum catatan tertulis ini. Kami juga menambahkan kelas CSS ke kode, sehingga kami dapat menyorot peringatan dengan CSS. Berikut adalah contoh CSS yang kami gunakan:

p.comment-policy {border: 1px solid #ffd499; warna latar belakang: # fff4e5; border-radius: 5px; padding: 10px; margin: 10px 0px 10px 0px; ukuran huruf: kecil; jenis huruf: miring; }

Inilah tampilannya di halaman pengujian kami:

Untuk melihat tautan untuk area teks komentar, gunakan kode berikut.

function wpbeginner_comment_after($arg) {$arg(‘comment_notes_after’) = “”; return $arg; } add_filter (‘comment_form_defaults’, ‘wpbeginner_comment_after’);

Jangan lupa untuk mengubah URL yang sesuai, jadi kunjungi halaman kebijakan komentar Anda, bukan example.com

Secara default, formulir komentar WordPress pertama-tama menampilkan area teks komentar dan kemudian bidang nama, email, dan situs web. Perubahan ini diperkenalkan di WordPress 4.4.

Sebelumnya, situs WordPress terlebih dahulu menampilkan bidang nama, email, dan situs, lalu bidang teks komentar. Kami merasa bahwa pengguna kami terbiasa melihat formulir komentar dalam urutan itu, jadi kami masih menggunakan urutan jadul di WPBeginner.

Jika mau, yang perlu Anda lakukan hanyalah menambahkan kode berikut ke file feature.php tema Anda atau plugin khusus situs.

function wpb_move_comment_field_to_bottom($field) {$comment_field = $field(‘comment’); tidak disetel ($bidang(‘komentar’)); $bidang(‘komentar’) = $bidang_komentar; kembalikan $bidang; } add_filter(‘comment_form_fields’, ‘wpb_move_comment_field_to_bottom’);

Kode ini hanya memindahkan bidang di area teks komentar ke bawah.

Hapus bidang Situs (URL) dari formulir komentar WordPress

Situs dalam bentuk komentar menarik banyak spammer. Menghapusnya tidak akan menghentikan spammer atau mengurangi spam komentar, tetapi pasti akan mencegah Anda menyetujui komentar secara tidak sengaja dengan tautan ke situs web penulis yang salah.

Itu juga akan mengecilkan bidang dari formulir komentar, membuatnya lebih mudah dan lebih ramah pengguna. Untuk informasi lebih lanjut tentang topik ini, lihat artikel kami tentang menghapus bidang URL situs web dari formulir komentar WordPress

Untuk menghapus bidang URL dari formulir komentar, cukup tambahkan kode berikut ke file feature.php atau plugin khusus situs.

function wpbeginner_remove_comment_url($arg) {$arg(‘url’) = ”; return $arg; } add_filter (‘comment_form_default_fields’, ‘wpbeginner_remove_comment_url’);

Saat pengguna meninggalkan komentar di situs Anda, mereka mungkin ingin mengikuti utas tersebut untuk melihat apakah seseorang telah menanggapi komentar Anda. Menambahkan langganan ke kotak centang komentar memungkinkan pengguna menerima pemberitahuan instan setiap kali komentar baru muncul di sebuah kiriman.

Untuk menambahkan kotak centang ini, hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Reload Comments Subscription. Setelah aktivasi, Anda harus mengunjungi Pengaturan »Berlangganan Komentar untuk mengonfigurasi pengaturan plugin.

Untuk petunjuk langkah demi langkah yang mendetail, lihat artikel kami tentang cara mengizinkan pengguna berlangganan komentar di WordPress.

Tag cepat adalah tombol pemformatan yang memungkinkan pengguna mendesain komentar mereka dengan mudah. Ini termasuk tombol untuk mengetahui, memiringkan, menambahkan tautan atau kutipan ke blokir.

Untuk menambahkan tag cepat, Anda perlu menginstal dan mengaktifkan plugin komentar dasar. Untuk informasi lebih lanjut, lihat artikel kami tentang cara mudah menambahkan tag cepat ke formulir komentar WordPress.

Jadi formulir komentar Anda akan terlihat seperti setelah Anda menambahkan tag cepat.

Kami harap artikel ini membantu Anda mempelajari cara mendesain formulir komentar WordPress agar lebih menyenangkan bagi pengguna Anda. Anda juga dapat melihat tip kami untuk mendapatkan lebih banyak komentar di posting blog WordPress Anda.

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.