Detail kecil sering kali memisahkan situs web yang bagus dari yang bagus, dan halaman login adalah salah satu detail kecil yang sering diabaikan. Menyesuaikan pengalaman login dapat membuat situs Anda terlihat lebih profesional. Ini juga membantu pengguna merasa lebih nyaman dan selaras dengan identitas merek Anda.
Panduan ini mencakup beberapa cara untuk mempersonalisasikan pengalaman login bagi pengguna Anda.
Mengapa Anda mungkin menginginkan halaman login WordPress khusus
Menyesuaikan halaman login WordPress Anda menawarkan manfaat yang signifikan untuk fungsionalitas dan branding. Tidak setiap situs web WordPress membutuhkan halaman atau formulir login khusus. Halaman login WordPress default bekerja dengan baik jika Anda satu -satunya orang yang masuk ke situs Anda, karena tidak ada orang lain yang melihatnya. Tetapi pengalaman login yang disesuaikan sangat ideal untuk:
- Situs web keanggotaan
- Situs web e-commerce
- Kursus online dan platform e-learning
- Forum atau komunitas
- Papan pekerjaan
- Direktori
Jika situs web Anda memiliki pendaftaran pengguna dan login, Anda dan pengguna Anda akan mendapat manfaat dari pengalaman yang disesuaikan.
Halaman login WordPress default secara jelas menampilkan logo dan branding WordPress. Meskipun fungsional, rasanya generik dan tidak beresonansi dengan merek Anda. Bahkan, pengguna Anda bahkan mungkin tidak tahu apa itu WordPress. Halaman login khusus dengan logo, warna, dan font Anda cocok dengan merek Anda, menciptakan pengalaman pengguna yang lebih konsisten.
Anda dapat meningkatkan halaman login tidak hanya dengan visual, tetapi juga dengan menambahkan detail atau sumber daya tambahan jika diperlukan. Ini mungkin termasuk instruksi atau tautan yang bermanfaat.
Sekarang, mari kita lihat tiga cara Anda dapat menyesuaikan halaman login WordPress Anda.
1. Gunakan plugin untuk menyesuaikan halaman login WordPress default
Cara termudah untuk menyesuaikan pengalaman login adalah dengan menggunakan plugin WordPress yang dibuat untuk tujuan ini. Kami akan menjelajahi dua plugin yang menawarkan beberapa cara untuk menyesuaikan halaman login WordPress default.
Anda tidak perlu membuat halaman baru. Sebaliknya, plugin ini hanya menyesuaikan atau mengubah halaman login default.
Dengan bantuan plugin, Anda dapat:
- Ganti logo WordPress default dengan milik Anda.
- Ubah latar belakang dengan warna khusus atau gambar.
- Bentuk gaya, tombol, dan warna teks agar sesuai dengan branding Anda.
- Menyesuaikan pesan kesalahan atau tautan “Kata Sandi Hilang”.
Berikut ini lebih dekat pada dua plugin populer:
Penyesuaikan Halaman Login Kustom
Plugin Customizer Halaman Login Kustom gratis memungkinkan Anda dengan mudah mengedit halaman login Anda. Anda dapat melihat perubahan secara real time menggunakan WordPress Customizer. Jika Anda telah menggunakan penyesuaian untuk mengedit pengaturan tema, proses ini sangat mirip.
Setelah Anda menginstal dan mengaktifkan plugin, “Login Customizer” akan muncul di opsi WordPress Customizer.
Plugin menyediakan opsi berikut:
- Template: Pilih dari tiga templat yang telah dirancang sebelumnya (satu adalah halaman login WordPress default).
- Latar belakang: Atur warna latar belakang atau gambar Anda.
- Logo: Nonaktifkan logo atau unggah sendiri. Anda juga dapat menyesuaikan ketinggian, lebar, bantalan, URL yang dihubungkan dengan logo, dan judul halaman login.
- Membentuk: Atur warna latar belakang formulir atau gambar. Anda juga dapat mengatur tinggi, lebar, bantalan, jari -jari, bayangan kotak, dan penyebaran bayangan.
- Bidang: Ubah lebar, ukuran font, lebar perbatasan, warna perbatasan, jari -jari, bayangan kotak, margin, padding, warna latar belakang, warna teks, warna label, dan ukuran font label.
- Tombol: Atur warna, warnanya warna, ukuran, ukuran font, warna teks, bantalan, lebar perbatasan, warna perbatasan, bayangan kotak, penyebaran bayangan, dan bayangan teks.
- Lainnya: Nonaktifkan tautan kata sandi yang hilang, nonaktifkan tautan kebijakan privasi, nonaktifkan tautan kembali ke situs web, ubah ukuran font, warna teks, atau warna teks pada hover.
- CSS Kustom & JavaScript: Tambahkan kode khusus Anda sendiri.
Di bawah ini, Anda akan melihat tangkapan layar dari formulir login sampel yang saya disesuaikan dengan plugin.
Loginpress
LoginPress adalah plugin populer lainnya untuk menyesuaikan halaman login WordPress. Plugin ini menawarkan versi gratis dan paket berbayar opsional untuk fungsionalitas canggih.
Menggunakan versi gratis LoginPress sangat mirip dengan plugin kustomer halaman login khusus. Sekali lagi, Anda akan menggunakan WordPress Customizer, dan Anda dapat melihat perubahan saat Anda menyesuaikan pengaturan.
Saat plugin diinstal dan diaktifkan, Anda akan melihat opsi “LoginPress” di Customizer.
Plugin menyediakan opsi berikut:
- Tema: Pilih dari dua tema yang telah dirancang sebelumnya (default atau minimalis). Plugin premium mencakup 17 tema tambahan yang dibuat untuk jenis situs web tertentu.
- Logo: Nonaktifkan logo atau unggah sendiri. Sesuaikan ketinggian, lebar, ruang, URL yang dihubungkan logo, judul logo, judul halaman login, dan halaman login Favicon.
- Latar belakang: Atur warna latar belakang Anda, pilih gambar latar belakang dari galeri latar belakang, unggah gambar latar belakang Anda sendiri, atur gambar yang berbeda untuk latar belakang pada perangkat seluler, atur latar belakang untuk mengulangi, mengatur posisi dan ukuran latar belakang, mengaktifkan video latar belakang, dan memilih video latar belakang.
- Kustomisasi formulir login: Aktifkan transparansi, atur warna latar belakang formulir atau gambar. Anda juga dapat mengatur tinggi, lebar, bantalan, jari -jari, bayangan, opacity bayangan, batas, warna label bidang input, ukuran label bidang input, dan ingat ukuran font saya.
- Kustomisasi Formulir Lupa: Atur warna latar belakang atau gambar.
- Tombol: Atur warna, warna perbatasan, warna hover, bayangan kotak, warna teks, warna teks pada hover, ukuran, ukuran font, bantalan, jari -jari, bayangan, opacity bayangan, dan ukuran teks.
- Pesan Kesalahan: Kustomisasi pesan untuk nama pengguna yang salah, kata sandi yang salah, nama pengguna kosong, kata sandi kosong, email tidak valid, email kosong, nama pengguna sudah ada, email sudah ada, lupa kata sandi, login dengan email, dan kata sandi tidak cocok.
- Pesan Selamat Datang: Kustomisasi Pesan Selamat Datang di Kata Sandi Hilang, Pesan Selamat Datang di Halaman Login, Pesan Selamat Datang pada Pendaftaran, dan Pesan Logout.
- Bentuk footer: Aktifkan atau nonaktifkan teks footer, atur teks kata sandi yang hilang, pilih dekorasi teks, warna teks, warna hover teks, ukuran font, warna latar belakang, mengaktifkan atau menonaktifkan kembali ke teks situs, dan mengaktifkan catatan hak cipta.
- CSS Kustom/JS: Tambahkan kode khusus Anda sendiri.
Tangkapan layar di bawah ini menunjukkan formulir login yang saya disesuaikan dengan LoginPress.
Plugin LoginPress Premium menawarkan fitur tambahan seperti tema yang telah dirancang sebelumnya, Google Fonts, Recaptcha, Login Sosial, Batas Upaya Login, Pengalihan Login, Login Otomatis, Login Widget, dan Sembunyikan atau Ganti Nama Halaman Login. Harga mulai dari $ 99/tahun.
2. Tambahkan formulir login ke halaman apa pun
Plugin di atas memungkinkan Anda mengubah tampilan halaman login WordPress. Tetapi bagaimana jika Anda ingin menambahkan lebih banyak teks dan elemen? Atau mungkin Anda ingin menempatkan formulir login di halaman yang berbeda? Dalam hal ini, pembangun halaman Elementor Pro adalah solusi yang ideal.
Elementor Pro menyertakan widget login yang dapat Anda gunakan saat menyesuaikan halaman dengan pembuat drag-and-drop. Widget login ini bukan Termasuk dalam versi Gratis Elementor, jadi Anda akan memerlukan paket berbayar (harga mulai dari $ 4,99/bulan) untuk fitur ini.
Dengan menggunakan Elementor, Anda akan mendapatkan kontrol penuh atas halaman. Anda bahkan dapat menambahkan formulir login ke halaman yang ada.
Cara Menambahkan Formulir Login dengan Elementor Pro:
- Instal Elementor Pro jika Anda belum melakukannya.
- Buka halaman tempat Anda ingin menambahkan formulir login di Elementor.
- Seret widget login ke tempat yang Anda inginkan di halaman.
- Kustomisasi bidang bentuk, gaya, dan warna.
- Atur opsi pengalihan untuk setelah login (misalnya, redirect pengguna ke halaman dasbor atau sambutan).
3. Edit file functions.php
Pengguna dan pengembang tingkat lanjut juga dapat mengedit file functions.php di WordPress. Ini membutuhkan pengetahuan pengkodean. Kesalahan dalam file functions.php dapat merusak situs web Anda, jadi pintar untuk membuat perubahan dalam lingkungan pengujian terlebih dahulu. Dengan cara ini, Anda tidak akan mempengaruhi situs langsung.
Pengembang mungkin lebih suka opsi ini karena tidak memerlukan plugin. Ini juga memberikan lebih banyak kontrol.
WordPress Codex memberikan instruksi terperinci untuk menyesuaikan halaman login melalui file functions.php dan CSS.
Praktik terbaik
Apakah Anda menggunakan plugin atau pengkodean manual, ingatlah praktik terbaik ini:
- Branding yang konsisten: Pastikan halaman login mencerminkan desain keseluruhan situs web Anda.
- Hindari kekacauan: Tetap berpegang pada desain yang bersih untuk memastikan pengguna tidak terganggu.
- Tetap fungsional: Jangan kompromi kegunaan untuk estetika. Desain minimal sering kali bekerja paling baik.
- Tes lintas perangkat: Pastikan halaman Anda responsif sehingga berfungsi di desktop dan seluler.
Pertanyaan yang sering diajukan
Dapatkah saya menyesuaikan halaman login WordPress tanpa plugin?
Ya, Anda dapat menyesuaikannya dengan menambahkan kode ke file functions.php tema Anda. Tetapi ini membutuhkan pengetahuan pengkodean. Plugin lebih mudah dan lebih aman bagi sebagian besar pengguna.
Bisakah saya mengembalikan halaman login default jika terjadi kesalahan?
Ya. Nonaktifkan atau hapus instalan plugin yang Anda gunakan, atau hapus kode khusus yang telah Anda tambahkan.
Akankah halaman login khusus memperlambat situs saya?
Plugin yang disebutkan dalam artikel ini harus memiliki dampak minimal pada kinerja situs Anda.
Akankah halaman login khusus berfungsi dengan plugin otentikasi dua faktor?
Ya, sebagian besar halaman login khusus kompatibel dengan plugin 2FA yang populer.
Bagaimana cara mengubah URL halaman login untuk alasan keamanan?
Fitur ini termasuk dalam versi premium LoginPress. Login Sembunyikan WPS adalah plugin gratis dengan fungsi ini.
