(ASK) Cara Buat Hirarki Seperti Ini Bagaimana Ya?

mamehru
Question

Beberapa kali saya melihat ada blog atau web yang pakai hirarki seperti ini di tiap postnya.

Cara buatnya gimana ya gan? Saya pakai Wordpress.

Ini saya ambil contohnya di tokopedia: https://prnt.sc/qo2em9

Makasih gan.

masrei
Answer

Ya gan, hirarki tersebut namanya Breadcrumbs.

Untuk WordPress bisa menggunakan plugin, salah satunya Breadcrumb NavXT.

masrei
Answer

1. Membuat Breadcrumb di Wordpress dengan Breadcrumb NavXT

Cara ini cocok bila menggunakan plugin selain Yoast SEO, misal AIO.

Karena, bila menggunakan Yoast, breadcrumb sudah termasuk dalam salah satu pluginnya.

Pertama, install dan aktifkan plugin Breadcrumb NavXT.

Kedua, atur plugin di Settings » Breadcrumb NavXT.

Pada bagian Breadcrumbs Separator bisa Anda pilih. Biasanya yang digunakan “/” atau “»”. Beberapa divider lain yang bisa dicoba ada pada tabel berikut.

Divider

HTML 5 Entitiy Name

/

 >

 <

 ›

»

 »

Ketiga, tambahkan kode berikut di Wordpress Anda.

<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”http://schema.org/”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
​</div>

Caranya: Theme Editor » paste kode di atas di single.php.

Keempat, Update File.

Hasilnya, seperti gambar berikut.

Agar lebih rapi, Anda bisa menambahkan CSS berikut ini.

.breadcrumbs {
               background-color:white;
               padding:1rem;
}

masrei
Answer

2. Membuat Breadcrumb di Wordpress dengan Yoast SEO

Pertama, install dan aktifkan plugin Yoast SEO.

Kedua, ke pengaturan Yoast » Search Appereance » Breadcrumbs » Pilih Enabled dan Taxonomy Post: Category.

Ketiga, tambahkan kode berikut pada single.php. Lalu, Update File.
Proses ini sama dengan Breadcrumb NavXT.

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Hasilnya, seperti ini.

Bila Anda ingin menambahkan CSS, tambahkan CSS dengan selector id breadcrumbs. Berikut adalah hasil setelah saya tambahkan CSS.

#breadcrumbs {
               background-color:white;
               padding:1rem;
}

Semoga bermanfaat!

mamehru
Answer

Terima kasih gan, siap saya coba.

Fungsi breadcrumbs sebenarnya selain hirarki (seperti SS), apa gan?

masrei
Answer

Fungsi breadcrumb untuk navigasi bagi pengunjung di halaman mana dia berada.

Nantinya, hasil di SERP juga akan sedikit berbeda bila tidak menggunakan breadcrumbs. Berikut ini contohnya:

Please login to reply