Script dan Cara Membuat Breadcrumb WordPress Tanpa Plugin

Sebelumnya saya sudah memberikan tutorial membuat breadcrumb di wordpress dengan bantuan plugin SEO. Kali ini saya akan memberikan cara membuat breadcrumb wordpress tanpa plugin dan beberapa scriptnya.

Baca juga : Cara membuat breadcrumb otomatis dengan mudah

Apa itu breadcrumb dan fungsinya ?

Apa Itu Breadcrumb ? Breadcrumb memiliki fungsi sebagai letak spesifik dimana si pembaca berada (alamat). Breadcrumb sebenarnya salah satu element penting dalam sebuah website, dan dapat meningkatkan kualitas seo (seo friendly).

Breadcrumb dibuat agar pembaca mudah mengetahui alamat dia membaca, terutama bot google dapat membaca struktur data pada website.

Contohnya seperti blog ini, blog ini menggunakan breadcrumb di paling atas sebuah artikel.

Panjangnya breadcrumbs (alamat) tergantung bagaimana kamu mengaturnya, semakin jauh letak artikel itu berada semakin panjang dan rumit pula breadcrumbnya. Menjadikan mesin pencari google tidak menampilkan hasil pencarian yang relevan.

Cara membuat breadcrumb wordpress tanpa plugin

Sampailah kita ke tutorialnya, disini kamu tingggal copy script yang ada dan ikuti panduan yang saya berikan.

Sebelum eksekusi tutorial ini, ada baiknya kamu melakukan backup data, mana tau terjadi kesalahan yang tidak kamu ketahui. Untuk backup data kamu baca Cara Backup dan Restore WordPress Dengan UpdraftPlus.

  1. Bukalah editor tema kamu, bisa kamu akses melalui tampilan>penyunting tema>functions.php
  2. copy dan letakkan script dibawah ini.
/**
* Fungsi untuk menampilkan breadcrumbs
* ditaruh di functions.php
* https://trenpedia.com/
*/

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>"';
    }
}

3. Terakhir, kamu tinggal copy <?php get_breadcrumb(); ?> di single.php atau page.php.

Script diatas adalah script sederhana yang dapat kamu gunakan di wordpress. Untuk penyesuaian atau mempercantik tampilan, kamu dapat menambahkan css, tapi menurut saya itu sudah lebih dari cukup.

Jika sudah berhasil, maka tampilan breadcrumb akan seperti gambar dibawah ini.

cara membuat breadcrumb wordpress tanpa plugin

Script css untuk mempercantik tampilan breadcrumb. sebagai contoh saja ya.

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

jika kamu menggunakan css kamu dapat memanggil breadcrumb dengan menggunakan script dibawah ini.

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

Script diatas terdapat pemanggilan class breadcrumb yang mana itu merupakan ccs yang telah kita buat sebelumnya. letakkan sript diatas di tempat yang sama yaitu single.php atau page.php

Catatan: sebenarnya kamu tidak perlu repot lagi untuk membuat breadcrumb jika menggunakan plugin Optimasi SEO seperi Rankmath Seo dan Yoast Seo kamu tinggal lakukan beberapa setting di plugin tersebut, dan tinggal meletakkan script yang sudah mereka sediakan.

Silahkan kamu kembangkan lagi jika dirasa masih kurang, itu saja dulu tutorial cara membuat breadcrumb wordpress tanpa plugin, see yaa!

3 pemikiran pada “Script dan Cara Membuat Breadcrumb WordPress Tanpa Plugin”

Tinggalkan komentar