Komentar memainkan peran penting dalam membangun komunitas di internet. Komentar menyediakan platform untuk interaksi bagi pembaca Anda di mana mereka dapat membagikan pemikiran mereka yang seringkali membuat mereka kembali.

Ada beberapa cara untuk mendorong pengguna memberi komentar di blog Anda. Salah satunya adalah dengan membuat formulir komentar yang indah, dapat digunakan, dan dapat diakses.

Dalam tutorial ini, kami akan menunjukkan cara memberi gaya pada formulir komentar WordPress default, kami juga akan menunjukkan kepada Anda cara menambahkan fungsionalitas komentar melalui ID media sosial dan cara membuat fungsionalitas berlangganan komentar dan banyak lagi. lebih.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Bagaimana mengubah gaya komentar WordPress

Ketika kita berbicara tentang gaya, yang kita maksud adalah Sisi CSS hal itu. Di bawah ini, saya akan menunjukkan kepada Anda bagaimana menyesuaikan tampilan formulir komentar di WordPress. Setiap elemen secara default di WordPress memiliki kode CSS, ini adalah kasus daftar komentar, menu navigasi, formulir komentar, widget dan banyak lagi.

Di antara file Tema WordPress, kami memiliki file bernama comments.php yang digunakan untuk menampilkan komentar dan formulir komentar pada posting dan halaman blog. Untuk menampilkan formulir komentar WordPress, " comment_form () Digunakan.

Temukan Bagaimana menemukan link ke halaman login WordPress

Secara default, fungsi ini menghasilkan formulir komentar Anda dengan tiga bidang teks (nama, email dan situs web), kotak teks besar, untuk konten komentar dan tombol kirim.

Anda dapat dengan mudah mengubah setiap elemen ini hanya dengan memanipulasi kelas dan pengenal CSS default. Berikut adalah daftar kelas CSS default yang ditambahkan WordPress pada setiap formulir komentar.

#respond {#} balasan-title {#} membatalkan-bagaimana-balasan-link {} {} #commentform #author #email {} {} {} #URL #comment #submit .comment Catatan {} {} .required .how-bentuk-penulis {} .comment-form-email} {.how-bentuk-url} {.how-bentuk-bagaimana {} .form-diperbolehkan-tag {} .form kirimkan

Dengan hanya menyesuaikan kelas CSS ini, Anda dapat sepenuhnya mengubah tampilan formulir komentar. Mari kita coba mengubah sesuatu untuk memberi Anda gambaran tentang apa yang bisa kami lakukan.

Temukan Bagaimana cara mengganti tautan gambar setelah menginstal SSL di WordPress

Pertama, kita akan mulai dengan menyorot bidang aktif formulir. Dengan menyorot bidang aktif, pengguna akan dapat dengan mudah melihat apa yang mereka ubah dan ini memberikan sedikit sisi dinamis ke situs web Anda.

#respond {background: #ececec; padding: 0 5 0px 5px; } / * Menyoroti bidang teks aktif * / #respond input [type = text] textarea {-webkit-transition: semua 0.30s kemudahan-in-out; -moz-transisi: semua 0.30s kemudahan-in-out; -MS-transisi: semua 0.30s kemudahan-in-out; -o-transisi: semua 0.30s kemudahan-in-out; garis besar: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: padat 1px #dddddd; } #respond input [type = text]: fokus, textarea: fokus {box-shadow: 0 0 5px RGBA (81, 203, 238, 1); margin: 5px 1px 3px 0px; border: padat 1px RGBA (81, 203, 238, 1); }

Seperti inilah bentuk komentar Anda dengan Twenty Twelve.

Dengan penggunaan kelas-kelas ini, Anda dapat mengubah cara teks muncul di dalam bidang. Inilah yang akan kita lakukan pada contoh berikut.

#author {font-family: Lobster "Lobster 1.4", "Droid Sans", Arial; font-size: 16px; Warna: #1d1d1d; letter-spacing: .1em; #URL} {color: #21759b; font-family: "Luicida Console", "Courier New", "Courier", minivan; } 

Ini adalah hasil yang akan dihasilkan oleh kode sebelumnya.

Anda juga dapat mengubah gaya tombol formulir komentar. Pada contoh berikut, kami akan memberinya latar belakang gradien.

#submit {font-family: Arial; Warna: #ffffff; font-size: 20px; padding: 10px; text-decoration: none; box-shadow: 0px 1px 3px #666666; -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; background: -webkit-gradien (linear, 0 0, 0 100%, dari (#006ad4) ke (#003366)); background: -moz-linear-gradient (top, #006ad4, #003366); } #submit: hover {background: -webkit-gradien (linear, 0 0, 0 100%, dari (#003366) ke (#006ad4)); background: -moz-linear-gradient (top, #003366, #006ad4)}

Inilah hasil yang akan ditampilkan.

Bagaimana menambahkan interaksi sosial di komentar

Mari mulai dengan menambahkan login sosial ke formulir komentar WordPress. Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin sosial Login

Temukan Cara menginstal plugin di WordPress Untuk mengaktifkan plugin ini, Anda harus membuat akun gratis dengan masuk ke alamat berikut: https://app.oneall.com

Setelah selesai, Anda tidak perlu mengonfigurasi API untuk setiap jaringan yang ingin Anda gunakan agar pengguna Anda dapat terhubung melaluinya.

Meskipun API dari berbagai jejaring sosial terus berubah, Anda tidak perlu melakukan apa pun, pengembang plugin ini akan memperbarui API mereka untuk Anda. Yang perlu Anda lakukan hanyalah masuk ke OneAll API.

Beginilah tampilan formulir Anda.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Pencarian Instan WP & Saran Otomatis

Plugin "WP Instant Search & Auto Suggest" memungkinkan Anda mendapatkan saran untuk artikel, halaman, dan jenis posting kustom secara instan saat mencari blog WordPress Anda. Ini bekerja dengan WPBakery et Landasan.

Fitur-fiturnya meliputi: rcari dalam mode layar penuh, rPencarian instan untuk jenis publikasi khusus, kompatibilitas dengan Visual Composer, Ttiga gaya desain terintegrasi, skema warna 5 untuk dipilih, haldukungan keyboard dan mouse, esepenuhnya dapat disesuaikan melalui parameter dll ...

Download | Demo | Hébergement Web

2. Halaman Kesalahan 404 Redirect ke Homepage atau Halaman Kustom

Berikut adalah salah satu cara terbaik untuk menambahkan halaman kesalahan 404 dengan mudah yang akan mengarahkan pengunjung ke beranda atau halaman khusus, setelah mengaktifkan ini WordPress Plugin.

Semua halaman kesalahan 404 akan dialihkan ke beranda atau URL khusus. Dengan menggunakan ini WordPress Plugin, Anda akan mengizinkan Google untuk mengurangi pagerank situs web Anda jika memiliki banyak halaman error 404.

Ce WordPress Plugin tidak sekedar melakukan redirection tetapi juga bisa menjadi solusi yang cocok untuk meningkatkan peringkat website Anda di hasil mesin pencari.

Download | Demo | Hébergement Web

3. Posting terkait Pro 

Related Posts Pro memberikan solusi sederhana namun kuat untuk semua jenis konten serupa di WordPress. Ini mendukung jenis posting kustom, multisite, kategori, konten campuran, konten kustom, dan banyak lagi ...

Seperti fitur yang ditawarkannya antara lain: 3 berbagai jenis tata letak, 65 templat yang telah ditentukan untuk setiap tata letak, atidak perlu coding, dukungan tpenjelajahan dan Putar otomatis, kompatibilitas dengan jenis posting kustom yang digunakan oleh plugin WooCommerce, WP eCommerce, bbPress dll ..., a bilah pencarian dengan filter, a ddokumentasi yang sangat deskriptif dan banyak lagi.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

• Bagaimana menampilkan deskripsi kategori di WordPress
• Cara mengoptimalkan file WordPress Robots.txt Anda untuk SEO yang sempurna
• Cara membuat Marketplace dengan WordPress
• Cara menambahkan widget ke header blog WordPress Anda

Kesimpulan

Sini! Itu saja untuk tutorial ini. Kami harap artikel ini membantu Anda membuat formulir umpan balik Anda lebih menarik. Jangan ragu juga untuk memberi kami tip Anda tentang menyesuaikan WordPress, dan khususnya bagikan artikel ini dengan teman-teman Anda di jejaring sosial favorit Anda. 

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.

...