Kustomisasi Menu Navigasi Plus UI

Header Plus UI terdiri dari beberapa lapisan: tombol menu, identitas situs, menu navigasi, dan utility actions. Agar hasil WordPress tetap menyerupai demo Blogger, setiap elemen sebaiknya memiliki tugas yang jelas dan tidak saling bertabrakan.

Struktur header

Search

Tombol search membuka antarmuka pencarian. WordPress memproses query melalui URL ?s=kata+kunci.

https://example.com/?s=wordpress

Profile

Popup profil mengambil informasi author/admin WordPress, termasuk avatar, nama, dan bio. Lengkapi profile dari Users → Profile.

Bookmark

Bookmark pada theme disimpan di localStorage browser. Artinya daftar favorit bersifat lokal pada perangkat tersebut dan tidak memerlukan akun.

const saved = JSON.parse(localStorage.getItem('pui_bookmarks') || '[]');
localStorage.setItem('pui_bookmarks', JSON.stringify(saved));

Translate

Menu translate menyediakan pilihan bahasa. Terjemahan otomatis bergantung pada layanan penerjemahan browser/pihak ketiga. Untuk SEO multibahasa yang memiliki URL berbeda per bahasa, gunakan plugin multilingual khusus.

Appearance

Appearance memiliki pilihan Light, Dark, System, dan Theme. Theme color mengubah aksen tanpa mengganti keseluruhan layout.

Library SVG

Theme memuat file JSON ikon dan mengambil SVG berdasarkan nama.

function pui_icon($name, $echo = true) {
    $icons = pui_icons_library();
    $key   = sanitize_key($name);
    $svg   = isset($icons[$key]) ? $icons[$key] : '';

    if ($echo) {
        echo $svg;
    }
    return $svg;
}

Menu sekunder

Bar di bawah header cocok untuk Dokumentasi, Tautan, kategori utama, atau fitur khusus. Jangan mengisinya terlalu panjang; pada layar sempit bar dapat dibuat horizontal-scroll seperti Plus UI.

Mobile drawer

Pada mobile, tombol hamburger membuka navigation drawer. Pastikan target sentuh minimal cukup besar dan tombol close terlihat jelas.

WordPress menu locations

register_nav_menus(array(
    'primary' => __('Primary Menu', 'plus-ui-wp'),
    'mobile'  => __('Mobile Menu', 'plus-ui-wp'),
    'footer'  => __('Footer Menu', 'plus-ui-wp'),
));

Tips agar sama dengan demo

1. Gunakan logo yang proporsional.
2. Jangan membuat label menu terlalu panjang.
3. Pertahankan urutan utility icons.
4. Uji popup agar tidak keluar viewport.
5. Uji mode gelap pada semua popup.
6. Pastikan menu mobile tidak tertutup admin bar saat login.

Z-index popup

Profile, bookmark, translate, dan appearance adalah layer mengambang. Jika salah satu tertutup carousel atau admin bar, masalah biasanya berada pada stacking context. Hindari memberi z-index:999999 ke semua elemen; tentukan layer secara terstruktur.

:root{
  --z-header:100;
  --z-overlay:150;
  --z-drawer:200;
}

Menutup popup saat klik di luar

Interaksi yang baik memastikan hanya satu popup utilitas terbuka dan popup tertutup ketika pengguna klik di area lain.

document.addEventListener('click', (event) => {
  if (!event.target.closest('.pui-head-action')) {
    document.documentElement.classList.remove('profile-open','bookmark-open','translate-open');
  }
});

Keyboard navigation

Pengguna keyboard harus dapat fokus pada tombol, membuka popup dengan Enter/Space, berpindah ke link di dalam popup, dan menutupnya dengan Escape.

Focus style

.pui-head-action:focus-visible{
  outline:2px solid var(--linkC);
  outline-offset:3px;
}

Translate untuk SEO

Translate otomatis di header cocok sebagai alat bantu pembaca, tetapi tidak membuat halaman bahasa baru yang dapat diindeks secara independen. Bila targetnya SEO internasional, gunakan URL seperti /en/ dan /id/ dengan plugin multilingual yang mengelola hreflang.

Bookmark berbasis akun

Jika suatu saat bookmark harus sinkron antar perangkat, data dapat disimpan sebagai user meta. Fitur itu membutuhkan login dan endpoint AJAX/REST yang memeriksa nonce.

update_user_meta(
    get_current_user_id(),
    'pui_bookmarks',
    array_map('absint', $post_ids)
);

Profile popup untuk website multi-author

Pada blog multi-author, popup header dapat menampilkan user yang sedang login atau identitas situs. Jangan menganggap author artikel selalu sama dengan pemilik situs.

Menu aktif

WordPress menambahkan class seperti current-menu-item dan current-menu-ancestor. Gunakan class tersebut untuk state aktif, bukan membandingkan URL dengan JavaScript.

Admin bar saat login

Ketika admin login, WordPress menambahkan admin bar 32px/46px. Header sticky perlu memberikan offset agar tidak tertutup pada desktop atau mobile.

Checklist header

• Tidak ada ikon yang bertumpuk.
• Popup tidak keluar viewport.
• Drawer mobile dapat discroll.
• Search dapat ditutup.
• Dark mode konsisten.
• Translate tidak menutupi Appearance.
• Bookmark count tidak menggeser layout.