Mengatur Breadcrumb dan Style (WordPress Theme)
Cara menampilkan atau menyembunyikan Breadcrumb global, mengatur alignment dan warna di tab Style, serta override per halaman lewat Page Layout.
Breadcrumb menampilkan jejak navigasi (misalnya Home / Blog / Judul Tutorial) supaya pengunjung tahu mereka sedang berada di bagian mana. Tema TokoPressID menghasilkan breadcrumb otomatis berdasarkan struktur halaman, kategori, dan hierarki parent page.
Anda bisa mematikannya secara global, mengatur warnanya, atau menyembunyikannya khusus di homepage lewat Theme Settings: Templates → Template - Homepage.
Tutorial ini berlaku untuk semua tema WordPress by TokoPressID, termasuk LarisManis, Adora, Salvia, LarisGram, LarisDigital, dan tema TokoPressID lainnya dengan struktur Theme Settings yang sama.
Cara membuka pengaturan
TokoPressID → Theme Settings → Theme Settings: Sections → Breadcrumb
Opsi Settings
| Label | Fungsi |
|---|---|
| HIDE Breadcrumb Globally In All Pages | Mematikan breadcrumb di seluruh situs |
Jika tidak dicentang, breadcrumb tampil di halaman yang mendukungnya (kecuali override lain).
Override per halaman
Saat mengedit post atau page, metabox Page Layout dapat menyembunyikan breadcrumb untuk halaman itu saja.
Sembunyikan di homepage
Di Theme Settings: Templates → Template - Homepage, centang HIDE Breadcrumb on Homepage jika Anda tidak ingin jejak navigasi di homepage.
Opsi Style
Tab Style hanya berisi opsi jika breadcrumb aktif (tidak disembunyikan global). Jika dimatikan, muncul pesan: No style settings available because breadcrumb is disabled.
| Label | Fungsi |
|---|---|
| Alignment | Kiri, tengah, kanan |
| Background Color / [Dark] … | Warna latar bar breadcrumb |
| Text Color / [Dark] … | Warna teks item |
| Link Color / (Hover) | Warna tautan (+ [Dark]) |
| Separator Color | Warna pemisah (/) |
| Font Size | Ukuran font (slider rem) |
Langkah contoh
- Pastikan HIDE Breadcrumb Globally tidak dicentang.
- Buka tab Style, set Alignment ke kiri.
- Sesuaikan Link Color agar kontras dengan latar header.
- (Opsional) Di Template - Homepage, centang HIDE Breadcrumb on Homepage.
- Save Changes, buka satu tutorial blog di frontend untuk verifikasi.
Catatan
- Breadcrumb bergantung pada struktur konten: halaman tanpa parent mungkin hanya menampilkan
Home / Judul. - Plugin SEO pihak ketiga kadang menyuntikkan breadcrumb sendiri; nonaktifkan salah satu sumber untuk menghindari duplikasi.
- Pada skema warna Dark di General, gunakan field [Dark] agar kontras tetap baik.
Troubleshooting
| Gejala | Tindakan |
|---|---|
| Breadcrumb tidak muncul sama sekali | Cek hide global, hide homepage, dan metabox Page Layout |
| Duplikat breadcrumb | Nonaktifkan breadcrumb plugin SEO atau tema (pilih satu) |
| Style tidak tersimpan | Pastikan breadcrumb tidak di-hide; simpan Theme Settings |