Membangun Formulir Login WordPress Kustom dengan Flat UI

Terakhir diperbarui - 8 Juli 2021

WordPress telah ada untuk waktu yang cukup lama. Apa yang dimulai sebagai portal untuk blogger, kini telah menjadi sistem manajemen konten yang bertanggung jawab untuk mengoperasikan hampir setengah dari total situs web dunia. Antarmukanya yang sederhana namun intuitif, dan desain yang dapat disesuaikan telah menjadikannya pilihan nomor satu bagi pengembang dan perancang web di seluruh dunia yang ingin membangun situs web mereka dari awal.

Siapa pun yang menggunakan WordPress memperhatikan detail dan orisinalitas untuk meningkatkan pengalaman pengguna dan meningkatkan rasio klik-tayang mereka. Sebagian besar pengembang hanya berfokus pada tema saja, tetapi untuk situs keanggotaan dan platform lainnya, titik awalnya adalah halaman login. Bayangkan ini, jika Anda adalah anggota yang baru terdaftar di sebuah situs web dan masuk ke layar yang mirip dengan anggota yang tidak terdaftar, dampaknya sedikit berkurang dan membuat Anda merasa agak tidak puas. Namun, memiliki halaman login WordPress yang disesuaikan agar sesuai dengan persyaratan dan estetika bisnis Anda meninggalkan kesan yang lebih baik pada pengunjung dan menarik minat mereka.

Untuk membantu dengan ini, kami telah merangkum beberapa panduan sederhana untuk memasukkan gaya Anda untuk halaman login WordPress khusus yang terintegrasi secara visual dengan skema desain situs web Anda.

Membangun Halaman Login WordPress Kustom tanpa Plugin

Seseorang dapat membuat beberapa perubahan pada halaman login WordPress dengan memperbarui kode sumber di file function.php dari tema yang mereka pilih. Meskipun, setelah Anda memperbarui WordPress, perubahan ini akan hilang. Ini karena lembar gaya tema Anda untuk halaman login bukan bagian dari pengaturan tema WordPress, yang mengharuskan Anda membuat lembar gaya lain untuk halaman login kustom.

Mulailah dengan membuat folder bernama "Login" di folder tema Anda dan tambahkan file .txt dengan nama sebagai custom-login-style.css . Dari sana, Anda dapat melanjutkan untuk membuat beberapa modifikasi dasar untuk menyesuaikan dan menambahkan keunikan ke halaman login.

Ubah Latar Belakang

Untuk memperbarui warna latar belakang halaman atau tombol tertentu, Anda akan memilih warna latar: #222222 dan mengubah kode heksa menjadi warna pilihan Anda. Gunakan bantuan palet warna untuk memilih warna yang melengkapi estetika bisnis Anda dan menarik secara visual.

Selain itu, jika Anda ingin memvariasikan gambar latar belakang halaman login Anda, pilih baris kode background-image: url(logo_login.png') dan ganti logo_login.png , yang merupakan nama file dengan URL file gambar yang diperbarui .

Bisnis yang ingin klien mereka mengingat merek mereka dapat mengubah logo WordPress menjadi logo kustom mereka. Setelah menyimpan file gambar logo kustom ke folder Login Anda, ganti nama file dengan logo kustom Anda di kode background-image: url('logo_login') .

Menyesuaikan formulir Login dengan menyesuaikan padding dan margin

Pengembang dapat menyesuaikan formulir Masuk untuk membuat halaman mereka menarik dan sesuai dengan tampilan situs mereka. Dari padding tombol hingga warna dan ukuran font label, dll. Anda dapat menambahkan lebih banyak ruang di dalam tombol sehingga teks tidak tampak terjepit dengan meningkatkan padding; cukup tambahkan angka pada padding kode: 12px 12px 12px 12px. Jika Anda ingin membuat lebih banyak ruang di luar tombol sehingga elemen di sekitarnya tidak terlalu padat, Anda dapat melakukannya dengan meningkatkan ruang margin di margin kode: 12px 12px 12px 12px. Bahkan sesuatu yang sederhana seperti menambahkan beberapa spasi secara kolektif dapat berdampak pada tampilan akhir halaman login Anda dan membuatnya tampak lebih menyatu.

Mengubah ukuran dan warna font

Anda dapat mengubah ukuran font teks paragraf, tautan, atau bidang formulir menggunakan kode font-size: 15px dengan menyesuaikan jumlah dengan ukuran yang Anda inginkan. Hal yang sama dapat dilakukan untuk warna font dengan memperbarui warna dalam kode warna: #222222 dan mengganti warnanya.

Memodifikasi Pesan Kesalahan Masuk

Dengan meningkatnya kejahatan dunia maya dan penipuan di internet, pengembang web dan pemilik bisnis tidak dapat mengambil risiko di situs web mereka dan kehilangan data rahasia. Ketika pengguna dengan tergesa-gesa memasukkan kredensial login yang salah, pesan kesalahan default dibuat secara otomatis. Meskipun ini untuk memberi sinyal kepada pengguna tentang kesalahan ini, ini bisa menjadi celah bagi peretas untuk mencoba dan memecahkan data login. Jadi, cara terbaik untuk menghindari peretas adalah dengan mengubah pesan kesalahan di file function.php .

Sebagai penutup, mereka yang memiliki pengetahuan luas tentang CSS dapat memiliki kendali penuh atas gaya dan penyesuaian formulir Login WordPress mereka. Tetapi, jika Anda kekurangan keterampilan pengkodean dan itu membatasi kemampuan Anda untuk membuat halaman login khusus, maka jangan khawatir! Ada berbagai opsi plugin yang tersedia untuk Anda di repositori WordPress untuk merampingkan proses pengembangan web WordPress dan kami telah membuat daftar yang paling populer untuk Anda.

Masuk Plugin Penyesuai

Login Customizer adalah salah satu plugin yang paling mudah digunakan dan memungkinkan Anda membuat perubahan langsung dari WordPress Customizer Anda. Setelah proses instalasi sederhana, Anda dapat dengan mudah mengaksesnya dari Dashboard WordPress Anda di tab Appearance . Klik Mulai Menyesuaikan dan itu akan mengarahkan Anda ke layar penyesuai tempat Anda mendesain ulang semua area sesuai keinginan Anda.

Penyesuai Masuk Colorlib

Colorlib Login Customizer adalah alat yang banyak akal dan fleksibel yang membawa semua fungsi yang ditemukan dalam plugin premium tetapi menawarkannya secara gratis. Berbagai fitur uniknya menjadikannya pilihan utama bagi pengembang web yang ingin membangun solusi khusus untuk penggunanya. Ini juga, memungkinkan penyesuaian melalui WordPress Customizer sehingga Anda dapat dengan mudah menavigasi dan merombak halaman login Anda.

Kesimpulan

Pada akhirnya, ada lebih dari satu pendekatan untuk menyesuaikan halaman login dan pengembang dari semua tingkat pengalaman dipersilakan untuk mencobanya. Yang penting adalah halaman login WordPress kustom cocok dan melengkapi estetika situs sebenarnya untuk meningkatkan pengalaman pengguna. Menyesuaikan halaman login situs Anda adalah cara sederhana namun efektif untuk menyenangkan klien dan membangun identitas merek. Memulai dari yang sederhana dan membangun dasar-dasarnya dapat mengubah layar sederhana menjadi sesuatu yang spektakuler dan menawarkan kepada klien pengalaman online yang dipersonalisasi yang belum pernah mereka lihat sebelumnya.