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 :
- Menggunakan bantuan Plugin
- 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.
Tingkatkan kredibilitas bisnis kamu dengan memiliki Website!
Miliki website profesional yang powerful dengan desain eksklusif dan pastinya SEO friendly untuk bisnis kamu. Konsultasi bersama specialist kami sekarang!
Mulai Konsultasi!Ingin konsultasi
dengan para specialist
Whello?
Tips lainnya dari kami
Tips Optimasi Location Landing Page untuk SEO
Pelajari cara mengoptimasi location landing page untuk SEO. Temukan tips dan trik yang dapat membantu meningkatkan peringkat di sini!
Apakah NAP Citations Menjadi Ranking Factor? Ini Jawabannya!
Apakah NAP citations menjadi faktor penentu peringkat? Baca penjelasan lengkapnya dan ketahui bagaimana cara kerjanya di sini!
Content Pruning, Pemangkasan Konten untuk Tingkatkan SEO
Pelajari cara pemangkasan konten dapat meningkatkan SEO situs kamu. Dapatkan panduan lengkap untuk mengelolanya di sini!
Follow us on Instagram
Temukan tips bermanfaat digital marketing serta keseruan spesialis Whello dalam menumbuhkan brand, hanya di Instagram @whello.indonesia. Follow, ya!