Cara Membuat Halaman Login Kustom di WordPress (3 Metode)

Secara default, halaman login yang dilihat pengunjung situs Anda sama dengan halaman login yang digunakan oleh admin. Meskipun halaman ini berfungsi, desainnya sangat mendasar, dengan banyak ruang putih dan logo WordPress di bagian depan dan tengah. Itu tidak banyak membantu untuk mendukung pencitraan merek Anda atau menawarkan pengalaman yang ramah pengguna kepada pengunjung.

Membuat halaman login khusus adalah peningkatan yang relatif mudah yang dapat Anda lakukan untuk situs WordPress Anda. Bergantung pada jenis situs yang Anda jalankan, banyak pengunjung Anda mungkin berinteraksi dengan halaman ini di beberapa titik, jadi halaman login WordPress khusus menghadirkan peluang untuk meningkatkan pengalaman mereka.

Pada artikel ini, kita akan berbicara tentang keuntungan dari halaman login kustom WordPress, membahas beberapa metode untuk membuatnya, dan menjelajahi beberapa praktik terbaik untuk pengalaman dan keamanan pengguna.

Mengapa Anda mungkin memerlukan halaman login WordPress kustom

Menyesuaikan halaman login WordPress Anda tidak harus menjadi proyek yang rumit. Tweak sesederhana menukar logo WordPress untuk Anda sendiri dan mengubah latar belakang bisa sangat membantu.

Halaman login khusus bisa lebih:

• Mudah digunakan
• Profesional
• Menarik secara visual
• Informatif
• Aman

Plus, membuat peningkatan ini cepat dan sederhana. Dengan meluangkan sedikit waktu untuk ini sekarang, Anda dapat meningkatkan halaman login Anda untuk setiap pengunjung yang menggunakannya di masa mendatang.

Manfaat menyesuaikan halaman login WordPress Anda

Sekarang, mari kita lihat lebih dekat beberapa keuntungan yang telah kami uraikan di atas, sehingga Anda dapat melihat mengapa ini bermanfaat. Halaman login WordPress default cukup sederhana:

Jika Anda satu-satunya yang pernah melihatnya, maka halaman login default akan membantu. Tetapi jika audiens Anda secara teratur menggunakannya untuk masuk, pasti ada beberapa peningkatan cepat yang dapat Anda lakukan.

Menambahkan branding ke halaman login akan membuatnya terasa seperti milik situs Anda dan memberikan tampilan yang lebih profesional. Pengunjung harus mengenalinya sebagai bagian alami dan sengaja dibuat dari situs Anda — bukan renungan.

Halaman ini juga bisa menjadi peluang bagus untuk berbagi berita dan informasi lainnya dengan audiens Anda. Misalnya, Anda dapat menyertakan bagian tempat Anda memposting pembaruan agar pengunjung dapat membaca sekilas saat masuk — berita tentang organisasi Anda, produk baru, testimonial, atau apa pun yang ingin Anda bagikan tentang perusahaan Anda.

Fitur penting dari halaman login yang bagus

Sementara halaman login untuk satu situs web mungkin terlihat sangat berbeda dari yang lain, mereka semua cenderung memiliki beberapa fitur umum. Jelas semua halaman login memerlukan cara bagi pengunjung untuk login, apakah itu melalui kombinasi nama pengguna dan kata sandi tradisional atau otentikasi pihak ketiga.

Memiliki tautan untuk mengatur ulang kata sandi atau mencari nama pengguna juga merupakan praktik standar. Tautan ini biasanya membawa orang ke halaman lain, di mana mereka dapat memasukkan alamat email mereka untuk menerima instruksi untuk mengambil atau mengatur ulang informasi mereka. Kata Sandi yang Lupa? link biasanya terletak di dekat kolom entri data dan tombol Log In .

Untuk melindungi Anda dan pengunjung Anda, ada baiknya juga menerapkan beberapa fitur keamanan dasar. Misalnya, Anda mungkin ingin mengubah cara admin masuk ke situs Anda untuk mencegah upaya yang tidak sah.

Jika situs Anda mengumpulkan informasi pribadi apa pun dari penggunanya, Anda harus memberikan perhatian ekstra untuk melindungi akun tersebut dari bot dan peretas. Teknologi CAPTCHA, Otentikasi Dua Faktor (2FA), dan pemberitahuan anti-phishing adalah beberapa hal yang dapat Anda lakukan untuk melindungi pengguna Anda. Kami akan membahas opsi ini secara lebih rinci nanti.

Cara membuat halaman login WordPress kustom (3 metode)

Untungnya, membuat halaman login kustom WordPress jauh lebih mudah daripada yang mungkin Anda bayangkan. Dalam hitungan menit, Anda dapat menambahkan logo dan membuat perubahan sederhana lainnya. Dalam hitungan jam, Anda dapat memiliki halaman login yang sepenuhnya disesuaikan yang akan meningkatkan pengalaman pengunjung Anda.

Berikut adalah tiga metode populer untuk membuat halaman login WordPress yang disesuaikan:

1. Buat halaman login kustom WordPress dengan SeedProd

Plugin SeedProd adalah cara intuitif untuk menyesuaikan halaman login Anda. Anda juga dapat membuat halaman 404 khusus, halaman Mode Pemeliharaan, halaman “Segera Hadir”, dan halaman arahan lainnya.

Perhatikan bahwa modul halaman 404 dan halaman login memerlukan paket SeedProd Pro. Untuk membuat halaman login Anda, cukup ikuti langkah-langkah berikut:

Langkah 1: Instal dan aktifkan SeedProd Pro

Pertama, buka halaman Plugin di dasbor Anda dan pilih Add New . Cari SeedProd dan instal secara gratis. Setelah instalasi selesai, klik tombol Activate .

Selanjutnya Anda harus meningkatkan ke paket premium. Untuk melakukan ini, klik Dapatkan Pro di tab SeedProd . Ini akan mengarahkan Anda ke situs web mereka, tempat Anda dapat membeli kunci aktivasi untuk versi premium.

Langkah 2: Buat halaman arahan menggunakan templat halaman login

Setelah Anda mengaktifkan SeedProd Pro, arahkan kursor ke tab SeedProd dan pilih Landing Pages . Pada layar berikut Anda akan disajikan dengan empat template.

Pilih Siapkan Halaman Login untuk menyesuaikan halaman login baru Anda menggunakan template yang sudah dibuat sebelumnya. Anda kemudian akan dibawa ke editor tempat Anda dapat mendesain halaman login baru Anda.

Editor SeedProd berperilaku seperti Editor Blok WordPress, memungkinkan Anda menambahkan dan memodifikasi aspek halaman dengan mudah. Karena Anda memilih modul halaman login, Anda sudah memiliki semua fitur yang diperlukan dari halaman login bawaan.

Ini termasuk kotak entri nama pengguna dan kata sandi, kotak centang Ingat Saya , tautan Atur Ulang Kata Sandi , gambar, dan latar belakang.

Anda dapat menggunakan Editor Blok untuk menambahkan teks, gambar, formulir, dan lainnya tambahan, seperti yang Anda lakukan dengan pos biasa. Cukup sesuaikan halaman ini sesuai keinginan Anda, lalu klik tombol Simpan di sudut kanan atas layar.

Langkah 3: Aktifkan halaman login baru Anda

Setelah desain Anda disimpan, keluar dari layar pengeditan dan kembali ke layar Halaman Arahan SeedProd di dasbor. Balikkan sakelar di modul Halaman Masuk ke Aktif untuk mengganti halaman login default dengan yang baru dirancang.

Sekarang, keluar dan kembali untuk melihatnya beraksi! Uji tautan atur ulang kata sandi dan fitur lainnya sebelum masuk kembali. Bayangkan Anda adalah pengunjung baru, dan pertimbangkan apakah ada yang dapat Anda lakukan untuk meningkatkan pengalaman lebih lanjut.

Pertimbangan lainnya

SeedProd membuatnya sangat mudah untuk menambahkan gambar dan elemen lainnya, seperti halnya dengan Editor Blok. Penting untuk mempertimbangkan semua opsi yang tersedia, untuk melihat apakah ada elemen yang akan efektif pada halaman login Anda.

Layar login Anda juga tidak harus tetap sama dari waktu ke waktu. Anda dapat mempertimbangkan untuk memposting gambar penjualan yang diperbarui atau saran konten unggulan secara teratur. Saat orang kembali masuk, Anda dapat menggunakan kesempatan untuk menyarankan konten baru atau populer.

Tentu saja, Anda juga ingin menggunakan palet warna dan font perusahaan Anda untuk menjaga semuanya tetap konsisten dengan sisa situs Anda. Dengan SeedProd, Anda dapat dengan mudah menukar latar belakang halaman, jadi jangan ragu untuk membuat beberapa desain dan memutarnya secara musiman atau sesuai keinginan Anda untuk menjaga pengalaman tetap segar.

2. Ubah halaman login Anda menggunakan LoginPress

Jika Anda mencari sesuatu yang lebih ramah anggaran dan langsung, LoginPress adalah plugin gratis yang berguna yang dapat Anda gunakan untuk menyesuaikan halaman login Anda. Ini tidak memiliki beberapa fitur dan polesan SeedPod Pro, tetapi menambahkan fungsionalitas ke Editor Situs Lengkap WordPress yang memungkinkan penyesuaian halaman login Anda dengan mudah. Cukup ikuti langkah-langkah ini untuk menggunakannya:

Langkah 1: Instal dan aktifkan plugin LoginPress

Dari halaman Plugin di dasbor Anda, pilih Tambah Baru dan cari "LoginPress." Instal dan aktifkan plugin untuk memulai.

Tidak perlu memutakhirkan LoginPress pada tahap ini, meskipun ada beberapa fitur premium yang dapat Anda pilih nanti. Untuk sebagian besar halaman login, versi gratis sudah cukup.

Langkah 2: Ubah halaman login Anda menggunakan Customizer

Setelah Anda menginstal dan mengaktifkan LoginPress, Anda akan melihat tab baru di sisi kiri dasbor WordPress Anda. Arahkan kursor ke tab LoginPress dan pilih Customizer untuk mengubah halaman login Anda.

Anda akan dibawa langsung ke halaman login di dalam Editor Situs Lengkap. Anda akan melihat ikon untuk kemampuan berikut:

• Ubah logo
• Kustomisasi formulir (Nama Pengguna dan Kata Sandi)
• Tombol Kustomisasi (Masuk)
• Sesuaikan navigasi (Kehilangan kata sandi Anda?)
• Ubah catatan kaki
• Ubah template
• Ubah latar belakang

Cukup pilih ikon pensil atau kuas yang sesuai untuk memodifikasi elemen tersebut. Anda dapat dengan mudah menukar logo, mengunggah latar belakang Anda sendiri, atau mengubah formulir dan tombol masuk hanya dengan beberapa klik.

Anda tidak akan memiliki kebebasan penuh untuk mengedit halaman ini seperti yang Anda lakukan dengan Editor Blok di SeedProd Pro, tetapi ini seharusnya merupakan penyesuaian yang cukup untuk sebagian besar halaman login. Di menu sebelah kiri Anda akan melihat tab LoginPress baru di Editor Situs Lengkap yang menambahkan lebih banyak fitur.

Langkah 3: Jelajahi fitur tambahan dan pertimbangkan untuk meningkatkan

Beberapa fitur hanya tersedia dengan paket premium LoginPress, seperti modul reCAPTCHA. Untuk sebagian besar situs WordPress berukuran kecil hingga menengah, versi gratisnya sudah cukup untuk membuat halaman login khusus.

Fitur yang disediakan memungkinkan Anda untuk dengan mudah mengubah banyak aspek halaman login Anda dengan cepat dan tanpa pengkodean apa pun. Anda akan selalu memiliki opsi untuk meningkatkan ke versi Pro di masa mendatang, jadi silakan mulai dengan versi gratis dan lihat apakah itu sesuai dengan kebutuhan Anda.

Pengeditan yang disarankan

Jika Anda memilih metode penyesuaian halaman login ini, menukar logo mungkin akan menjadi hal pertama yang ingin Anda lakukan. Cukup klik ikon pensil biru di sebelah logo default untuk mengunggah milik Anda.

Selanjutnya, Anda dapat mencoba beberapa templat lain untuk melihat apakah ada yang cocok dengan gaya Anda. Jika tidak, Anda selalu dapat mengunggah milik Anda sendiri atau cukup membuat latar belakang menggunakan warna utama merek Anda.

Kemudian Anda dapat mempertimbangkan untuk mengubah font atau teks dalam bentuk sebenarnya agar konsisten dengan bagian situs Anda lainnya. Anda juga ingin memastikan bahwa semua tautan berfungsi.

3. Ubah halaman login Anda menggunakan kode khusus

Terakhir, jika Anda memilih untuk tidak menggunakan plugin, Anda juga dapat menyesuaikan halaman login menggunakan kode. Ini membutuhkan lebih banyak pengetahuan teknis, tetapi menawarkan fleksibilitas paling besar.

Persisnya bagaimana Anda mengubah halaman login Anda dengan kode khusus terserah Anda. Mari kita lihat salah satu contoh perubahan sederhana yang mungkin ingin Anda lakukan.

Katakanlah Anda ingin mengganti logo WordPress secara manual di layar login dengan grafik Anda sendiri. Ini mungkin tampak menakutkan bagi pemula, tetapi tidak sulit bagi siapa pun yang terbiasa mengakses file situs web mereka dan manipulasi kode dasar. Ikuti saja langkah-langkah ini:

Langkah 1: Cadangkan situs Anda

Setiap kali Anda memodifikasi file atau folder secara manual di situs Anda, sebaiknya buat cadangan. Satu penekanan tombol yang tidak disengaja dapat merusak situs Anda.

Pencadangan situs penuh secara berkala selalu merupakan ide yang baik, meskipun Anda setidaknya harus membuat salinan dari file apa pun yang ingin Anda modifikasi. Dalam hal ini, Anda akan membuat perubahan pada file functions.php Anda.

Langkah 2: Buat dan unggah logo Anda

Anda tentu saja memerlukan gambar logo Anda untuk menggantikan yang default. Unggah gambar yang ingin Anda gunakan ke Perpustakaan Media Anda.

Meskipun Anda secara teoritis dapat membuat gambar dalam ukuran apa pun, dimensi dengan lebar sekitar 300 piksel cocok dengan baik di atas formulir login default. Kami akan menggunakan contoh 300x300 piksel untuk gambar placeholder persegi.

Anda dapat mengubah ukuran gambar Anda di luar WordPress, atau melakukannya di dalam Media Library Anda. Untuk melakukan yang terakhir, cukup klik pada gambar setelah diunggah dan pilih Edit Gambar di sebelah kanan, di dekat thumbnail. Anda dapat memilih dimensi Anda dan klik pada Skala untuk mengubah ukurannya. Kemudian simpan gambar dan lanjutkan.

Anda akan memerlukan URL gambar untuk langkah selanjutnya, jadi klik tombol Salin URL ke papan klip atau biarkan jendela ini terbuka.

Langkah 3: Ubah file functions.php

Selanjutnya, Anda harus mencari file functions.php Anda. Untuk melakukan ini, akses folder tema Anda melalui File Transfer Protocol (FTP). Folder ini harus memiliki nama yang sama dengan tema Anda dan ditempatkan di folder wp-content untuk situs Anda.

Untuk menukar logo WordPress di layar login, tambahkan kode ini ke file functions.php di dalamnya. Untuk menghindari meletakkannya di tengah skrip lain, Anda cukup memasukkan cuplikan ini di bagian paling akhir file di bawah sisa kode:

 function wpb_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(YOUR IMAGE URL HERE); height:300px; width:300px; background-size: 300px 300px; background-repeat: no-repeat; padding-bottom: 10px; } </style> <?php } add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Tempelkan URL yang Anda salin dari langkah terakhir sebagai pengganti placeholder “URL GAMBAR ANDA DI SINI”. Ini akan mengganti logo WordPress dengan gambar Anda. Pastikan untuk menyimpan file functions.php setelah Anda melakukan perubahan ini.

Langkah 4: Kunjungi halaman login Anda

Logout untuk kembali ke halaman login Anda. Jika Anda sudah berada di layar login, Anda harus memuat ulang halaman untuk melihat perubahannya.

Anda akan melihat logo Anda menggantikan yang lama. Jika ukurannya tidak sesuai, Anda dapat dengan mudah mengubah dimensi ukuran dengan mengubah nilai tinggi, lebar, dan px latar belakang dalam cuplikan kode.

Jika ada yang salah, cukup pulihkan cadangan Anda untuk mengembalikan perubahan. Anda juga dapat menimpa file functions.php Anda dengan salinan cadangan yang Anda buat sebelumnya.

Cara mengamankan halaman login WordPress Anda

Saat menerapkan halaman login khusus, ada beberapa hal yang perlu Anda perhatikan untuk keamanan dan kesehatan situs web Anda. Halaman login adalah target utama bagi peretas dan bot, jadi sangat penting untuk menguncinya dengan rapat. Berikut adalah beberapa cara untuk melakukannya:

Otentikasi Dua Faktor (2FA)

Otentikasi Dua Faktor (juga dikenal sebagai 2FA) sangat mengurangi kemungkinan peretasan akun. Dengan 2FA, selain membutuhkan nama pengguna dan kata sandi, bentuk otentikasi kedua diperlukan ketika pengunjung mencoba masuk dari perangkat baru atau tidak terdaftar.

Misalnya, jika seorang peretas dapat memperoleh kredensial masuk untuk salah satu pengguna Anda, mereka dapat dengan mudah masuk ke akun dan menyebabkan kekacauan. Terkadang peretas hanya bisa menebak kata sandi berdasarkan nama pengguna. Dengan diterapkannya 2FA, bentuk verifikasi kedua juga akan diperlukan.

Biasanya ini dalam bentuk email atau teks yang dikirim ke pemegang akun untuk mengonfirmasi bahwa mereka mencoba masuk. Karena tidak mungkin peretas juga memiliki akses ke email atau perangkat pengguna, ini semua kecuali memastikan bahwa pengguna asli.

2FA biasanya dapat dipercepat dengan mengizinkan pengguna mendaftarkan perangkat sehingga upaya masuk dari sumber tersebut tidak memerlukan verifikasi setiap saat. Ada sejumlah plugin yang tersedia yang memungkinkan Anda mengatur 2FA di situs Anda. Ini sangat penting untuk dipertimbangkan jika situs Anda menangani segala jenis informasi sensitif atau keuangan.

CAPTCHA dan reCAPTCHA

Salah satu metode untuk menebak kredensial login adalah dengan brute force menyerang situs Anda dengan bot. Dengan kata lain, program akan secara otomatis mencoba menebak kombinasi nama pengguna dan kata sandi yang umum sampai berhasil. Ini mungkin tampak seperti tugas yang sulit bagi manusia, tetapi bot dapat melakukannya dengan cepat dan otomatis, menebak ribuan kata sandi umum tanpa campur tangan manusia.

Tujuan CAPTCHA adalah untuk menggagalkan bot ini agar tidak melakukan upaya login. Anda mungkin pernah mengalami tes ini. Mereka biasanya datang dalam bentuk kata-kata terdistorsi yang harus Anda uraikan dan ketikkan ke dalam kotak.

CAPTCHA yang lebih modern melibatkan pemilihan gambar yang menyertakan objek tertentu seperti mobil atau cerobong asap. Tes ini sulit untuk dipecahkan oleh bot, dan oleh karena itu efektif untuk mencegah upaya peretasan yang brutal.

reCAPTCHA adalah bentuk lanjutan dari teknologi ini yang dapat mencegah bot dengan sedikit atau tanpa masukan dari pengguna manusia. LoginPress menyertakan teknologi reCAPTCHA dalam versi Pro-nya, atau Anda dapat menemukan aplikasi CAPTCHA yang disertakan dalam plugin tertentu atau alat keamanan yang lebih komprehensif.

Pemberitahuan anti-phishing

Strategi berteknologi rendah untuk mencuri kredensial login adalah dengan meniru sumber resmi dan hanya memintanya. Ini dikenal sebagai phising.

Misalnya, seseorang dapat membuat alamat email menggunakan nama Anda atau perusahaan Anda, dan mengirimkan email yang meminta kredensial login untuk memperbaiki masalah. Jika email dan alamatnya meyakinkan, beberapa orang mungkin mengambil umpan dan merespons, memberikan informasi akun mereka.

Salah satu cara untuk mencegahnya adalah dengan memposting pemberitahuan anti-phishing yang mengumumkan bahwa Anda dan perusahaan Anda tidak akan pernah meminta informasi tersebut. Setiap email atau pesan seperti itu harus dianggap sebagai spam dan diabaikan. Pemberitahuan sederhana pada halaman login Anda dapat berarti perbedaan antara upaya phishing yang berhasil dan akun yang aman.

Menempatkan kaki terbaik Anda ke depan

Meskipun mudah untuk mengabaikannya dan fokus pada aspek lain dari situs web Anda, menyesuaikan halaman login Anda adalah proyek yang bermanfaat. Halaman login khusus dapat meningkatkan pengalaman pengguna, memberikan situs Anda nuansa yang lebih profesional, dan digunakan untuk berbagi informasi penting.

Anda dapat mengubah halaman login WordPress Anda menggunakan metode berikut:

1. Buat halaman login baru dengan plugin seperti SeedProd.
2. Ubah halaman login Anda dengan alat gratis seperti LoginPress.
3. Gunakan kode untuk membuat perubahan manual, seperti mengganti logo default.

Untuk mendapatkan hasil maksimal dari layar masuk Anda, plugin memudahkan untuk menyesuaikan halaman persis seperti yang Anda inginkan. Dalam beberapa kasus, ini adalah salah satu halaman pertama yang akan dilihat pengunjung, jadi penting untuk menampilkan yang terbaik!