Cara Membuat Custom Login di WordPress

Apakah Anda ingin membuat halaman login WordPress Custom untuk situs Anda?

Jika Anda menjalankan situs keanggotaan WordPress atau toko online, banyak pengguna Anda akan sering melihat halaman login. Menyesuaikan halaman login WordPress default memungkinkan Anda menawarkan pengalaman pengguna yang lebih baik.

Dalam panduan utama ini, saya akan menunjukkan kepada Anda berbagai cara untuk membuat halaman login Custom WordPress. Anda juga dapat menggunakan tutorial ini untuk membuat halaman login WooCommerce Custom.

Cara mudah membuat halaman login WordPress kustom untuk situs Anda

Inilah yang akan Anda pelajari dari panduan ini.

Mengapa Membuat Halaman Custom Login WordPress?

WordPress hadir dengan sistem manajemen pengguna yang kuat. Ini memungkinkan pengguna membuat akun di toko eCommerce, situs web keanggotaan, atau di blog.

Secara default, halaman login menampilkan branding dan logo WordPress. Ini tidak masalah jika Anda menjalankan blog kecil, atau Anda adalah satu-satunya orang yang memiliki akses admin.

Layar login WordPress default

Namun, jika Website Anda memungkinkan pengguna untuk mendaftar dan masuk, maka laman masuk khusus menawarkan pengalaman pengguna yang lebih baik.

Menggunakan logo dan desain Anda sendiri membuat pengguna merasa seperti di rumah sendiri. Sedangkan mengarahkan mereka ke layar login WordPress default yang tidak terlihat seperti situs Anda mungkin terlihat mencurigakan bagi pengguna Anda.

Terakhir, layar login default tidak berisi apapun kecuali form login. Dengan membuat halaman Custom login, Anda dapat menggunakannya untuk mempromosikan halaman lain atau promosi khusus.

Karena itu, mari kita lihat beberapa contoh desain halaman login WordPress Custom.

Contoh Desain Halaman Login WordPress

Pemilik situs web dapat menyesuaikan halaman login WordPress menggunakan gaya dan teknik yang berbeda.

Beberapa membuat halaman Custom login yang menggunakan tema dan warna situs mereka. Lainnya, ubah halaman login default dengan menambahkan latar belakang Custom, warna, dan logo mereka sendiri.

1. WPForms

WPForms

WPForms adalah plugin formulir kontak WordPress terbaik di pasaran. Secara kebetulan, plugin mereka juga menyertakan add-on untuk membuat login dan formulir pendaftaran WordPress yang cantik, yang akan saya tunjukkan nanti di artikel ini.

Halaman Custom login mereka menggunakan tata letak dua kolom. Kolom kiri berisi form login dan kolom kanan digunakan untuk menyoroti promosi dan ajakan bertindak lainnya. Pada contoh di atas, mereka menggunakan halaman login untuk membagikan laporan tahunan mereka. Ini menggunakan pencitraan merek khusus, ilustrasi latar belakang, dan warna merek untuk menciptakan pengalaman masuk yang unik.

2. Rock My Wedding

Rock My Wedding

Situs web Rock My Wedding menggunakan modal popup untuk menampilkan formulir login dan pendaftaran. Keuntungan menggunakan popup adalah pengguna dapat masuk tanpa meninggalkan halaman. Ini menyimpannya dari pemuatan halaman baru dan menawarkan pengalaman pengguna yang lebih cepat.

3. Jacquelynne Steves

Jacquelynne Steves

Jacquelynne Steeves adalah situs seni dan kerajinan tempat penulis menerbitkan konten tentang mendekorasi rumah, membuat selimut perca, pola, bordir, dan banyak lagi. Halaman login mereka menggunakan gambar latar belakang khusus yang cocok dengan tema situs web mereka dengan formulir login di sebelah kanan.

4. Grafik Gerak Gereja

Grafik Gerak Gereja

Halaman login perusahaan desain grafis bergerak ini menggunakan latar belakang berwarna-warni yang mencerminkan bisnis mereka. Ini menggunakan header situs, footer, dan menu navigasi yang sama di layar login. Form loginnya sendiri cukup sederhana dengan background yang gelap.

5. Tinjauan Manajemen MITSLoan

Tinjauan Manajemen MITSLoan

Website MITSLoan Management Review menggunakan layar login WordPress default. Ini menggunakan CSS khusus dengan logo mereka sendiri untuk menyembunyikan branding WordPress.

Membuat Halaman Custom Login Front-End di WordPress

Ada beberapa plugin WordPress yang dapat Anda gunakan untuk membuat halaman login kustom front-end di WordPress. Saya akan menunjukkan dua plugin berbeda, dan Anda dapat memilih salah satu yang paling sesuai untuk Anda.

Membuat Halaman Login WordPress menggunakan Theme My Login

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Theme My Login . Untuk lebih jelasnya, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress .

Setelah aktivasi, Theme My Login secara otomatis membuat URL untuk Custom login Anda, logout, registrasi, lupa password, dan reset password.

Anda dapat menyesuaikan URL login WordPress ini dengan mengunjungi halaman Tema Login Saya > Umum . Gulir ke bawah ke bagian ‘Siput’ untuk mengubah URL ini yang digunakan oleh plugin untuk tindakan login.

Tema Halaman Login Saya

Theme My Login juga memungkinkan Anda menggunakan shortcode untuk membuat halaman login dan registrasi Custom. Anda cukup membuat halaman untuk setiap tindakan dan kemudian menambahkan slug halaman di sini, sehingga plugin dapat menemukan dan mengarahkan pengguna dengan benar.

Mari kita mulai dengan halaman login.

Buka Halaman > Tambah Baru untuk membuat halaman WordPress baru. Anda perlu memberi judul pada halaman Anda dan kemudian memasukkan kode pendek berikut “[theme-my-login]” di dalam area konten.

Menambahkan kode pendek

Anda sekarang dapat mempublikasikan halaman Anda dan mempratinjaunya untuk melihat halaman Custom login Anda beraksi.

Halaman login WordPress kustom

Ulangi proses untuk membuat halaman lain dengan menggunakan shortcode berikut.

[theme-my-login action = ”register”] untuk formulir pendaftaran.

[theme-my-login action = ”lostpassword”] ​​untuk halaman password yang hilang.

[theme-my-login action = ”resetpass”] gunakan di halaman setel ulang kata sandi.

Membuat Halaman Custom Login WordPress Menggunakan WPForms

WPForms adalah plugin pembuat formulir WordPress terbaik di pasar. Ini memungkinkan Anda dengan mudah membuat formulir login dan pendaftaran khusus untuk website Anda.

WPForms adalah plugin WordPress premium, dan Anda memerlukan setidaknya paket pro mereka untuk mengakses add-on pendaftaran pengguna. 

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin WPForms . Untuk lebih jelasnya, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress .

Setelah aktivasi, Anda perlu mengunjungi WPForms > Halaman Pengaturan untuk memasukkan kunci lisensi Anda. Anda dapat menemukan informasi ini di bawah akun Anda di situs WPForms.

Lisensi WPForms

Setelah memasukkan kunci lisensi, Anda akan dapat menginstal add-on. Silakan dan kunjungi WPForms > halaman Addons dan cari Addon Pendaftaran Pengguna.

Instal addon pendaftaran pengguna

Selanjutnya, klik tombol Install Addon untuk mengunduh dan mengaktifkan addon. Anda sekarang siap untuk membuat form Custom login Anda sendiri.

Pergi ke WPForms > Add New halaman dan gulir ke bawah ke template ‘User Login Form’. Anda perlu mengklik tombol ‘Buat Formulir Login Pengguna’ untuk melanjutkan.

Buat formulir login

WPForms akan memuat Formulir Login Pengguna dengan bidang yang harus diisi. Anda dapat mengklik kolom untuk menambahkan deskripsi atau teks Anda sendiri di sekitarnya.

Pembangun formulir WPForms

Anda juga dapat mengubah pengaturan lain. Misalnya, secara otomatis menambahkan ‘Kirim’ sebagai judul tombol. Anda dapat mengkliknya dan mengubahnya menjadi Login.

Pengaturan formulir

Anda juga dapat memutuskan apa yang terjadi setelah pengguna berhasil login. Buka Pengaturan > tab Konfirmasi dan pilih tindakan.

Alihkan pengguna yang masuk

Anda dapat mengarahkan pengguna ke URL lain, mengarahkan mereka ke beranda, atau cukup menunjukkan pesan bahwa mereka sekarang masuk.

Setelah Anda puas dengan pengaturan formulir, klik tombol Simpan di sudut kanan atas layar dan tutup pembuat formulir.

Menambahkan Form Custom Login Anda ke Halaman WordPress

WPForms membuatnya sangat mudah untuk menambahkan form Custom login Anda di setiap posting atau halaman WordPress.

Cukup edit halaman di mana Anda ingin menambahkan formulir login atau buat yang baru. Pada layar edit halaman, tambahkan blok WPForms ke area konten Anda.

Menambahkan blok WPForms ke postingan

Selanjutnya, pilih formulir login yang Anda buat sebelumnya dan blok WPForms akan secara otomatis memuatnya di dalam area konten.

Pratinjau formulir login

Anda sekarang dapat melanjutkan mengedit halaman formulir login, atau menyimpan dan menerbitkan perubahan Anda.

Menyesuaikan desain halaman formulir login WordPress Anda

Secara default, halaman form Custom login WordPress Anda akan menggunakan template dan gaya halaman tema Anda. Ini akan memiliki menu navigasi tema Anda, header, footer, dan widget sidebar.

Jika Anda ingin sepenuhnya mengambil alih seluruh halaman dan mendesain sesuatu dari awal, Anda dapat menggunakan plugin pembuat halaman WordPress.

Dengan plugin pembuat halaman, Anda dapat membuat tata letak halaman Custom dan kemudian menambahkan widget formulir login yang disediakan oleh Theme My Login atau WPForms.

Pada gambar di bawah, sebagai contoh saya telah menggunakan plugin Beaver Builder yang populer . Saya menggunakan gambar latar belakang pada tata letak layar penuh dan kemudian menambahkan dua kolom. Dalam satu kolom saya menambahkan beberapa teks dan tombol. Di kolom lain, saya menambahkan widget WPForms.

Membuat halaman login kustom menggunakan plugin pembuat halaman

Manfaat Beaver Builder adalah 100% solusi drag and drop

Catatan: Karena Anda sudah masuk, plugin Theme My Login dan WPForms mungkin tidak menampilkan pratinjau langsung dari formulir login. Plugin WPForms memiliki opsi di mana Anda dapat mematikannya di pengaturan formulir.

Jika plugin pembuat halaman WordPress bukan milik Anda, maka Anda dapat menggunakan CSS khusus untuk mengatur gaya formulir dan halaman login itu sendiri. Sebagai alternatif, Anda juga dapat menggunakan plugin CSS Hero untuk menambahkan gaya CSS khusus dengan mudah.

Anda tidak selalu perlu membuat halaman login WordPress yang sepenuhnya Custom untuk situs Anda. Faktanya, banyak website yang hanya mengganti logo dan url logo WordPress dengan tetap menggunakan halaman login default.

Jika Anda ingin mengganti logo WordPress pada layar login dengan logo Anda sendiri, maka Anda dapat melakukannya dengan mudah menggunakan plugin WordPress atau dengan menambahkan kode Custom. Saya akan menunjukkan kepada Anda kedua metode yang dapat Anda gunakan salah satu yang paling cocok untuk Anda.

Ubah Logo dan URL Login WordPress menggunakan Plugin

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Colorlib Login Customizer . plugin. Untuk lebih jelasnya, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress .

Setelah aktivasi, plugin menambahkan item menu baru berlabel ‘Login Customizer’ ke sidebar admin WordPress. Mengkliknya akan meluncurkan penyesuai login.

Penyesuai login

Penyesuai login akan memuat layar login WordPress default Anda dengan opsi penyesuaian di sebelah kiri dan pratinjau langsung di sebelah kanan.

Untuk mengganti logo WordPress dengan logo Anda sendiri, klik tab ‘Opsi logo’ di sebelah kanan. Dari sini Anda dapat menyembunyikan logo WordPress, mengunggah logo khusus Anda sendiri, mengubah URL logo dan teks.

Unggah logo khusus ke halaman login

Plugin ini juga memungkinkan Anda untuk sepenuhnya menyesuaikan halaman login WordPress default. Anda dapat menambahkan kolom, gambar latar belakang, mengubah warna formulir login, dan banyak lagi.

Pada dasarnya, Anda dapat membuat halaman Custom login WordPress tanpa mengubah URL login WordPress default.

Setelah Anda selesai, cukup klik tombol terbitkan untuk menyimpan perubahan Anda. Sekarang Anda dapat mengunjungi halaman login WordPress untuk melihat form Custom login Anda beraksi.

Halaman login WordPress kustom dengan logo kustom

Ubah Logo dan URL Login WordPress tanpa Plugin (Kode)

Metode ini memungkinkan Anda untuk mengganti logo WordPress secara manual di layar login dengan logo kustom Anda sendiri .

Pertama, Anda perlu mengunggah logo khusus Anda ke perpustakaan media. Buka Media > Tambah Halaman baru dan unggah logo khusus Anda.

Setelah Anda mengupload gambar, klik link ‘Edit’ di sebelahnya. Ini akan membuka halaman edit media di mana Anda perlu menyalin URL file dan menempelkannya di file teks kosong di komputer Anda.

Selanjutnya, Anda perlu menambahkan kode berikut ke file functions.php tema Anda atau plugin khusus situs.

1
2
3
4
5
6
7
8
9
10
11
12
13
function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(http://path/to/your/custom-logo.png);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Jangan lupa untuk mengganti URL gambar latar dengan URL file yang Anda salin sebelumnya. Anda juga dapat menyesuaikan properti CSS lain agar sesuai dengan gambar logo Custom Anda.

Sekarang Anda dapat mengunjungi halaman login WordPress untuk melihat logo Custom Anda beraksi.

Halaman login WordPress dengan logo kustom

Kode ini hanya menggantikan logo WordPress. Itu tidak mengubah tautan logo yang mengarah ke situs WordPress.org.

Mari kita ubah ini.

Cukup tambahkan kode berikut ke file functions.php tema Anda atau plugin khusus situs. Anda dapat menambahkan kode ini tepat di bawah kode yang Anda tambahkan sebelumnya.

1
2
3
4
5
6
7
8
9
function wpb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
function wpb_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Jangan lupa untuk mengganti ‘Nama dan Info Situs Anda’ dengan nama situs Anda yang sebenarnya. Logo Custom di layar login Anda sekarang akan mengarah ke halaman beranda situs Anda.

Itu saja. Saya harap artikel ini membantu Anda mempelajari berbagai cara membuat halaman login WordPress untuk situs Anda. Anda mungkin juga ingin melihat panduan keamanan WordPress utama , untuk mendapatkan tip tentang meningkatkan keamanan login WordPress Anda.

Tinggalkan Balasan