Custom Halaman Login WordPress eCommerce Agar Terlihat Menarik

TokoDaring.Com – Custom Halaman Login WordPress Agar Terlihat Menarik. Secara default, link url login WordPress adalah http://domain.com/wp-login.php. Tapi anda mungkin ingin merubahnya ? Wajar saja karena memang banyak website WordPress yang mengganti alamat url login ‘demi alasan keamanan’.

Selain link url login WordPress, banyak pengguna WordPress (terutama untuk tipe website bisnis) juga melakukan perubahan pada tampilan halaman login WordPress.

Halaman login WordPress selain terlihat pucat, juga terdapat logo (huruf W) bulat WordPress di atasnya. Yang jika di klik, maka akan menuju ke website wordpress.org.

Tentu saja halaman login tersebut sangat tidak merepresentasikan dari bisnis eCommerce anda. Apalagi jika website eCommerce anda ada pada bidang fashion.

Karena seharusnya logo perusahaan andalah yang ada di sana, plus juga dengan tampilan atau kombinasi warna yang merepresentasikan brand bisnis anda.

Kenapa halaman login WordPress begitu kaku ?

Kenapa halaman login default WordPress (wp-login.php) terlihat begitu kaku dan sangat tidak menarik ?

Pertanyaan yang bagus mengingat WordPress mendominasi market CMS secara global dan banyak usaha atau bisnis besar yang menggunakan WordPress

Pendapat kami adalah, WordPress sengaja membiarkannya demikian. Hal itu untuk menumbuhkan kreatifitas, karena nyatanya ada banyak plugin atau tema yang di buat untuk mengkustom halaman tersebut.

Lagi pula melakukan perubahan atau custom halaman login WordPress tidak susah dan anda bisa melakukannya sendiri.

Benarkah anda ingin merubahnya ? Artikel ini akan menjelaskan dan membantu anda bagaimana melakukan modifikasi dan custom halaman login WordPress eCommerce anda agar terlihat menarik.

Custom halaman login WordPress agar terlihat menarik

Ya, merubah halaman login WordPress supaya terlihat menarik ternyata sangat mudah. Kami punya trik dan caranya, bahkan untuk merubah yang lainnya.

Artikel ini akan mengcover beberapa point kustomisasi berikut. Mulai warna background, elemen di bagian atas form (header) hingga bagian bawah form (footer) dan bagian lainnya di halaman wp-login.php anda.

• Cara mengganti background login WordPress.
  • Mengkustom kotak form dan tombol login.
  • Mengganti logo WordPress dengan logo anda sendiri.
• Cara mengganti url login WordPress tanpa plugin.
• Meredirect link url login WordPress.
• Pilihan plugin login WordPress gratis.

Cara mengganti background login WordPress

Setiap langkah kustomisasi ini akan memerlukan atau menambahkan script fungsi tambahan ke dalam file function.php child theme anda. Atau anda bisa menuliskannya menggunakan plugin editor.

Ini script kode yang harus di tambahkan :

// cara mengganti background login WordPress

add_action('login_head', 'tkdr_custom_login_page');
function tkdr_custom_login_page() { ?>
<style type="text/css"">
 body.login {
  background-color: #1abefd;
  color:#000;
}

body.login a {
  color:#000;
  text-decoration:underline;
}

// block kode ini masih nyambung degan block kode selanjutnya.....

body.login {background-color: #1abefd; color:#000;} akan merubah background warna dan warna huruf. Sedangkan body.login a {color:#000; text-decoration:underline;} akan membedakan huruf yang mengandung link dengan membuatnya memiliki garus bawah.

Mengkustom kotak form login

Selanjutnya, kita akan mengkustom kotak form login dan warna label input (text). Tambahkan script berikut melanjutkan kode di atas.

// custom element kotak form login 

#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;
}

// kustom warna label input

#loginform label {
  color: #fff;
}

Nah, kini warna pada kotak form termasuk warna huruf username dan password sudah berubah. Tentu anda bisa mengganti warna dengan kode warna yang anda kehendaki. Saran kami gunakan warna atau yang kombinasi warna yang merepresentasikan brand anda.

Ganti warna tombol login

Anda mungkin perlu untuk menyesuaikan warna dan style tombol login hingga selaras dengan warna background body dan kotak form. Tambahkan lagi kode berikut melanjutkan kode sebelumnya.

// ganti 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
}

Secara lengkap script kode di atas adalah seperti ini :

/* 
 * Custom halaman login WordPress
 *
 */


// cara mengganti background login WordPress

add_action('login_head', 'tkdr_custom_login_page');
function tkdr_custom_login_page() { ?>
<style type="text/css"">
 body.login {
  background-color: #1abefd;
  color:#000;
}

body.login a {
  color:#000;
  text-decoration:underline;
}

// custom element kotak form login 

#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;
}

// kustom warna label input
#loginform label {
  color: #ffffff;
}
 
// ganti 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
}

Script lengkap di atas akan merubah seluruh tampilan halaman login /wp-login.php, dari tampilan sebelumnya yang secara default sangat tidak menarik.

Ganti logo dan link form login WordPress

Anda mungkin masih merasa aneh dengan halaman login tersebut, karena di atas form masih terpasang logo WordPress.

Halaman login tersebut adalah bagian dari website bisnis anda, dan seharusnya menampilkan logo dan link yang mencerminkan properti bisnis anda sendiri. Maka selanjutnya kita akan memasang logo bisnis kita sendiri menggantikan logo WordPress.

Berikut langkah untuk mengganti logo dan link tersebut :

• Siapkan gambar logo dalam bentuk png atau jpg.
• Upload logo tersebut ke dalam folder media.
• Copy link file logo yang sudah di upload, misalnya : https://nama-domain.com/wp-content/uploads/2022/01/logo_login.jpg.

Lalu, tambahkan kode fungsi berikut pada file function.php child theme atau plugin editor.

/*
 * custom halaman login wordpress
 * 
 */

// Ganti logo dan link

add_action('login_head', 'tkdr_logo_halaman_login');
function tkdr_logo_halaman_login() { ?>
 <style type="text/css">
  #login h1 a, .login h1 a {
   background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/wp-content/uploads/2022/01/logo_login.jpg;
   height: 80px;
   width: 320px;
   background-size: 320px 80px;
   background-repeat: no-repeat;
   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;
  }
  </style>
 <?php 
} 

Refresh dan cek perubahannya. Setelah logo anda berubah, anda perlu juga untuk merubah link dibalik logo tersebut. Sehingga ketika di klik, maka akan mengarah ke halaman homepage anda sendiri.

Tambahkan lagi kode berikut di bawah kode yang sudah anda buat diatas.

/*
 * custom halaman login wordpress
 * 
 */

// link logo di arahkan ke halaman homepage dan buka ke wordpress.org

function link_logo_halaman_login() {
   return home_url();
}
add_filter('login_headerurl', 'link_logo_halaman_login');
 
function title_logo_halaman_login() {
  return get_option('blogname');
}
add_filter('login_headertitle', 'title_logo_halaman_login');

Link url login WordPress

Jika langkah custom halaman login WordPress di atas berkaitan dengan urusan tampilan dan esteika (desain). Maka berikutnya adalah berkaitan dengan keamanan website eCommerce anda (security).

Link url login WordPress begitu umum. Jika tidak di rubah, link url login WordPress adalah /wp-login.php. Setiap orang tau alamat tersebut dan memancing pihak yang tidak bertanggung jawab untuk melakukan hal-hal yang tidak di inginkan.

Misalnya registrasi yang di lakukan oleh BOT. Atau melakukan serangan brute force attack terhadap website anda. Lihat artikel berikut tentang apa itu brute force attack.

Maka mengganti alamat login atau link url login WordPress website eCommerce anda, mungkin dapat membantu menghindari dari hal-hal tersebut. Hal itu merupakan salah satu cara memberikan keamanan website eCommerce yang anda kelola.

Cara mengganti url login wordpress tanpa plugin

Langkah berikut adalah cara mengganti url login WordPress tanpa plugin.

• Dari folder root (pubic_html), carilah file dengan nama wp-login.php.
• Anda bisa mendownload dulu file tersebut untuk diubah dan di re-upload.
• Atau anda ingin mengeditnya langusng menggunakan file explorer. Apapun cara yang dipilih, pastikan untuk melakukan back-up terlebih dahulu.
• Buka dan edit file wp-login.php tersebut.
• Cari baris kode network_site_url("wp-login.php?action=r....
• ubah string wp-login.php dengan string yang akan digunakan sebagai url. Misalnya tokodaring-login.php.
• Lalu simpan.
• Rename file wp-login.php sama dengan string yang digunakan di atas.
• Lakukan clear cache.
• Coba akses halaman login yang baru https://nama-domain.com/tokodaring-login.php. Jika berhasil maka form login akan tampil.

Sebaliknya jika anda menemukan error 404, mungkin ada hal yang salah. Pastikan lagi string yang digunakan didalam file wp-login.php sama dengan nama file renamenya. Jika berhasil maka beberapa perubahan adalah sebagai berikut :

• URL Login : https://nama-domain.com/tokodaring-login.php.
• URL Register : https://nama-domain.com/tokodaring-login.php?action=register.
• URL Lupa Password : https://nama-domain.com/tokodaring-login.php?action=lostpassword.
• Sedangkan URL lama https://nama-domain.com/wp-login.php tidak akan dapat di akses dan mengalami error 404 Not Found.

Plugin login WordPress gratis

Anda mungkin menginginkan hal yang simple untuk meng custom halaman login WordPress anda ? Maka memasang plugin yang tepat adalah hal yang bisa di lakukan. Pilihan beberapa plugin login WordPress gratis yang bisa di pasang diantaranya sebagai berikut :

• Custom login
• Custom login page customizer
• Memphis custom login

Artikel terkait :