Cara Memasang Breadcrumbs di WordPress

Apa itu Breadcrumb?

Dikutip dari wikipedia, breadcrumb atau breadcrumb trail adalah elemen kontrol grafis yang di gunakan sebagai alat bantu navigasi pada sebuah antarmuka. Memungkinkan pengguna untuk melacak lokasi mereka dalam sebuah program, dokumen atau website. Istilah breadcrumb berasal dari sebuah dongeng Hansel dan Grettel dimana kedua anak meninggalkan jejak breadcrumb(remah roti) membentuk jalan setapak untuk kembali ke rumah mereka.

Breadcrumbs biasanya di tempatkan secara horizontal di bawah header atau menu navigasi utama. Breadcrumb menyediakan tautan kembali ke setiap halaman sebelumnya dan menunjukan lokasi saat ini pada website. Memasang breadcrumb pada wordpress tidaklah sulit karena ada banyak plugin yang memudahkan kita dalam memasang breadcrumb. Ada beberapa plugin yang populer salah satunya Breadcrumb NavXT atau breadcrumb dari plugin Yoast SEO.

Cara Memasang Breadcrumbs di WordPress

Pertama masuk ke menu Plugins > Add New, Carilah plugin Yoast SEO kemudian install, setelah terinstall aktifkan plugin dengan mengklik tombol “Activate” lalu masuk ke menu SEO > Features dan enable Advanced settings pages , klik Save changes.

cara memasang breadcrumb di wordpress

Masih di menu SEO, pilih menu Advanced, kemudian Enable Breadcrumbs, di bagian Taxonomy to show in breadcrumbs for post types bisa di pilih sesuai kebutuhan, lalu klik Save changes. Untuk lebih jelasnya lihatlah gambar di bawah ini.

cara memasang breadcrumb di wordpress

Langkah selanjutnya masuklah ke menu Apperance > Editor pilih Theme Header(header.php). Copy dan paste kode di bawah ini tepat di bawah kode navigasi utama lalu klik Update File.

<?php if(!is_front_page()) {			
	if (function_exists('yoast_breadcrumb')){
		yoast_breadcrumb('<div class="breadcrumbs">', '</div>');
	}
} ?>

Lihat gambar di bawah ini. Ingat setiap tema pasti berbeda, ini hanyalah contoh.

edit themes di wordpress

Cara memasang breadcrumb dengan plugin Breadcrumb NavXT hampir sama seperti cara di atas bedanya setelah menginstal dan mengaktifkan plugin kita langsung ke menu Apperance > Editor. Copy dan paste kode di bawah ini seperti cara sebelumnya.

<?php if(!is_front_page()) : ?>
	<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
		<?php bcn_display(); ?>
	</div>
<?php endif; ?>

Untuk melihat hasilnya masuklah ke salah satu artikel yang ada di website mu. Saya sendiri merekomendasikan menggunakan plugin Yoast SEO karena fiturnya banyak 🙂

Contoh breadcrumb pada website dan hasil penelusuran google.

contoh breadcrumb pada website dan hasil penelusuran google

Selamat mencoba.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *