Cara Mengganti Tampilan Login WordPress (4 Metode Mudah)

Apabila memiliki website WordPress untuk tujuan tertentu, misalnya untuk membuat website membership, Anda bisa mengganti tampilan login WordPress Anda. Meskipun halaman default sebenarnya sudah cukup, ada beberapa keuntungan yang bisa Anda dapatkan.

Contohnya, halaman login kustom bisa meningkatkan pengalaman pengguna, serta membantu Anda membangun branding. Selain itu, Anda bisa menambahkan fitur keamanan ekstra untuk mencegah penjahat cyber membobol website.

Di artikel ini, kami akan membahas cara mengganti tampilan login WordPress, serta membagikan rekomendasi plugin WordPress terbaik untuk fungsi tersebut. Kami juga akan menjelaskan cara melindungi halaman login Anda agar lebih aman. Mari simak tutorialnya!

Cara Mengganti Tampilan Login WordPress

Di bagian ini, kami akan membahas 4 cara untuk mengganti tampilan halaman login WordPress. Anda bisa menggunakan metode mana pun yang menurut Anda paling mudah dan sesuai kebutuhan.

Cara Custom Halaman Login WordPress dengan Plugin Gratis

Cara termudah untuk menyesuaikan tampilan login WordPress adalah dengan menggunakan plugin. Cukup instal plugin yang menyediakan fungsi untuk mengedit halaman login secara langsung melalui dashboard WordPress.

Ada banyak plugin WordPress halaman login kustom dengan berbagai fitur dan opsi personalisasi. Beberapa tersedia dalam versi berbayar, tapi banyak juga yang tersedia gratis.

Untuk tutorial ini, kami akan menggunakan plugin kustomisasi halaman login WordPress yang paling populer, LoginPress. Plugin ini memungkinkan Anda mengedit berbagai area di layar login, seperti:

• Logo login. Ganti logo WordPress default dengan logo Anda sendiri. Anda juga bisa mengubah ukuran, padding, URL, dan posisinya.
• Latar belakang. Tambahkan warna khusus atau ganti latar belakang default dengan gambar kustom. Atau, gunakan video untuk membuat latar belakang animasi.
• Pesan sambutan dan pesan error. Tulis pesan yang akan ditampilkan saat user mengakses website Anda atau menjumpai error. Anda bisa membuat beberapa pesan error untuk berbagai skenario.
• Formulir. Ubah tampilan halaman lupa kata sandi dan halaman login. Anda bisa menyesuaikan warna, ukuran, serta padding label kolom username dan kata sandi.
• Footer. Sertakan elemen seperti navigasi dan link atur ulang kata sandi di footer halaman login kustom Anda.

Selain kustomisasi visual, plugin ini juga memiliki fitur-fitur yang meningkatkan keamanan halaman login Anda, seperti reCAPTCHA.

Sebagai contoh, kami akan menggunakan LoginPress untuk mengubah logo di halaman login admin. Setelah Anda login ke WordPress, ikuti langkah-langkah berikut:

1. Download dan instal plugin LoginPress.
2. Di sidebar WordPress, buka LoginPress → Customizer.

3. Di halaman Customizer, klik logo → Select image.
4. Pada tab Upload files, klik Select files.
5. Pilih gambar yang Anda inginkan, kemudian klik Open.
6. Masukkan informasi yang diperlukan, seperti teks dan teks alt, lalu klik Choose image.

7. Klik Publish untuk menerapkan perubahan.

Untuk mengonfigurasi pengaturan lainnya, buka LoginPress → Settings. Di sini, Anda bisa mengaktifkan beberapa fitur lain, mengatur ulang plugin ke pengaturan default, dan mengubah kredensial login yang diperlukan.

Cara Mengatur Tampilan Login WordPress Menggunakan WPForms

Plugin WPForms memungkinkan Anda membuat formulir kustom untuk website. Meskipun plugin ini tersedia gratis, fitur kustomisasi halaman loginnya hanya tersedia dengan add-on premium User Registration.

Untuk menggunakan add-on ini, Anda perlu membeli paket Pro seharga $199,50/tahun (sekitar Rp3,2 juta). Jadi, kami menyarankan agar Anda menggunakan metode ini apabila sudah memiliki paket premium WPForms.

Selain fungsi login kustom, WPForms juga dilengkapi dengan template dan fitur formulir lainnya. Berikut adalah beberapa fitur penyesuaian yang bisa Anda manfaatkan:

• Kolom khusus. WPForms memiliki berbagai jenis kolom untuk halaman login, seperti menu drop-down, pilihan ganda, dan kotak centang. Anda juga bisa mengubah label, deskripsi, dan ukurannya.
• Fitur keamanan. Add-on halaman login WPForms dilengkapi dengan perlindungan spam dan fitur reCAPTCHA. Fitur-fitur ini membantu mencegah bot menembus layar login Anda.
• Konfirmasi khusus. Pilih metode konfirmasi yang ditampilkan setelah pengguna berhasil login. Misalnya, tampilkan pesan khusus atau arahkan mereka ke URL tertentu.

Pada dasarnya, fitur kustomisasi visual yang disediakan plugin ini tidak begitu lengkap. Meskipun bisa menambahkan logo sendiri, Anda tidak bisa mengubah latar belakang formulir login tanpa kode CSS.

Sebelum mengganti tampilan login WordPress menggunakan plugin ini, Anda perlu mengaktifkan ekstensi yang dibutuhkan. Untuk melakukannya, buka dashboard admin WP Anda dan ikuti langkah-langkah berikut:

1. Di menu sidebar WordPress, pilih WPForms → Settings.

2. Pada tab General, cari kolom License Key di bawah kategori License.

3. Paste kunci lisensi Anda di kolom tersebut, lalu klik Verify Key.
4. Buka Addons, dan cari User Registration Addon → Install Addon.

5. Setelah proses penginstalan selesai, klik Activate.

Setelah diaktifkan, buat halaman login kustom Anda menggunakan template yang disediakan. Di tutorial ini, kami juga akan menunjukkan cara mengaktifkan tombol lupa kata sandi dan pengalihan:

1. Buka WPForms → Add New.
2. Masukkan nama formulir Anda di kolom yang tersedia.

3. Temukan template User Login Form lalu klik Use Template. Langkah ini akan secara otomatis menambahkan kolom username dan kata sandi ke formulir Anda.
4. Klik kolom Password.

5. Pada tab Field Options, masukkan deskripsi berikut (Anda bisa menyesuaikannya dengan kalimat sendiri):

Forgotten your password? <a href={url_lost_password} >Click here</a> to reset it.

6. Buka sidebar WPForms → Settings → Confirmations.
7. Dari menu drop-down Confirmation Type, pilih Go to URL (Redirect).
8. Masukkan Confirmation Redirect URL.

9. Klik Save untuk menerapkan perubahan.

Dengan WPForms, Anda juga bisa menambahkan formulir login kustom di bagian website mana pun menggunakan blok atau shortcode yang bisa digunakan kembali (reusable). Artinya, Anda bisa membuat beberapa halaman login untuk berbagai user role WordPress.

Misalnya, kami akan menambahkan formulir ke halaman login klien baru menggunakan blok kustom:

1. Di sidebar WordPress, buka bagian Pages (Halaman) → Add New (Tambah Baru).

2. Di layar editor, masukkan judul halaman.
3. Klik ikon plus (+) untuk menambahkan blok baru, lalu pilih WPForms.

4. Dari menu drop-down, pilih formulir login user Anda.

5. Klik tombol Publish untuk mengonlinekan formulir.

Cara Mengganti Tampilan Login WordPress dengan Page Builder

Secara default, layar login Anda akan mengikuti tampilan tema yang aktif. Apabila ingin menyesuaikannya atau membuat halaman sendiri dari awal, gunakan plugin page builder seperti SeedProd.

Builder drag-and-drop ini mudah digunakan, bahkan oleh user pemula. Anda bisa menambahkan konten ke halaman login WordPress kustom dan mengubah setiap elemen visualnya tanpa coding.

Versi gratis SeedProd belum menyertakan Formulir Login. Untuk menggunakannya, dapatkan paket premium dengan harga mulai dari $31,60/tahun (sekitar Rp505.000).

Berikut adalah cara menggunakan SeedProd untuk custom halaman login WordPress:

1. Instal dan aktifkan versi premium SeedProd.
2. Di sidebar WordPress, klik Pages (Halaman) → Add New (Tambah Baru).
3. Masukkan nama halaman yang baru, lalu klik Edit with SeedProd.

4. Pilih filter Login kemudian pilih template.

5. Seret dan letakkan widget Login Form dari tab Block. Konfigurasikan tampilan dan fungsi formulir login WordPress kustom Anda.
6. Klik Publish (Publikasikan).

Atau, buka SeedProd → Landing Pages lalu pilih Set up a Login Page. Aktifkan halaman setelah Anda selesai menyesuaikannya.

Cara Mengganti Halaman Login WordPress Menggunakan Custom CSS

Apabila tidak ingin menggunakan plugin, Anda bisa menggunakan kode CSS kustom untuk mengganti tampilan login WordPress default. Namun, kami tidak menyarankan metode ini kalau Anda belum familiar dengan coding.

Untuk melakukannya, Anda perlu menambahkan kode kustom ke file functions.php tema WordPress. Sebelum melanjutkan, sebaiknya buat child theme dulu agar kode asli tema tidak berubah setelah Anda mengupdatenya.

Anda bisa mengatur gaya setiap elemen HTML di layar login WordPress menggunakan CSS kustom. Apabila ingin menulis kode sendiri, baca halaman WordPress Codex untuk mendapatkan informasi selengkapnya.

Di tutorial ini, kami akan menyisipkan kode CSS untuk mengubah logo default halaman login WordPress:

1. Akses folder website WordPress Anda menggunakan FTP client. Apabila menggunakan layanan hosting dari Hostinger, buka hPanel → pilih Kelola di paket hosting Anda → File Manager.

2. Temukan folder public_html → wp-content, lalu buka folder theme.
3. Buka folder tema WordPress yang saat ini digunakan. Di tutorial ini, tema yang kami gunakan adalah twentytwentyone-child.

4. Buat folder untuk logo dengan mengklik ikon Folder baru di sisi kiri layar. Beri nama images, lalu klik Buat.
5. Pindahkan logo Anda ke folder baru tersebut.
6. Kembali ke folder child theme, klik dua kali file functions.php.

7. Copy-paste cuplikan kode berikut ini sebelum simbol ?>. Ganti your-logo.png dengan nama file logo Anda:

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/your-logo.png);
		height:65px;
		width:320px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

8. Di bawah potongan kode di atas, tambahkan kode berikut ini sehingga link logo mengarah ke website Anda:

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

9. Klik ikon disk untuk menyimpan perubahan.

Sebaiknya buat stylesheet login kustom untuk kustomisasi yang lebih canggih. Dengan demikian, Anda bisa mengatur gaya halaman login WordPress dalam satu file dan tidak memenuhi file functions.php. Berikut caranya:

1. Akses direktori child theme yang sedang aktif.
2. Buat file baru dan beri nama style-login.css. Di sini, Anda akan menambahkan kode CSS kustom untuk mengatur gaya halaman login WordPress.
3. Cari dan edit file functions.php child theme.
4. Tambahkan cuplikan kode di bawah ini untuk memuat file CSS yang baru dibuat dan menerapkan gaya ke halaman login WordPress Anda:

function my_login_stylesheet() {
   		wp_enqueue_style( 'custom-login', 
get_stylesheet_directory_uri() . '/style-login.css' );
wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' )

5. Klik ikon disk untuk menyelesaikan pengeditan.

Plugin Custom Halaman Login WordPress Terbaik

Di bagian ini, kami akan membagikan rekomendasi plugin custom halaman login terbaik untuk membantu Anda memilih yang paling sesuai.

1. LoginPress

• Jumlah download: 200.000+
• Rating: 4,8/5
• Harga: freemium (mulai dari $49/tahun atau sekitar Rp780.000)

LoginPress adalah plugin yang ideal kalau Anda membutuhkan banyak opsi kustomisasi visual. Plugin ini juga memiliki fitur-fitur tambahan yang meningkatkan fungsi halaman login WordPress Anda.

Semua opsi kustomisasi visualnya tersedia gratis. Namun, fitur-fitur seperti reCAPTCHA, login sosial, widget, dan redirect kustom hanya tersedia dalam versi premium.

Fitur terbaik plugin ini adalah layar editornya yang mudah digunakan. Tampilannya mirip dengan editor WordPress dan memungkinkan Anda melihat pratinjau perubahan apa pun secara real-time.

Selain itu, plugin ini memungkinkan Anda mengimpor dan mengekspor pengaturan formulir login untuk mempercepat proses penyesuaian. LoginPress cocok untuk pemula karena simpel dan mudah digunakan.

2. Forminator

• Jumlah download: 400.000+
• Rating: 4,8/5
• Harga: freemium (mulai dari $7,50/bulan atau sekitar Rp120.000)

Forminator adalah plugin alternatif WPForms terbaik untuk membuat halaman login WordPress kustom. Plugin ini menyertakan beberapa fitur premium WPForms secara gratis, termasuk formulir login kustom.

Tersedia juga template yang bisa disesuaikan untuk mempermudah pembuatan formulir login. Selain tampilan, Anda bisa mengubah perilaku formulir dan mengintegrasikannya dengan berbagai aplikasi.

Seperti WPForms, Forminator memungkinkan Anda menyisipkan formulir login dengan blok kustom atau shortcode melalui editor halaman. Forminator juga menyediakan keamanan tambahan untuk website WordPress dengan reCAPTCHA serta fitur perlindungan spam Akismet dan Honeypot.

Forminator Pro menyediakan lebih banyak fitur untuk halaman login WordPress kustom Anda, seperti pengisian awal dinamis dan dukungan WordPress Multisite.

3. Nextend Social Login and Register

• Jumlah download: 300.000+
• Rating: 4,9/5
• Harga: freemium (mulai dari $49 atau sekitar Rp780.000 untuk satu website)

Untuk proses yang lebih nyaman, beberapa user lebih memilih login alternatif seperti menggunakan akun media sosial mereka. Namun, solusi ini biasanya hanya tersedia dalam versi premium.

Nextend Social Login and Register memungkinkan Anda menggunakan fitur ini secara gratis. Plugin ini mendukung integrasi dengan lebih dari 15 platform pihak ketiga, tapi hanya Facebook, Twitter, dan Google yang tersedia dalam versi gratis.

Dengannya, Anda bisa menambahkan beberapa metode login sosial pada formulir login untuk memberikan lebih banyak pilihan kepada pengunjung. Selain itu, Anda bisa menyesuaikan tampilan halaman login dengan cepat menggunakan preset yang disertakan.

Tidak seperti plugin WordPress login kustom lainnya, Nextend tidak menawarkan opsi kustomisasi yang begitu lengkap. Kami merekomendasikan plugin ini hanya kalau Anda membutuhkan fitur login sosial gratis.

4. Ultimate Member

• Jumlah download: 200.000+
• Rating: 4,4/5
• Harga: freemium (langganan tambahan premium mulai dari $249/tahun atau sekitar Rp3,95 juta)

Ultimate Member adalah plugin formulir kustom lengkap untuk website WordPress membership. Secara default, plugin ini dilengkapi dengan berbagai template formulir untuk pemulihan password, login, atau pendaftaran yang tidak ditemukan.

Plugin ini ideal untuk membuat halaman login WordPress yang sederhana dan fungsional. Namun, kalau menginginkan kustomisasi visual tingkat lanjut, Anda mungkin perlu menggunakan plugin lain.

Ultimate Member menawarkan ekstensi gratis dan premium untuk menambahkan lebih banyak fungsi, seperti pengguna online, pengguna terverifikasi, dan ulasan pengguna. Meskipun hanya fitur halaman login kustom yang dibutuhkan, add-on ini mungkin tetap sesuai untuk kebutuhan Anda.

5. RegistrationMagic

• Jumlah download: 10.000+
• Rating: 4,5/5
• Harga: freemium (mulai dari $89 atau sekitar Rp1,45 juta untuk satu website)

Plugin RegistrationMagic memungkinkan Anda mengimplementasikan sistem login dengan berbagai fitur pada website Anda. Plugin ini memiliki dashboard untuk mengelola formulir login dengan mudah melalui satu tampilan.

Terdapat grafik visual yang menunjukkan tingkat keberhasilan dan kegagalan login dari waktu ke waktu. Data tersebut membantu Anda mengidentifikasi anomali pada layar login Anda, yang bisa menunjukkan adanya masalah teknis atau percobaan serangan cyber.

RegistrationMagic juga menawarkan fitur keamanan yang lengkap, termasuk reCAPTCHA, filter IP, dan two-factor authentication (2FA).

Dibandingkan dengan plugin lain, RegistrationMagic tidak memiliki banyak opsi kustomisasi visual. Gunakan plugin ini kalau Anda membutuhkan fitur keamanan dan analitik yang canggih untuk halaman login WordPress.

6. Branda

• Jumlah download: 20.000+
• Rating: 5/5
• Harga: freemium (mulai dari $7,50/bulan atau sekitar Rp120.000)

Menggunakan plugin Branda, Anda bisa menyesuaikan detail halaman login admin website dengan mudah. Berkat fleksibilitasnya, plugin ini cocok untuk pengguna pemula dan tingkat lanjut.

Pengguna pemula bisa memilih template login siap pakai dan melakukan pengeditan sederhana seperti mengubah logo, ukuran huruf, atau gambar latar belakang.

Untuk pengguna tingkat lanjut, Branda memungkinkan pembuatan halaman login kustom dari nol. Pengguna bisa mengubah kolom login, mengatur redirect, atau menambahkan kode CSS untuk kustomisasi tingkat lanjut.

Apabila hanya ingin melakukan penyesuaian visual, plugin ini bisa menjadi pilihan ideal karena tidak memiliki fitur keamanan dan login alternatif. Namun, menu kustomisasinya tidak menampilkan pratinjau perubahan yang Anda buat secara real-time.

3 Cara Mengamankan Halaman Login WordPress

Penjahat cyber sering kali mengeksploitasi halaman login default WordPress untuk mencuri akses dengan serangan brute force atau DDoS. Anda bisa menambahkan lapisan keamanan ekstra untuk membantu melindungi website dan data pengguna dengan cara custom halaman login WordPress.

Mengatur Two-Factor Authentication (2FA)

2FA adalah langkah verifikasi tambahan untuk mengakses akun, yang bisa membantu melindungi akun pengguna ketika username dan passwordnya dibobol.

Biasanya, fitur keamanan ini akan mengirimkan link verifikasi melalui SMS atau email ke perangkat yang terhubung. Atau, aplikasi seperti Google Authenticator juga bisa membantu menghasilkan kode verifikasi acak.

Untuk mengakses akun yang dilindungi 2FA, pengguna harus mengklik link verifikasi atau menginput kode setelah memasukkan kredensial login. Langkah keamanan ini penting karena hacker bisa dengan mudah menebak atau mendapatkan informasi login melalui phishing, yang merupakan salah satu masalah keamanan WordPress paling umum.

Sebaiknya tetap aktifkan 2FA meskipun website Anda tidak menyimpan informasi sensitif seperti nomor rekening. Dengannya, pengunjung akan merasa lebih aman dan lebih percaya terhadap website Anda.

Untuk mengaktifkan 2FA di WordPress, gunakan plugin seperti Wordfence Security. Plugin ini juga memungkinkan pengguna mendaftarkan perangkatnya ke website Anda sehingga mereka bisa login tanpa 2FA selama 30 hari.

Berikut cara mengaktifkannya:

1. Setelah menginstal plugin, buka Wordfence → Login Security → Two-Factor Authentication.

2. Pindai kode QR dengan aplikasi autentikator di perangkat seluler Anda. Atau, ketik kode yang disediakan.
3. Masukkan angka yang dihasilkan di aplikasi seluler Anda ke kolom di bawah bagian kode pemulihan.
4. Klik tombol ACTIVATE untuk menyelesaikan setup.

Gunakan reCAPTCHA

Hacker yang tidak memiliki kredensial login bisa mencoba menebaknya dengan menggunakan bot. Program-program ini menghasilkan kemungkinan kombinasi username dan password sampai menemukan yang tepat.

Bot akan mencoba ribuan kombinasi dengan cepat, yang mengakibatkan lonjakan permintaan login. Apabila tidak bisa menangani permintaan tersebut, website Anda akan melambat atau tidak bisa diakses.

Nah, Anda bisa mencegahnya menggunakan reCAPTCHA, yang berfungsi untuk memverifikasi apakah permintaan login berasal dari pengguna sungguhan, bukan bot. Metode verifikasinya biasanya menggunakan teka-teki sederhana.

Karena tidak bisa login, bot pun tidak bisa memverifikasi apakah kredensial yang dihasilkan sudah benar. Metode ini membantu meminimalkan permintaan login, menjaga performa dan uptime website Anda.

Gunakan plugin seperti LoginPress dan WPForms untuk mengaktifkan reCAPTCHA di layar login. Untuk CAPTCHA teks, sediakan bantuan audio dan gunakan palet yang ramah bagi pengguna tunanetra untuk meningkatkan aksesibilitas website.

Kurangi Upaya Login Maksimum

Secara default, WordPress tidak membatasi jumlah upaya login yang bisa dilakukan pengguna. Hal ini menjadikan website WordPress rentan terhadap serangan brute force saat menggunakan halaman login default.

Kurangi risiko ini dengan menggunakan plugin untuk membatasi jumlah upaya login. Saat hacker gagal login, plugin ini akan mengunci akun untuk sementara dan memberi tahu administrator website tentang potensi pelanggaran yang muncul.

Beberapa plugin halaman login kustom WordPress menawarkan fitur ini sebagai add-on premium. Atau, Anda bisa mengaktifkannya secara gratis menggunakan Limit Login Attempts Reloaded:

1. Setelah menginstal plugin, buka sidebar WordPress → Limit Login Attempts.
2. Buka tab Settings.
3. Centang kotak GDPR compliance dan sesuaikan pesan yang ditampilkan.
4. Klik kotak Notify on lockout dan masukkan alamat email Anda beserta jumlah penguncian maksimum.

5. Scroll ke bawah ke bagian App Settings.
6. Pada pengaturan Lockout, masukkan nilai yang Anda inginkan pada tiap kolom.

7. Klik Save Settings untuk menerapkan perubahan.

Kesimpulan

Ada banyak manfaat yang bisa Anda dapatkan dengan mengatur tampilan login WordPress. Selain dari segi visual, Anda juga bisa meningkatkan pengalaman pengguna dan keamanan website.

Di artikel ini, kami sudah membagikan 4 metode untuk custom halaman login WordPress Anda. Berikut rangkuman singkatnya:

• Gunakan plugin halaman login kustom seperti LoginPress. Plugin praktis dan gratis yang ideal kalau Anda membutuhkan fitur dan opsi kustomisasi dasar seperti mengubah logo dan gambar latar belakang.
• Aktifkan add-on User Registration WPForms. Tambahkan formulir login kustom di mana saja di website Anda. Karena berbayar, gunakan add-on ini kalau Anda sudah berlangganan WPForms premium.
• Manfaatkan page builder seperti SeedProd. Memungkinkan Anda membuat halaman login kustom dari awal dan menambahkan fitur-fitur canggih seperti login media sosial.
• Tambahkan kode CSS kustom ke file functions.php tema WordPress. Cocok untuk pengguna yang sudah familiar dengan coding dan tidak ingin menginstal plugin.

Selain itu, ada beberapa plugin halaman login kustom WordPress yang menawarkan berbagai fitur. Kami merekomendasikan LoginPress kalau Anda ingin fokus pada kustomisasi visual, dan Forminator apabila memerlukan plugin serbaguna.

Ingat, terapkan langkah-langkah keamanan tambahan di halaman login Anda karena para penjahat cyber bisa mengeksploitasinya untuk melancarkan serangan. Beberapa opsi terbaik adalah mengaktifkan 2FA, menggunakan reCAPTCHA, dan mengaktifkan plugin untuk membatasi upaya login maksimum.