Membuat Breadcrumb di WordPress Tanpa Menggunakan Plugin

Membuat Breadcrumb di Wordpress

Gimana cara Membuat Breadcrumb di WordPress ya? Apa itu breadcrumbs? Gue akan jelasin ke kalian di artikel kali ini dengan lengkap. Karena, banyak juga yang sudah menggunakan plugin yoast, tapi masih bingung bagaimana cara memasang breadcrumbs yoast ini sendiri? Nah, karena permasalahan itu lah ahirnya gue coba sharing sama kalian gimana membuat breadcrumb tanpa harus menggunakan plugin.

Membuat Breadcrumb di WordPress

Cara Membuat Breadcrumb di WordPress

Langkah pertama, silahkan copy kode di bawah ini dan simpan di file functions.php

//breadcrumbs if ( ! function_exists( ‘breadcrumbs’ ) ) : function breadcrumbs() { $delimiter = ‘<i class=”fa fa-angle-right”></i>’; $tagicon = ‘<i class=”fa fa-tag”></i>’; $home = ‘Home’; echo ‘<div itemscope=”itemscope” itemtype=”http://data-vocabulary.org/Breadcrumb”>’; global $post; echo ‘ <i class=”fa fa-home”></i> <a itemprop=”url” title=”Home” target="_blank" href=”‘.home_url( ‘/’ ).'”><span itemprop=”title”>’.$home.'</span></a> ‘; $cats = get_the_category(); if ($cats) { foreach($cats as $cat) { echo $tagicon . “<span itemscope=\”itemscope\” itemtype=\”http://data-vocabulary.org/Breadcrumb\”> <a itemprop=\”url\” title=\”$cat->name\” target="_blank" href=\””.get_category_link($cat->term_id).”\” ><span itemprop=\”title\”>$cat->name</span></a> </span>”; } } echo $delimiter . the_title(‘ <span>’, ‘</span>’, false); echo ‘</div>’; } endif;

Langkah kedua, silahkan copy kode di bawah ini dan simpan di filesingle.phpdi atas kode title post.

<div id=”breadcrumbs”>

<?php breadcrumbs(); ?> </div>

Langkah ketiga, mengatur tampilan breadcrumbs dengan CSS, gue sendiri menggunakan CSS sederhana seperti di bawah ini, kalian bisa mengatur tampilannya sesuai selera kalian dengan CSS. Silahkan simpan di filestyle.css

#breadcrumbs{font-weight:bold}

#breadcrumbs a{font-weight:normal}

Apa Itu Breadcrumb?

Breadcrumbs biasanya muncul horizontal di bagian atas halaman web, sering di bawah bar judul atau header. Mereka menyediakan link kembali ke halaman sebelumnya setiap pengguna navigasikan melalui untuk sampai ke halaman saat ini atau di situs-hirarkis struktur-halaman induk yang sekarang.

Sudah jelas kan breadcrumb merupakan sebuah navigasi yang tedapat pada halaman situs memiliki fungsi untuk melacak setiap halaman dan postingan sehingga memudahkan pembaca untuk menjelajahi situs berdasarkan kategori yang ada, serta pengunjung tidak akan bingung ketika ingin mencari data yang terdapat pada sebuah situs karena ia bisa memilih topik dengan mudah juga bisa kembali ke halaman utama

Apa Fungsi Breadcrumb Pada Situs?

Template wordpress sendiri secara default tidak memiliki fasilitas breadcrumb artinya kita sendiri yang harus memasangnya. Fungsi breadcrumb pada search engine akan memudahkan mesin pencari untuk merayapi setiap hasil postingan sebuah situs untuk disesuaikan dengan pencarian yang ada sehingga memudahkan para pencari informasi menemukan sumber referensi secara akurat karena dalam hasil pencarian situs akan ditampilkan snipet.

Sampai disini, kalian bisa ya? Lantas bagaimana untuk blogspot? Kalian bisa lihat cara membuat breadcrumb di blogspot yang sudah pernah gue buatkan. Pertanyaannya, apakah kalian sudah membuat breadcrumb di wordpress?