Kustomisasi dan Desain Tampilan Halaman Login WordPress Tanpa Plugin

21 Juli 2021
Baca 6 menit
2632 Views

Daftar Isi

Tutorial kustomisasi dan desain tampilan login WordPress tanpa plugin.

Banyak dari kita ingin membuat halaman login WordPress tampil beda, hal ini sebenarnya bisa sangat mudah dilakukan dengan plugin, akan tetapi banyak dari kita juga dan termasuk saya sendiri kurang menyukai penggunaan plugin terlalu banyak karena akan mempengaruhi performa website kita, rasanya tidak sepadan memasang plugin sekedar untuk halaman yang hanya akan diakses oleh pengelola website saja.

Tidak kalah mudah dari menggunakan plugin, mendesain halaman login WordPress menggunakan snippet code dan sedikit CSS juga sangat mudah, cara ini relatif aman karena kita tidak perlu menyentuh file asli WordPress dan tidak akan berubah ke default meskipun versi WordPress kita diupdate. Hal utama yang kita butuhkan untuk membuat desain tampilan login WordPress tanpa plugin adalah:

  1. File functions.php yang ada di direktori folder tema yang sedang aktif, atau Anda dapat menggunakan plugin Code Snippets
  2. Membuat custom file CSS yang bisa kita letakkan di mana pun di folder WordPress kita, yang paling penting kita harus mengetahui URL nya.

Kita langsung saja ke langkah-langkahnya:

Langkah pertama, menambahkan snippet code:

Menambahkan snippet code ke file functions.php yang ada di direktori tema aktif kita, kita bisa meletakkannya di baris terakhir setelah kode yang lain, untuk menambahkan snippet code Anda bisa mengikuti langkah berikut:

Menambahkan snippet code melalui file functions.php yang ada di direktori tema aktif.

  1. Login ke CPanel atau Direct Admin atau Plesk atau panel apa saja yang Anda gunakan.
  2. Buka file manager lalu selanjutnya kita menuju ke folder di mana WordPress Anda terinstall
  3. Buka folder wp-content ⇒ themes ⇒ buka folder tema/template yang Anda gunakan ⇒ edit file functions.php
  4. Tambahkan snippet code berikut di bawah kode-kode yang sudah ada atau di atas kode ?> jika ada kode tersebut:
/*-----------------
* Custom Login Screen by www.zaad.my.id
*-------------------*/
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="https://www.domain.com/custom-login.css"/>';}
add_action('login_head', 'my_custom_login');
  • Note: https://www.domain.com/custom-login.css nanti akan Anda ganti dengan letak file CSS yang sebenarnya

Menambahkan Snippet Code Melalui Plugin Code Snippets

Anda bisa menyalin kode di atas, lalu menambahkannya pada plugin Code Snippets

Langkah kedua, membuat file CSS:

Membuat file CSS yang bisa kita letakkan di mana saja di folder website kita, kita bisa meletakkannya di home atau membuat folder baru, yang paling penting kita mengetahui URL-nya; karena URL ini akan kita gunakan di snippet code. Untuk membuat file CSS ini Anda bisa ikuti langkah berikut:

  1. Pergi ke direktori di mana WordPress Anda terinstall melalui CPanel, Direct Admin, Plesk atau panel lainnya yang Anda gunakan.
  2. Anda bisa memilih antara membuat file CSS langsung di folder WordPress Anda atau Anda juga bisa membuat folder baru jika ingin memisahkan file CSS Anda dengan file-file WordPress. Anda dapat menamai folder itu sesuai selera Anda. Jika Anda ingin meletakkan file CSS tersebut di folder WordPress langsung maka Anda bisa langsung add file di sana lalu beri nama custom-login.css, dan jika memilih untuk membuatnya di dalam folder lain maka langkahnya adalah: Add folder ⇒ Beri nama sesuai selera Anda ⇒ Buka foldernya ⇒ Add file dan beri nama filenya dengan custom-login.css
  3. Kembali ke file functions.php atau ke plugin Code Snippets dan ubah https://www.domain.com/custom-login.css sesuai dengan URL di mana file CSS yang telah Anda buat berada, jika Anda meletakkannya di folder WordPress langsung (tidak membuat folder baru) maka Anda cukup mengganti www.domain.com dengan nama domain Anda yang sebenarnya, jika Anda membuat file CSSnya di dalam folder maka selain mengubah nama domainnya Anda juga harus menambahkan nama direktori foldernya, contohnya Anda membuat file CSS di dalam folder css-saya, maka URLnya adalah https://www.domain.com/css-saya/custom-login.css
  4. Save file functions.php yang telah Anda edit tadi.

Langkah ketiga, menambahkan style ke file CSS:

Setelah langkah-langkah di atas selesai maka langkah selanjutnya adalah menambahkan style ke file CSS yang sudah Anda buat tadi, maka langkahnya:

  1. Pergi ke file custom-login.css yang sudah Anda buat tadi lalu edit
  2. Tambahkan kode-kode CSS sesuai kebutuhan, Anda dapat menggunakan kode-kode berikut dan mengubahnya sesuai selera Anda, yang perlu Anda lakukan hanyalah mencopy kode-kode berikut lalu mampaste-nya di dalam file custom-login.css yang sudah ada Anda buat tadi, lalu silakan Anda modifikasi sesuai selera.

Kode untuk mengatur logo login:

/*Mengubah Logo Login www.zaad.my.id */
.login h1 a {
background-image: url('https://www.zaad.my.id/alhamdulillah/uploads/2021/07/Asset-3@9x.png.webp');
background-size:130px !important;
height:130px;
width:130px !important;
padding-bottom: 10px;
}
  • background-image: Untuk mengatur gambar logo, silakan ganti https://www.zaad.my.id/alhamdulillah/uploads/2021/07/Asset-3@9x.png dengan URL gambar Anda
  • background-size: Untuk mengatur ukuran logo
  • height: Untuk mengatur tinggi logo
  • width: Untuk mengatur lebar logo
  • Save filenya lalu kita coba lihat hasilnya (gunakan saja private/incognito window)WordPress Custom Login Logo

Kode untuk mengatur gambar background:

/* Background image www.zaad.my.id */
body.login {
background-image: url('https://www.zaad.my.id/alhamdulillah/uploads/2021/07/Free-Logo-Branding-Mockup-PSD-scaled.jpg.webp');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
  • background-image:Untuk mengubah gambar background, silakan ganti https://www.zaad.my.id/alhamdulillah/uploads/2021/07/Free-Logo-Branding-Mockup-PSD-scaled.jpg dengan URL gambar Anda.
  • background-repeat: Jika gambar background Anda kecil maka Anda bisa membuatnya muncul berulang.
  • background-attachment: Untuk mengatur apakah background Anda bisa begerak ketika discroll atau tidak.
  • background-position: Untuk mengatur posisi background
  • background-size: Untuk mengatur ukuran background
  • Save filenya dan coba lihat hasilnya (jika direload saja tidak berubah maka silakan tutup semua incognito window dan buka yang baru)Kustom WordPress Login

Kode untuk mengatur style form login:

/* Background untuk formulir login www.zaad.my.id */
.login form {
background: rgba(0, 0, 0, 0.7);
}
  • background: Untuk mengatur warna background ganti value rgba(0, 0, 0, 0.7) sesuai selera Anda
  • Save filenya dan coba lihat hasilnyaWordPress custom login form background

Kode untuk mengatur border formulir login:

/* Border untuk formuir login www.zaad.my.id */
#loginform {border-radius:0px;
border-color:#262626;
box-shadow: 0 0 20px #0d0d0d;
}
  • border-radius: Untuk mengatur radius border, semakin besar angka radiusnya semakin melengkung pojokannya.
  • border-color: Untuk mengatur warna border, Anda bisa klik di sini untuk referensi kode warna html
  • box-shadow: Untuk mengatur bayangan, arah bayangan dan sebarannya serta warnanya, silakan angkanya Anda ubah sesuai selera.
  • Silakan save dan coba lihat hasilnya.WordPress custom login form border and shadow

Kode untuk mengatur font pada label formulir login:

/* Label untuk form login www.zaad.my.id */
.login label {
font-family:"Arial", arial black, sans-serif;
font-size: 14px;
color: #ffffff;
}
  • font-family: Untuk mengatur jenis font yang ingin Anda gunakan
  • font-size: Untuk mengatur ukuran font
  • color: Untuk mengatur warna font
  • Silakan save dan coba lihat hasilnyaWordPress custom form title font style

Kode untuk menatur warna formulir Nama Pengguna atau Alamat Email:

/* Username text box www.zaad.my.id*/
.login input[type="text"]{
background-color:rgba(0,0,0,.7);
color:#ffffff;
border-color:#0d0d0d;
}
  • background-color: untuk mengatur warna backgroundnya, gantilah sesuai selera Anda.
  • color: untuk mengatur warna text/font, silakan diubah valuenya sesuai selera.
  • border-color: untuk mengatur warna border pada fomulir.
  • Save dan coba lihat hasilnya.WordPress custom username form style

Kode untuk mengatur warna formulir Sandi/Password:

/* Password text box www.zaad.my.id */
.login input[type="password"]{
background-color:rgba(0,0,0,.7);
color:#ffffff;
border-color:#0d0d0d;
}
  • background-color: untuk mengatur warna bacgkroundnya
  • color: untuk mengatur warna text/fontnya
  • border-color: untuk mengatur warna bordernyaa
  • Silakan save dan lihat hasilnyaWordPress Custom Password Input Form Style

Kode untuk mengatur style tombol login:

/* Tombol login www.zaad.my.id */
.wp-core-ui .button-primary{
background-color:rgba(0, 0, 0, 0.8);
background-image:none;
border-color:#00e6e6;
border-bottom-color:#66ffff;
color:#00e6e6;
}
  • background-color: Untuk mengatur warna tombol
  • background-image: Jika anda ingin menggunakan gambar sebagai bacgkround, silakan masukkan URL gambarnya.
  • border-color: Untuk mengatur warna border
  • border-bottom-color: Untuk mengatur warna border bawah
  • color: Untuk mengatur warna teks/fontnya
  • Silakan save dan lihat hasilnya
WordPress Login Button Style

Kode untuk mengatur style tombol login saat ditunjuk pointer mouse (hover)

/* Tombol login hover www.zaad.my.id */
.wp-core-ui .button-primary:hover {
background-color:#00b3b3;
background-image:none;
border-color:#66ffff;
color:#000;
}
  • background-color: Untuk mengatur warnanya.
  • background-image: Jika anda ingin menggunakan gambar sebagai bacgkround, silakan masukkan URL gambarnya.
  • border-color: Untuk mengatur warna border
  • border-bottom-color: Untuk mengatur warna border bawah
  • color: Untuk mengatur warna teks/fontnya
  • Silakan save dan lihat hasilnya

Kode untuk mengatur font Lupa Sandi dan link "Pergi ke"

/* Lupa Sandi dan link ‘Pergi ke’ www.zaad.my.id */
.login #nav a, .login #backtoblog a {
font-family:"Arial", arial black, sans-serif;
font-size: 12px;
color: #00b3b3 !important;
text-shadow:none;
}
  • font-family: Untuk mengatur jenis font
  • font-size: Untuk mengatur ukuran font
  • color: Untuk mengatur warna font
  • text-shadow: Untuk memberikan efek bayangan pada teks
  • Silakan simpan dan coba lihat hasilnya:WordPress Custom Forgot Password and Go To Link

Kode Full untuk mengatur semua sekaligus

Jika Anda ingin menggunakan semua kode CSS di atas sekaligus, Anda dapat menyalinnya dari kode highlight di bawah ini:

/* Logo above login form www.zaad.my.id */
.login h1 a {
background-image: url('https://www.zaad.my.id/alhamdulillah/uploads/2021/07/Asset-3@9x.png.webp');
	    background-size:130px !important;
	    height:130px;
	    width:130px !important;
	    padding-bottom: 10px;
}

/* Background image www.zaad.my.id */
body.login {
background-image: url('https://www.zaad.my.id/alhamdulillah/uploads/2021/07/Free-Logo-Branding-Mockup-PSD-scaled.jpg.webp');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}

/* Background untuk formulir login www.zaad.my.id */
.login form {
background: rgba(0, 0, 0, 0.7);
}

/* Border untuk formuir login www.zaad.my.id */
#loginform {border-radius:0px;
border-color:#262626;
box-shadow: 0 0 20px #0d0d0d;
}

/* Label untuk form login www.zaad.my.id */
.login label {
font-family:"Arial", arial black, sans-serif;
font-size: 14px;
color: #ffffff;
}

/* Username text box www.zaad.my.id*/
.login input[type="text"]{
background-color:rgba(0,0,0,.7);
color:#ffffff;
border-color:#0d0d0d;
}

/* Password text box www.zaad.my.id */
.login input[type="password"]{
background-color:rgba(0,0,0,.7);
color:#ffffff;
border-color:#0d0d0d;
}

/* Tombol login www.zaad.my.id */
.wp-core-ui .button-primary{
background-color:rgba(0, 0, 0, 0.8);
background-image:none;
border-color:#00e6e6;
border-bottom-color:#66ffff;
color:#00e6e6;
}

/* Tombol login hover www.zaad.my.id */
.wp-core-ui .button-primary:hover {
background-color:#00b3b3;
background-image:none;
border-color:#66ffff;
color:#000;
}

/* Lupa Sandi dan link ‘Pergi ke’ www.zaad.my.id */
.login #nav a, .login #backtoblog a {
font-family:"Arial", arial black, sans-serif;
font-size: 12px;
color: #00b3b3 !important;
text-shadow:none;
}

Sekian tutorial seputar desain tampilan login WordPress dan semoga bermanfaat untuk kita semua.

Tags: ,

Penulis: Mohammad Ridwanullah

Founder www.zaad.my.id | Author | Web Developer | Alumni Darul Ihsan Sana Daja & Ma'had Al-Ittihad Al-Islami Camplong. Melanjutkan pendidikan S1 Fakultas Syariah di LIPIA Jakarta. Melanjutkan pendidikan S2 di Fakultas Syariah jurusan Fiqh dan Ushul Fiqh di LIPIA Jakarta.

Artikel Terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

© 2021 – 2026 | www.zaad.my.id | All Rights Reserved
file-adduserslaptop-phoneclockdownloadmagnifiercrossmenulistchevron-leftchevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram