WordPress merupakan Content Management System (CMS) yang mendominasi website aktif di dunia saat ini. Kelengkapan hingga komunitas besar dari WordPress menjadi alasan utama membuat WordPress jauh meninggalkan CMS lain seperti Joomla, Drupal dan lainnya. Sudah banyak website yang aktif saat ini menggunakan WordPress sebagai CMS karena fitur dan kemudahan yang ditawarkan oleh CMS ini.
Jika kamu mencari tutorial mengganti tampilan login wordpress, sudah pasti kamu adalah pengguna WordPress, bukan?
Salah satu hal yang cukup membosankan menggunakan WordPress sepengalaman saya adalah dari sisi tampilan login WordPress. Yes, kamu memang bisa mengganti tampilan login WordPress lebih menarik dengan bantuan Plugins maupun custom sendiri. Tentu saja, jika kamu belum memahami kemampuan dasar HTML, CSS, JavaScript & PHP , sangat tidak dianjurkan mengutak-atik sendiri karena ini bisa saja justru menyebabkan error.
Kali ini, kami akan membagikan tutorial singkat yang bisa kamu gunakan untuk mengganti tampilan login standar WordPress yang terlihat seperti ini :
Disclaimer : Pastikan kamu sudah memahami dasar-dasar dari HTML, CSS, JavaScript & PHP sebelum mengikuti tutorial ini. Selain itu, pastikan kamu sudah mem-backup terlebih dahulu sebelum melakukan editing. Segala kerusakan (error) yang terjadi akbiat mengikuti tutorial ini adalah risiko dari pembaca.
Mengubah logo default WordPress pada tampilan login
Langkah pertama yang perlu kita lakukan untuk mengganti tampilan login default WordPress adalah mengganti logo bawaan.
- Pertama, kamu harus mengupload logo yang ingin kamu gunakan
- Setelah logo berhasil di-upload, selanjutnya yang kamu perlukan adalah url dari gambar tersebut. Misal url untuk logo yang digunakan situs kleefi.com ini adalah https://kleefi.com/wp-content/uploads/2020/09/logo.png
- Edit file CSS melalui FTP dan cari file yang bernama login.min.css atau login.css (saya menggunakan CSS minify, sehingga update ini menggunakan versi min atau login.min.css), lokasi kedua file ini berada pada /wp-admin/css/
- Cari dengan menggunakan ctrl+f keyword “wordpress-logo.svg” dan ganti url yang berada disana sesuai url gambar atau logo yang kamu upload tadi. Jangan lupa simpan hasil yang telah kamu edit tadi.
Jika sudah berhasi, kembali ke bukan halaman login web WordPress kamu dan tampilan logo akan berganti sesuai logo yang di-inginkan.
Memisahkan background warna dan form login
Edit file wp-login.php dan cari keyword <body class=”login — sisipkan class baru misal setelah class login. Misalkan, beri nama class tersebut login-split-page sehingga nantinya menjadi awal tag body akan menjadi <body class=”login login-split-page
Masi di-file yang sama, tambahkan kode seperti dibawah ini tepat dibawah tag <body> di wp-login.php tadi :
<div class=”login-split”>
<div style=”padding-top: 8%;”></div>
</div>
Jika sudah, jangan lupa untuk menyimpan file yang telah di-edit tadi.
Edit file CSS login.min.css atau login.css
Selanjutnya kita perlu untuk melakukan custom pada file login.min.css atau login.css pada beberapa class dan id CSS. Yang perlu kita edit adalah :
#login{
position:absolute;
left:50%;
top:15%;
padding:30px 0 30px 50px;
}
body.login.login-split-page .login-split{
width:50%;
position:fixed;
left:0;
height:100%;
display:block
}
.login-split{
background:#7474BF;
}
Jika sudah jangan lupa simpan kode tadi. Refresh halaman login kamu, seharusnya ini sudah mengganti tampilan halaman login standar WordPress menjadi seperti tampilan dibawah ini. Selamat mencoba!