Cara Membuat Breadcrumb Tanpa Plugin di WordPress

Breadcrumb merupakan sistem navigasi menu yang dapat mempermudah pengunjung website atau blog agar mudah dalam melihat ‘lokasi’ dimana dan dari page mana saja dia melakukan browsing di website atau blog kamu. Struktur breadcrumb pada umumnya seperti ini “Home > Kategori Artikel > Judul Artikel”.

Breadcrumb juga berfungsi untuk menyediakan fitur on-click access ke level halaman website diatasnya, sekaligus menghindari pengunjung tersesat karena terlalu dalam browsing website. Dengan menggunakan breadcrumb, kita dapat memudahkan pengunjung dalam browsing website kita, karena struktur website yang kita punya memiliki tingkatan yang baik.

Jika melihat fungsinya, maka sebuah website baiknya memiliki breadcrumb. Ada 2 cara yang bisa kamu lakukan untuk membuat breadcrumb pada wordpress :

1. Menggunakan bantuan Plugin
2. Membuat breadcrumb tanpa bantuan plugin

Yang dibahas kali ini adalah cara yang kedua, membuat breadcrumb tanpa menggunakan plugin. Untuk membuat breadcrumb di wordpress tanpa plugin, kamu membutuhkan kode PHP dan CSS untuk mempercantik tampilannya. Berikut kode PHP yang bisa kamu buat di website kamu :

//Start Build our breadcrumb
function whello_standard_breadcrumbs() {
/* === OPTIONS === */
$text['home'] = 'Home'; // text for the 'Home' link
$text['category'] = '"%s"'; // text for a category page
$text['search'] = 'Search Results for "%s"'; // text for a search results page
$text['tag'] = 'Tagged "%s"'; // text for a tag page
$text['author'] = 'Posted by %s'; // text for an author page
$text['404'] = 'Error 404'; // text for the 404 page

$show_current = 1; // 1 - show current post/page/category title in breadcrumbs, 0 - don't show
$show_on_home = 0; // 1 - show breadcrumbs on the homepage, 0 - don't show
$show_home_link = 1; // 1 - show the 'Home' link, 0 - don't show
$show_title = 1; // 1 - show the title for the links, 0 - don't show

////////////////////////////////////////////////////////////////////////////////////
$delimiter = ' / '; // Customize delimiter between crumbs
////////////////////////////////////////////////////////////////////////////////////

$before = '<span class="current">'; // tag before the current crumb
$after = '</span>'; // tag after the current crumb
/* === END OF OPTIONS === */

global $post;
$home_link = home_url('/');
$link_before = '<span typeof="v:Breadcrumb">';
$link_after = '</span>';
$link_attr = ' rel="v:url" property="v:title"';
$link = $link_before . '<a' . $link_attr . ' href="%1$s">%2$s</a>' . $link_after;
$parent_id = $parent_id_2 = $post->post_parent;
$frontpage_id = get_option('page_on_front');

if (is_home() || is_front_page()) {

if ($show_on_home == 1) echo '<div class="whello-breadcrumbs"><a href="' . $home_link . '">' . $text['home'] . '</a></div>';

} else {

echo '<div class="whello-breadcrumbs" xmlns_v="http://rdf.data-vocabulary.org/#">';
if ($show_home_link == 1) {
echo '<a href="' . $home_link . '" rel="v:url" property="v:title">' . $text['home'] . '</a>';
if ($frontpage_id == 0 || $parent_id != $frontpage_id) echo $delimiter;
}

if ( is_category() ) {
$this_cat = get_category(get_query_var('cat'), false);
if ($this_cat->parent != 0) {
$cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
$cats = str_replace('</a>', '</a>' . $link_after, $cats);
if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
echo $cats;
}
if ($show_current == 1) echo $before . sprintf($text['category'], single_cat_title('', false)) . $after;

} elseif ( is_search() ) {
echo $before . sprintf($text['search'], get_search_query()) . $after;

} elseif ( is_day() ) {
echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
echo sprintf($link, get_month_link(get_the_time('Y'),get_the_time('m')), get_the_time('F')) . $delimiter;
echo $before . get_the_time('d') . $after;

} elseif ( is_month() ) {
echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
echo $before . get_the_time('F') . $after;

} elseif ( is_year() ) {
echo $before . get_the_time('Y') . $after;

} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
printf($link, $home_link . '/' . $slug['slug'] . '/', $post_type->labels->singular_name);
if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
if ($show_current == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
$cats = str_replace('</a>', '</a>' . $link_after, $cats);
if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
echo $cats;
if ($show_current == 1) echo $before . get_the_title() . $after;
}
} elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;

} elseif ( is_attachment() ) {
$parent = get_post($parent_id);
$cat = get_the_category($parent->ID); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
$cats = str_replace('</a>', '</a>' . $link_after, $cats);
if ($show_title == 0) $cats = preg_replace('/ title="(.*?)"/', '', $cats);
echo $cats;
printf($link, get_permalink($parent), $parent->post_title);
if ($show_current == 1) echo $delimiter . $before . get_the_title() . $after;

} elseif ( is_page() && !$parent_id ) {
if ($show_current == 1) echo $before . get_the_title() . $after;

} elseif ( is_page() && $parent_id ) {
if ($parent_id != $frontpage_id) {
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
if ($parent_id != $frontpage_id) {
$breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
}
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo $delimiter;
}
}
if ($show_current == 1) {
if ($show_home_link == 1 || ($parent_id_2 != 0 && $parent_id_2 != $frontpage_id)) echo $delimiter;
echo $before . get_the_title() . $after;
}

} elseif ( is_tag() ) {
echo $before . sprintf($text['tag'], single_tag_title('', false)) . $after;

} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . sprintf($text['author'], $userdata->display_name) . $after;

} elseif ( is_404() ) {
echo $before . $text['404'] . $after;
}

if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}

echo '</div><!-- .breadcrumbs -->';

}
}

Tempatkan kode PHP diatas di file function.php tema yang digunakan. Untuk menampilkan function breadcrumb diatas dapat kita panggil dengan kode PHP berikut. Letakkan pada posisi yang kamu inginkan misalnya pada file header.php.

<div id="breadcrumb">
       <?php whello_standard_breadcrumbs(); ?>
</div>

Namun, jika website kamu bertipe website woocommerce, maka kamu bisa menambah kode berikut :

<div class="breadcrumb">
<?php
    if(is_woocommerce() || is_shop()) {
           woocommerce_breadcrumb();
    } else {
         whello_standard_breadcrumbs();
    }
?>
</div>
<?php endif; ?>

Agar tampilan breadcrumb sedikit lebih menarik, kamu bisa mengatur style CSS dengan menambahkan kode berikut di style.css :

/*-[ Breadcrumb ]-------------------*/
#breadcrumb{
margin-bottom: 15px;
display:block;
color: #777;
font-weight: normal;
border-left: 2px solid #b11c42;
padding-left: 5px;
}

Itulah cara yang bisa kamu terapkan jika kamu ingin memasukkan breadcrumb navigation di website kamu. Semoga bermanfaat.