Cara membuat breadcrumb di WordPress tanpa menggunakan plugin | Memasang breadcrumb memiliki banyak keuntungan, breadcrumb adalah link navigasi yang digunakan untuk menampilkan link serta sub link yang menuju sebuah halaman. Breadcrumb biasanya ditampilkan secara horizontal dan ditaruh pada bagian atas judul artikel, kegunaanya adalah untuk memudahkan pengunjung untuk mengetahui posisi mereka saat itu.

breadcrumbs

breadcrumb (Image: seoblog.com)

Dengan memasang breadcrumb maka pengujung akan lebih mudah untuk menjelajahi halaman website Anda, karena mereka bisa mengetahui sudah sedalam apa mereka menjelajahi halaman yang ada di website Anda dengan melihat struktur yang ada di breadcrumb. Anda bisa melihat contoh struktur breadcrumb website Jurnalweb yang ada di atas judul artikel ini, misalnya tertulis seperti ini (Home » Tutorials » Tutorial Cara Upload File Dengan PHP).

breadcrumbs jurnalweb

Contoh breadcrumb jurnalweb

Jelas terlihat disitu bahwa tulisan berjudul Tutorial Cara Upload File dengan PHP tersebut berada dibawah kategori Tutorials, Kalau link Tutorials di klik maka akan membuka halaman tutorial, sedangkan link Home berguna untuk kembali ke halaman depan website.

Disamping itu keuntungan lain dari pemasangan breadcrumb ini adalah disukai oleh mesin pencari, bahkan website yang memasang breadcrumb bisa menghasilkan tampilan yang berbeda pada halaman mesin pencari, khususnya pada bagian URL di mesin pencari, berikut contoh tampilan artikel jurnalweb di hasil pencarian Google untuk kata kunci “cara upload file dengan php”.

SERP hasil pencarian google

SERP hasil pencarian google

Terlihat pada gambar diatas perbedaan website yang menggunakan breadcrumb dan yang tidak, website yang menggunakan breadcrumb terlihat strukturnya lebih rapih dengan ditandai tanda panah ( > ) sedangkan yang tidak maka akan tercetak semua URLnya, namun karena URL tersebut biasanya panjang maka disingkat dengan memberikan titik titik ( /…/ ).

Cara membuat breadcrumb di WordPress tanpa plugin

Menampilkan breadcrumb pada website yang menggunakan wordpress sangatlah mudah, berikut ini kami jabarkan langkah-langkahnya untuk Anda para pengunjung yang kami hormati.

Membuat fungsi breadcrumb

Langkah pertama adalah membuat sebuah fungsi get_breadcrumb() yang berisi perintah untuk menampilkan breadcrumb, fungsi ini nantinya harus Anda tambahkan pada file functions.php yang berlokasi di dalam folder theme yang Anda gunakan.

/**
* Fungsi untuk menampilkan breadcrumbs
* ditaruh di functions.php
*/

function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "  »  ";
        the_category(' • ');
        if (is_single()) {
            echo "   »   ";
            the_title();
        }
    } elseif (is_page()) {
        echo "  »  ";
        echo the_title();
    } elseif (is_search()) {
        echo "  »  Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Memanggil fungsi untuk menampilkan breadcrumb

Selanjutnya adalah memanggil fungsi tersebut pada halaman single.php yang juga berlokasi di dalam folder theme Anda,  Untuk posisi penempatannya bisa Anda sesuaikan dengan theme Anda, namun biasanya ditaruh diatas judul tulisan, itu berarti sebelum <?php the_title(); ?> yang ada di single.php.

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Agar tampilan breadcrumb terlihat lebih menarik Anda bisa mendesainnya dengan CSS dengan menambahkan script berikut ini pada file style.css yang ada di dalam folder theme yang Anda gunakan pada website tersebut.

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}

Agar tampilan yang lebih rapih tentu Anda harus menyesuaikan dengan desain theme yang Anda gunakan. Semgoa berguna..