Mengenal Breadcrumbs: “Jejak Rekam” yang Bikin Pengunjung Gak Tersesat di Website

Portalone.net – Pernahkah kamu masuk ke sebuah website atau toko online, lalu asyik klik sana-sini sampai bingung, “Eh, tadi saya lewat mana ya buat balik ke kategori sebelumnya?”

Nah, di sinilah Breadcrumbs jadi pahlawan tanpa tanda jasa. Kalau kamu ingat cerita Hansel dan Gretel yang menyebarkan remah roti agar bisa pulang ke rumah, konsep itulah yang dipakai di dunia web. Breadcrumbs adalah navigasi kecil (biasanya ada di bagian atas halaman) yang menunjukkan posisi kamu saat ini di dalam struktur website.

Kenapa Breadcrumbs Itu Penting?

Bukan cuma buat gaya-gayaan atau mempercantik tampilan, breadcrumbs punya fungsi krusial:

1. Pengalaman Pengguna (UX): Pengunjung jadi tahu mereka ada di mana tanpa harus menekan tombol back berkali-kali.

2. Disukai Google (SEO): Google menggunakan breadcrumbs untuk memahami struktur website kamu. Hasilnya? Website kamu terlihat lebih rapi di hasil pencarian.

3. Mengurangi Bounce Rate: Orang jadi betah eksplorasi kategori lain karena navigasinya jelas.

Cara Memasang Breadcrumbs di WordPress (Tanpa Plugin Berat)

Banyak orang menyarankan pakai plugin, tapi kalau terlalu banyak plugin, website bisa jadi lemot. Kita akan coba cara yang lebih “pro” tapi tetap simpel, yaitu menggunakan Code Snippet dan sedikit sentuhan CSS.

Langkah 1: Memasukkan Fungsi PHP

Buka dashboard WordPress kamu, lalu masuk ke Appearance > Theme File Editor dan cari file functions.php. Atau lebih aman, gunakan plugin Code Snippets. Masukkan kode berikut:

function custom_wp_breadcrumbs() {
    // Tentukan separator Anda di sini
    $separator = ' <span class="separator">/</span> ';
    $home_title = 'Beranda';

    // Pastikan tidak tampil di halaman depan
    if ( ! is_front_page() ) {
        echo '<nav class="custom-breadcrumbs">';
        
        // Link Home
        echo '<a href="' . get_home_url() . '">' . $home_title . '</a>';
        echo $separator;

        if ( is_category() || is_single() ) {
            $categories = get_the_category();
            if ( ! empty( $categories ) ) {
                echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>';
                
                // Tambahkan separator lagi jika ini adalah halaman single post
                if ( is_single() ) {
                    echo $separator;
                    the_title();
                }
            }
        } elseif ( is_page() ) {
            the_title();
        } elseif ( is_search() ) {
            echo 'Hasil pencarian untuk: "' . get_search_query() . '"';
        }
        
        echo '</nav>';
    }
}

Langkah 2: Menampilkan Breadcrumbs di Layout

Setelah fungsinya dibuat, kita harus memanggilnya agar muncul di depan mata. Biasanya, breadcrumbs diletakkan di dalam file single.php atau page.php (tepat di atas judul artikel).

Copy-paste kode singkat ini:

<?php 
if ( function_exists( 'custom_wp_breadcrumbs' ) ) {
    custom_wp_breadcrumbs();
} 
?>

Langkah 3: Mempercantik dengan CSS

Biar nggak kelihatan kaku dan membosankan, kita beri sedikit bumbu CSS. Masuk ke Appearance > Customize > Additional CSS, lalu tempel kode ini:

/* 1. Gaya Dasar Container Breadcrumbs (Untuk Custom Code) */
.custom-breadcrumbs {
    background-color: #f8f9fa; /* Latar belakang abu-abu terang */
    padding: 12px 20px;
    border-radius: 8px; /* Sudut membulat */
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #6c757d; /* Warna teks untuk halaman aktif */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); /* Bayangan sangat halus */
    margin-bottom: 25px;
}

/* 2. Gaya untuk Tautan (Link) */
.custom-breadcrumbs a,
.yoast-breadcrumbs a, 
.woocommerce-breadcrumb a {
    color: #2563eb; /* Warna biru modern */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

/* Efek saat kursor diarahkan ke tautan */
.custom-breadcrumbs a:hover,
.yoast-breadcrumbs a:hover, 
.woocommerce-breadcrumb a:hover {
    color: #1d4ed8; /* Biru lebih gelap */
    text-decoration: underline;
}

/* 3. Gaya Khusus untuk Separator (Custom, Yoast, & WooCommerce) */
.separator, 
.yoast-separator, 
.woo-separator {
    margin: 0 10px; /* Jarak di sisi kiri dan kanan separator */
    color: #adb5bd; /* Warna abu-abu agar tidak mendominasi teks utama */
    font-size: 0.9em;
    user-select: none; /* Mencegah separator ikut terblok saat teks disalin */
}

Kesimpulan

Sekarang website kamu sudah punya sistem navigasi yang cerdas dan sedap dipandang! Breadcrumbs bukan sekadar teks kecil di pojok halaman, tapi adalah bentuk perhatian kamu kepada pengunjung agar mereka tidak “tersesat” saat menikmati kontenmu.

Gimana? Ternyata coding dikit-dikit nggak semenakutkan itu, kan? Selamat mencoba!