Cara Membuat Custom Halaman Login WordPress
Apakah kamu ingin membuat halaman login custom di WordPress untuk situs kamu?
Jika kamu menjalankan situs yang memiliki banyak anggota atau situs toko online, maka akan banyak pengguna yang mengakses halaman login. Untuk itu, menyesuaikan halaman login default akan sangat penting agar membuat tampilan menjadi lebih baik dan menarik.
Pada artikel ini, saya akan menunjukkan kepada kamu bagaimana cara membuat halaman login custom di WordPress. Panduan ini juga sangat berguna untuk kamu yang akan membuat halaman login WooCommerce custom.
Mengapa Perlu Membuat Halaman Login Custom di WordPress?
WordPress hadir dengan sistem manajemen pengguna yang powerful. Dengan ini memungkinkan pengguna untuk membuat toko online, situs dengan keanggotaan, atau blog dengan banyak penulis.
Secara default, halaman login akan menampilkan logo WordPress dibagian atas. Ini tidak menjadi masalah ketika kamu hanya menjalankan blog kecil dan memiliki satu pengguna saja.
Namun, jika situs web yang kamu kelola mengizinkan pengguna umum untuk mendaftar dan masuk, maka dengan membuat halaman login custom akan memberikan pengalaman pengguna yang lebih baik.
Kamu bisa menggunakan logo kamu sendiri, agar dapat meningkatkan performa dari perusahaan yang kamu kelola dan akan lebih dikenal banyak orang.
Nantinya halaman login custom ini, tidak hanya menampilkan form untuk login, tetapi kamu juga bisa mempromosikan halaman lainnya.
Membuat Halaman Login WordPress Custom Sendiri
Untuk membuat halaman login custom, kamu bisa menggunakan plugin yang dapat di unduh secara gratis. Seperti, Theme My Login adalah plugin gratis yang dapat mengubah halaman login WordPress sesuai dengan tema yang kamu gunakan.
Meskipun plugin ini tidak memiliki banyak fitur yang dapat kamu gunakan untuk menyesuaikan, tetapi mengganti tampilan halaman login default WordPress akan membuat situs kamu menjadi sedikit lebih professional.
Hal pertama yang harus kamu lakukan adalah menginstal dan mengaktifkan plugin Theme My Login. Untuk lebih detailnya kamu dapat melihat panduan kami tentang cara menginstal plugin WordPress.
Setelah kamu mengaktifkan plugin, secara otomatis Theme My Login akan membuat tautan baru untuk login ke dashboard, logout, registrasi, lupa kata sandi, dan reset kata sandi.
Kamu dapat menyesuaikan tautan sesuai yang kamu inginkan dengan mengunjungi halaman pengaturan plugin, pada menu samping kiri buka Theme My Login > General.
Tidak hanya itu, plugin ini juga memungkinkan kamu menggunakan shortcode untuk membuat halaman login dan registrasi khusus.
Kamu cukup membuat halaman baru untuk setiap tindakan dan kemudian menambahkan slug halaman, secara otomatis plugin akan menemukan dan mengarahkan pengguna dengan benar.
Berikut adalah contoh yang dapat kamu gunakan untuk membuat halaman tindakan baru.
Buka Page > All Page untuk membuat halaman baru. Beri judul sesuai dengan form yang akan kamu buat. Kemudian masukkan shortcode berikut [theme-my-login].
Kamu sekarang dapat mempublikasikan halaman dan mempratinjaunya untuk melihat halaman login custom yang sudah kamu buat.
Gunakan kode berikut untuk membuat halaman lain yang kamu inginkan.
- [theme-my-login action=”register”] = Untuk form registrasi.
- [theme-my-login action=”lostpassword”] = Halaman kata sandi yang hilang.
- [theme-my-login action=”resetpass”] = Reset kata sandi.
Membuat Halaman Login Kustom WordPress Dengan LoginPress
LoginPress mendukung berbagai opsi yang dapat kamu gunakan untuk merubah tampilan login default WordPress.
Plugin ini memiliki versi gratis dan premium yang berbayar. Versi gratis memiliki fitur yang lumayan lengkap, mendukung berbagai bahasa dan responsive.
Versi premium, plugin ini menawarkan fitur reCAPTCHA yang berguna untuk mengamankan situs dari spam.
Untuk mulai menggunakan plugin ini, kamu dapat mengunduh dan mengaktifkannya. Kemudian pada menu samping kiri admin WordPress, buka LoginPress > Customizer.
Sekarang kamu bisa mengubah tampilan halaman login WordPress seperti background, logo dan lain sebagainya pada halaman ini.
Menggunakan plugin ini, kamu juga dapat menampilkan pesan error seperti forgot password, error login, wrong password dan lain sebagainya.
Ubah Logo dan URL Login WordPress Tanpa Plugin
Metode ini memungkinkan kamu untuk secara manual mengganti logo WordPress yang berada di halaman login dengan logo kamu sendiri.
Pertama, kamu harus mengunggah logo yang akan kamu gunakan ke situs melalui menu Media > Add New.
Setelah kamu berhasil mengunggah, klik gambar dan salin tautan ke teks editor untuk menyimpan sementara.
Selanjutnya, kamu perlu menambahkan kode berikut ke file functions.php tema kamu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function wp_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', 'wp_login_logo' ); |
Jangan lupa untuk mengganti URL background-image dengan URL logo yang sudah kamu salin sebelumnya.
Sekarang kamu dapat mengunjungi halaman login WordPress untuk melihat apakah logo sudah berubah.
Kode di atas hanya merubah tampilan logo dan tidak merubah tautan yang mengarah ke website WordPress.org.
Gunakan kode berikut ini ke file functions.php tepat di bawah kode yang kamu tambahkan sebelumnya.
|
1 2 3 4 5 6 7 8 9 |
function wp_login_logo_url() { return home_url(); } add_filter( 'login_headerurl', 'wp_login_logo_url' ); function wpb_login_logo_url_title() { return 'Nama Website Kamu'; } add_filter( 'login_headertitle', 'wp_login_logo_url_title' ); |
Jangan lupa untuk mengganti Nama Website Kamu dengan nama situs yang kamu kelola. Ketika logo di klik akan mengarah ke halaman beranda situs buka ke WordPress.org.
Sekarang kamu sudah berhasil merubah tampilan halaman login default WordPress. Mungkin kamu juga berminat melihat panduan kami tentang cara menghapus footer credit tema WordPress.
Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.