Cara Menata Formulir Komentar WordPress (Panduan Utama)
Catatan: Dalam topik berikutnya yang akan Anda baca, Anda akan mempelajari tentang: Cara Menata 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 situs web Anda. Setiap tema WordPress hadir dengan file yang berbeda, termasuk file template, file fungsi, JavaScripts, dan style sheet.
Lembar gaya berisi aturan CSS untuk semua elemen yang digunakan oleh tema WordPress Anda. Anda dapat menambahkan CSS khusus Anda sendiri untuk mengganti aturan gaya tema Anda.
Jika Anda belum pernah melakukan ini sebelumnya, lihat artikel kami tentang cara menambahkan CSS khusus di WordPress untuk pemula.
Selain CSS, Anda mungkin memerlukan beberapa fungsi tambahan untuk mengubah tampilan dan nuansa default formulir komentar WordPress Anda. Jika Anda belum pernah melakukan ini sebelumnya, lihat artikel kami tentang cara menyalin dan menempelkan kode di 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 dengan Kelas CSS Default
- Tambahkan Login Sosial ke Formulir Komentar WordPress
- Tambahkan teks kebijakan komentar di formulir komentar WordPress
- Pindahkan bidang teks komentar ke bawah
- Hapus bidang situs (URL) dari formulir komentar WordPress
- Tambahkan kotak centang Berlangganan ke Komentar di WordPress
- Tambahkan tag cepat di komentar WordPress
Di sebagian besar tema WordPress ada template yang disebut Comments.php. File ini digunakan untuk menampilkan komentar dan formulir komentar pada posting blog Anda. Formulir komentar WordPress dibuat menggunakan fungsi :.
Secara default, fungsi ini membuat formulir komentar Anda dengan tiga bidang teks (Nama, Email, dan Situs Web), bidang area teks untuk teks komentar, kotak centang untuk kepatuhan RGPD, dan tombol Kirim.
Anda dapat dengan mudah memodifikasi setiap bidang ini hanya dengan menyesuaikan kelas CSS default. Di bawah ini adalah daftar kelas CSS default 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
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 akan mulai dengan menyorot bidang formulir yang aktif. Dengan menyorot bidang yang sedang aktif, formulir Anda lebih mudah diakses oleh orang-orang berkebutuhan khusus, dan juga membuat 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 tampilan formulir kami di tema WordPress Twenty Sixteen setelah perubahan:
Dengan kelas-kelas ini, Anda dapat mengubah perilaku bagaimana teks muncul di kotak input. Kami akan melanjutkan dan mengubah gaya teks bidang nama penulis dan 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 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 formulir komentar WordPress. Alih-alih menggunakan tombol kirim default, berikan beberapa bayangan dan gradien kotak CSS3.
#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;
}
Bawa formulir komentar WordPress ke level berikutnya
Mungkin menurut Anda itu terlalu mendasar. Nah, 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 detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.
Setelah aktivasi, Anda harus mengakses Pengaturan » Login Sosial WP halaman untuk mengonfigurasi pengaturan plugin.
Plugin akan memerlukan kunci API untuk terhubung ke platform sosial. Anda akan melihat tautan ke petunjuk tentang cara mendapatkan informasi ini untuk setiap platform.
Setelah 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 meluangkan waktu untuk berkomentar 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 di 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 memodifikasinya sesuai kebutuhan Anda). permintaan Anda).
Anda kemudian dapat menambahkan kode berikut ke file theme.php atau plugin khusus situs Anda.
function wpbeginner_comment_text_before($arg) {
$arg('comment_notes_before') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Kode di atas akan menggantikan template komentar default sebelum mencatat teks 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;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}
Inilah tampilannya di situs pengujian kami:
Jika Anda ingin menampilkan tautan setelah 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, jadi kunjungi halaman kebijakan komentar Anda, bukan example.com 
Secara default, formulir komentar WordPress menampilkan area teks komentar terlebih dahulu, kemudian kolom nama, email, dan situs. Perubahan ini diperkenalkan di WordPress 4.4.
Sebelumnya, situs WordPress terlebih dahulu menampilkan nama bidang, email, dan bidang situs, lalu kotak teks komentar. Kami merasa pengguna kami terbiasa melihat formulir komentar dalam urutan itu, jadi kami masih menggunakan urutan bidang lama di WPBeginner.
Jika mau, yang perlu Anda lakukan hanyalah menambahkan kode berikut ke file .php tema Anda atau 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 di area teks komentar ke bawah.
Hapus bidang Situs (URL) dari formulir komentar WordPress
Bidang situs dalam formulir komentar menarik banyak spammer. Meskipun menghapusnya tidak akan menghentikan spammer atau mengurangi spam komentar, ini pasti akan mencegah Anda secara tidak sengaja menyetujui komentar yang tertaut 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 cara menghapus bidang URL situs dari formulir komentar WordPress.
Untuk menghapus bidang URL dari formulir komentar, cukup tambahkan kode berikut ke file .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');
Saat pengguna meninggalkan komentar di situs Anda, mereka mungkin ingin mengikuti utas tersebut untuk melihat apakah seseorang telah menanggapi komentar Anda. Tambahkan kotak centang berlangganan komentar yang memungkinkan pengguna menerima pemberitahuan instan setiap kali komentar baru muncul di sebuah pos.
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 menebalkan, memiringkan, menambahkan tautan atau memblokir kutipan.
Untuk menambahkan tag cepat, Anda perlu menginstal dan mengaktifkan plugin Tag Cepat Komentar Dasar. Untuk detailnya, lihat artikel kami tentang cara mudah menambahkan tag cepat di formulir komentar WordPress.
Seperti inilah bentuk komentar Anda setelah 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 y Facebook.
