Panduan Lengkap, Tutorial Praktikum, dan Implementasi pada Website WordPress

---

🟢 1. Pendahuluan

Pada saat mengakses halaman administrator WordPress melalui URL:

https://agun.my.id/wp-admin

atau

https://agun.my.id/wp-login.php

pengguna akan melihat halaman login bawaan WordPress yang tampilannya standar dan sama pada hampir semua website WordPress.

Halaman login bawaan tersebut memiliki beberapa kekurangan, antara lain:

• Kurang menarik secara visual
• Tidak mencerminkan identitas institusi/perusahaan
• Tidak memiliki branding kampus atau organisasi
• Kurang profesional untuk website resmi
• Tidak memberikan pengalaman pengguna (User Experience) yang maksimal

Untuk mengatasi hal tersebut, WordPress menyediakan berbagai plugin kustomisasi login, salah satunya adalah:

🔹 LoginPress

Plugin LoginPress memungkinkan administrator mendesain ulang halaman login WordPress secara visual tanpa harus melakukan coding.

---

🖼️ Ilustrasi Halaman Login WordPress

6

---

🟢 2. Mengenal Plugin LoginPress

📌 Apa Itu LoginPress?

LoginPress adalah plugin WordPress yang digunakan untuk:

• Mengubah tampilan login WordPress
• Menambahkan logo institusi
• Mengubah background
• Mengatur warna dan font
• Membuat login lebih profesional
• Menampilkan branding organisasi

---

📌 Fitur LoginPress

Fitur	Keterangan
Custom Logo	Mengganti logo WordPress
Background Image	Menambahkan gambar latar
Background Video	Menampilkan video pada login
Custom CSS	Menambahkan CSS sendiri
Google Fonts	Menggunakan font modern
Login Error Message	Mengatur pesan kesalahan
Welcome Message	Menampilkan pesan selamat datang
Live Preview	Melihat hasil secara langsung

---

🟢 3. Manfaat Kustomisasi Halaman Login

🔍 Dari Sisi Branding

Misalnya website kampus:

unlip.ac.id

akan terlihat lebih profesional jika login administrator menampilkan:

• Logo Universitas
• Warna identitas kampus
• Background gedung kampus
• Pesan selamat datang

---

🔍 Dari Sisi Keamanan

Walaupun LoginPress bukan plugin keamanan, halaman login yang profesional dapat:

• Mengurangi kebingungan pengguna
• Memberikan identitas website yang jelas
• Meminimalkan kesalahan login

---

🟢 4. Persiapan Praktikum

📌 Kebutuhan Sistem

Komponen	Versi Minimum
WordPress	6.x
PHP	8.0
Browser	Chrome / Edge
Plugin	LoginPress

---

📌 Data Yang Harus Disiapkan

Logo

Format:

PNG Transparan

Ukuran:

300 x 300 px

Background

Format:

JPG / PNG

Resolusi:

1920 x 1080 px

---

🟢 5. Instalasi Plugin LoginPress

Langkah 1

Masuk ke Dashboard WordPress

/wp-admin

---

Langkah 2

Pilih:

Plugins
→ Add New Plugin

---

Langkah 3

Cari:

LoginPress

---

Langkah 4

Klik:

Install Now

---

Langkah 5

Klik:

Activate

---

🖼️ Ilustrasi Instalasi Plugin

5

---

🟢 6. Mengenal Menu LoginPress

Setelah aktif akan muncul menu:

LoginPress

Struktur menunya:

LoginPress
├── Customizer
├── Settings
├── Import/Export
├── Templates
└── Help

---

📊 Fungsi Setiap Menu

Menu	Fungsi
Customizer	Mendesain halaman login
Settings	Pengaturan umum
Templates	Template siap pakai
Import/Export	Backup konfigurasi
Help	Dokumentasi

---

🟢 7. Membuka LoginPress Customizer

Klik:

LoginPress
→ Customizer

Tampilan akan menyerupai:

Theme Customizer WordPress

Dengan:

• Preview Login
• Panel Pengaturan
• Live Update

---

🖼️ Diagram Arsitektur LoginPress

Admin
   │
   ▼
LoginPress Customizer
   │
   ├── Logo
   ├── Background
   ├── Form
   ├── Button
   ├── Font
   └── Footer
   │
   ▼
Custom Login Page

---

🟢 8. Mengubah Logo Login

📌 Tujuan

Mengganti logo WordPress menjadi logo institusi.

---

Langkah-langkah

Pilih:

Logo

Klik:

Upload Logo

Pilih file:

logo-unlip.png

---

Pengaturan Yang Disarankan

Pengaturan	Nilai
Width	150 px
Height	Auto
Margin Bottom	20 px

---

🖼️ Contoh Logo Kampus

5

---

🟢 9. Mengubah Background Login

📌 Background Warna

Menu:

Background

Pilih:

Solid Color

Contoh:

#003366

---

📌 Background Gambar

Klik:

Upload Background

Pilih gambar kampus.

---

Pengaturan Terbaik

Setting	Nilai
Size	Cover
Repeat	No Repeat
Position	Center Center
Attachment	Fixed

---

🖼️ Contoh Background Profesional

5

---

🟢 10. Mengatur Form Login

Menu

Login Form

---

Pengaturan Form

Border Radius

10 px

Background Form

White

Shadow

0px 4px 15px rgba(0,0,0,0.3)

---

Hasil

Form terlihat:

• Modern
• Elegan
• Responsive

---

🟢 11. Mengubah Tombol Login

Menu:

Button Beauty

---

Contoh Pengaturan

Parameter	Nilai
Warna Tombol	#0066CC
Hover	#004999
Radius	8 px
Font Size	16 px

---

Sebelum

[ LOG IN ]

Standar WordPress

---

Sesudah

[ MASUK KE SISTEM ]

Lebih profesional.

---

🟢 12. Menambahkan Pesan Selamat Datang

Menu:

Welcome Text

Contoh:

Selamat Datang di Sistem Informasi Akademik STIE PASIM. Silakan login menggunakan akun yang telah diberikan oleh administrator.

---

🟢 13. Mengubah Font

Menu:

Typography

---

Font Yang Direkomendasikan

Font	Kesan
Poppins	Modern
Montserrat	Profesional
Roboto	Bersih
Open Sans	Formal

---

🟢 14. Menambahkan CSS Kustom

Bagi pengguna yang ingin tampilan lebih unik.

Menu:

Custom CSS

Contoh:

.loginpress-login .button-primary{
    background:#0066cc;
    border:none;
    border-radius:10px;
}

.loginpress-login .button-primary:hover{
    background:#004999;
}

---

🟢 15. Studi Kasus Implementasi

Desain Yang Digunakan

Logo

Logo Unlip

Background

Foto gedung kampus

Warna Utama

Biru Tua
Putih
Emas

---

Struktur Tampilan

+--------------------------------+
|                                |
|      FOTO GEDUNG KAMPUS         |
|                                |
|      [ LOGO KAMPUS ]       |
|                                |
|      Username                  |
|      Password                  |
|                                |
|      [ LOGIN ]                 |
|                                |
+--------------------------------+

---

🟢 16. Best Practice Desain Login

Yang Harus Dilakukan

✅ Gunakan logo resmi

✅ Gunakan warna identitas institusi

✅ Gunakan background berkualitas tinggi

✅ Gunakan font modern

✅ Buat tampilan sederhana

---

Yang Harus Dihindari

❌ Terlalu banyak warna

❌ Background terlalu ramai

❌ Font sulit dibaca

❌ Animasi berlebihan

❌ Ukuran logo terlalu besar

---

🟢 17. Evaluasi Hasil

Checklist

Komponen	Status
Logo tampil	□
Background tampil	□
Tombol sesuai	□
Font sesuai	□
Responsive	□
Branding kampus terlihat	□

---

💻 Praktikum Mandiri

Tugas 1

Buat halaman login WordPress dengan:

• Logo kampus
• Background gedung kampus
• Warna biru dominan

---

Tugas 2

Buat tampilan login untuk:

• Sistem Akademik
• E-Learning
• Perpustakaan Digital

menggunakan desain berbeda.

---

Tugas 3

Tambahkan CSS kustom sehingga tombol login memiliki efek hover yang menarik.

---

🎯 Latihan Diskusi

Pertanyaan 1

Apa keuntungan menggunakan LoginPress dibandingkan mengubah halaman login melalui coding manual?

---

Pertanyaan 2

Mengapa branding pada halaman login penting bagi institusi pendidikan?

---

Pertanyaan 3

Apa dampak desain login yang baik terhadap pengalaman pengguna (User Experience)?

---

Pertanyaan 4

Bagaimana cara membuat halaman login WordPress yang profesional namun tetap ringan dan cepat diakses?

---

📌 Kesimpulan

Plugin LoginPress merupakan solusi yang sangat efektif untuk melakukan kustomisasi halaman login WordPress tanpa perlu kemampuan pemrograman. Dengan LoginPress, administrator dapat membuat halaman login yang lebih profesional, modern, responsif, dan sesuai dengan identitas organisasi atau kampus. Implementasi yang tepat akan meningkatkan branding institusi, kenyamanan pengguna, serta memberikan kesan profesional sejak pertama kali pengguna mengakses sistem melalui halaman login WordPress.