Tampilan dan Kustomisasi Plus UI WP

Plus UI memiliki sistem tampilan yang mengutamakan mode terang, mode gelap, dan warna aksen. Versi WordPress menambahkan panel Appearance di header dengan pilihan Light, Dark, System, dan Theme.

Light Mode

Light menggunakan background terang dan teks gelap. Mode ini menjadi pilihan yang aman untuk artikel panjang dan dokumentasi.

Dark Mode

Dark mengubah background, card, border, dan teks menggunakan variabel warna theme. Hindari menulis warna hitam/putih secara hard-coded di konten karena dapat membuat elemen tidak terbaca pada salah satu mode.

System Mode

System mengikuti preferensi perangkat melalui media query:

@media (prefers-color-scheme: dark){
  /* browser/perangkat sedang memilih tema gelap */
}

Theme color

Menu Theme menyediakan beberapa warna aksen. Pilihan disimpan pada browser sehingga pengunjung dapat mempertahankan warna favorit tanpa login.

Variabel CSS

Plus UI memakai CSS variables agar perubahan warna dapat dilakukan konsisten.

:root{
  --linkC:#0b57d0;
  --linkB:#0b57d0;
  --contentB:#ffffff;
  --bodyC:#202124;
}

Logo

Gunakan WordPress Custom Logo. Pastikan logo memiliki versi yang tetap terbaca pada mode gelap. Jika logo berbentuk teks hitam permanen, pertimbangkan SVG/PNG transparan dengan kontras yang cukup.

Font

Theme mengutamakan sistem font ringan. Bila memakai Google Fonts, muat hanya weight yang benar-benar digunakan.

wp_enqueue_style(
    'site-font',
    'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap',
    array(),
    null
);

Untuk performa maksimum, font dapat di-host lokal selama lisensinya mengizinkan.

Ukuran logo dan header

Jangan memperbesar logo dengan gambar resolusi sangat besar. Atur dimensi visual melalui CSS dan gunakan file yang proporsional.

Notification bar

Teks notification bar dan tombol dapat diubah dari Customizer. Gunakan kalimat pendek karena bar ini juga tampil di mobile.

Profile, Bookmark, Translate

Tiga fitur utilitas dapat diaktifkan/dinonaktifkan melalui Customizer. Search dan Appearance tetap menjadi fungsi utama di header.

Custom text Bahasa Indonesia

Theme sudah memiliki text domain. Untuk string WordPress, terjemahan ideal menggunakan file bahasa. Untuk label yang berasal dari setting theme, isi langsung dalam Bahasa Indonesia.

esc_html__('Baca selengkapnya', 'plus-ui-wp');

Responsive

Setelah mengubah header, selalu uji minimal pada lebar 360px, 768px, 1024px, dan desktop lebar. Elemen yang terlihat bagus di desktop belum tentu muat di layar mobile.

Contoh custom CSS aman

/* Sedikit memperhalus radius kartu tanpa mengubah struktur */
.itemFt,
.post-card,
.widget{
  border-radius:12px;
}

Kontras warna

Warna aksen yang bagus pada background putih belum tentu cukup kontras di mode gelap. Periksa teks link, badge, tombol outline, border input, dan ikon. Targetkan kontras yang nyaman untuk teks kecil.

Warna status

Alert success, warning, info, dan error sebaiknya tidak semuanya mengikuti warna aksen utama. Warna status memiliki makna tersendiri dan stylesheet Plus UI sudah memberikan palet terpisah.

Typography scale

Jangan memperbesar semua heading. Hierarki lebih penting daripada ukuran besar. Judul artikel harus dominan, H2 cukup jelas sebagai section, dan body text nyaman dibaca 16–18px tergantung font.

Line-height dan panjang baris

Artikel teknis lebih mudah dibaca ketika baris tidak terlalu panjang. Container artikel Plus UI membatasi lebar konten; hindari custom CSS yang membuat teks memenuhi seluruh layar desktop 1600px.

Code font

Untuk code block, gunakan monospace. Anda dapat menentukan fallback agar tidak memerlukan download font eksternal.

code, pre{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

Spacing

Perubahan spacing harus konsisten. Jika jarak antar card 24px, jangan membuat satu section 7px dan section lain 43px tanpa alasan. Gunakan token/variable bila ingin redesign besar.

Border dan shadow

Plus UI cenderung memakai border lembut dan shadow ringan. Shadow yang terlalu tebal membuat tampilan jauh dari referensi dan dapat terlihat berat pada mode gelap.

Custom theme palette

Jika ingin menambah warna theme baru, buat satu konfigurasi yang mengubah variable utama, bukan menyalin seluruh stylesheet.

html[data-theme="ocean"]{
  --linkC:#0077b6;
  --linkB:#0077b6;
}

Logo gelap/terang

Bila brand memiliki dua versi logo, Anda dapat menampilkan logo berbeda berdasarkan class mode. Alternatif yang lebih sederhana adalah memakai logo yang tetap memiliki kontras baik di kedua background.

Customizer vs Site Editor

Theme ini menggunakan pola classic theme sehingga banyak setting tersedia melalui Customizer. Jangan mengharapkan semua kontrol muncul di Full Site Editor seperti block theme.

Troubleshooting tampilan