Ganti Warna Background, Form, Tombol Halaman Login WordPress

wpJakarta – Ganti Warna Background Form Halaman Login WordPress. Sebagai bagian dari artikel kami sebelumnya Tips Trik Kustom Halaman Login WordPress. Artikel ini adalah yang kedua yang mencover perubahan background, form dan tombol log in dihalaman login WordPress.

Navigasi lengkap tips trik kustom halaman login WordPress :

1. Merubah logo “W” besar dengan logo sendiri dan link WordPress.org ke alamat website sendiri pada logo tersebut.
2. Merubah background halaman, background form login dan efek timbul dan merubah warna tombol login plus menjadikannya sedikit nongol.
3. Meredirect setelah login sesuai dengan role dan memberikan link dibagian bawah form.

Ganti Warna Background, Form Login Dan Tombol Halaman Login WordPress.

Jika pada artikel sebelumnya Rubah Logo Link Form Login WordPress anda berhasil merubah logo dan link URL dihalaman login. Maka untuk mengganti background, form dan tombol silahkan tambahkan kode berikut pada file function.php :

 /* ----------- Ganti Background ----------- */
 function wpj_custom_login_page() { ?>
 <style type="text/css"">
 
/* ---------- Background halaman ---------- */
 body.login {
   background-color: #1ABEFD;
   color:#ffffff;
 }
 body.login a {
   color:#ffffff;
 }
 
/* ---------- Background form ---------- */
 #loginform {
   background-color: #3F17D5;
   border-color:#3F17D5;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
   border-radius: 5px;
   margin-bottom:10px;
 }

 /* ---------- Warna label input ---------- */
 #loginform label {
   color: #ffffff;
}

 /* ---------- Warna tombol login ---------- */
 body.login div#login form#loginform p.submit input#wp-submit {
   background-color:#bf55ec;
   border-color:#bf55ec;
   box-shadow:inset 0 -0.6em 1em -0.35em rgba(154,18,179,1),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
 }
 </style>
 <?php }
 
 add_action('login_head', 'wpj_custom_login_page');

Optional anda dapat menghilangkan link “Daftar atau register”, “Lupa password” dan link “Kembali ke website” dengan menambahkan kode berikut sebelum tag </style> :

p#nav {display: none;}
p#backtoblog {display: none;}

Tapi jika anda memiliki sirkulasi pengguna yang aktif tentu saja jangan menghilangkan link navigasi tersebut. Karena menghilangkan link navigasi tersebut justru akan menyulitkan user anda.

• Untuk warna background, warna form maupun tombol bisa disesuaikan sendiri. Akan lebih bagus jika disesuaikan dengan ambience tema website anda secara keseluruhan.
• Ganti nama fungsi wpJakarta dengan nama fungsi anda sendiri.

Meredirect setelah login sesuai dengan role dan memberikan link dibagian bawah form

Pada artikel berikutnya sebagai seksi ketiga dari tips trik kustom halaman login WordPress. Kami akan memberikan kode pada file function.php untuk meredirect user yang login berdasarkan rolenya. Juga menambahkan kustom link dibagian bawah form login.