Sudah tahu apa itu breadcrumbs? Jika diartikan ke dalam bahasa Indonesia breadcrumbs memiliki arti “remah roti”. Dalam film animasi klasik terutama ketika adegan si tokoh sedang melakukan pencarian, ceceran remah roti sering digambarkan sebagai sebuah petunjuk.
Seperti itu juga lah peran breadcrumbs di dalam sebuah website/blog dan karena itu pula kenapa fungsi ini disebut sebagai breadcrumbs.
Pengertian Breadcrumbs dalam Sebuah Website/Blog
Breadcrumbs adalah fungsi untuk menampilkan hierarki dari halaman yang sedang Anda buka. Contoh, dalam situs pugam.com ini Anda bisa melihat breadcrumbs di atas judul artikel, jika diurut kebelakang maka Anda akan diarahkan ke halaman depan atau home situs ini.
Cara Menambakan Breadcrumbs di WordPress tanpa Bantuan Plugin
Tidak semua tema di WordPress menyertakan fungsi ini, atau WordPress pun secara default tidak akan menambahkan fungsi ini ke dalam situs Anda. Metode paling umum ketika Anda ingin menambahkan breadcrumbs adalah dengan menggunakan plugin.
Tapi di sini saya akan menunjukkan cara bagaimana menambahkan breadcrumbs di WordPress tanpa bantuan plugin. Mungkin Anda bertanya, kenapa sih repot-repot padahal kan tinggal pakai plugin, beres!?
Kalau saya, ketika saya menggunakan WordPress maka penggunaan plugin itu sebisa mungkin diminimalisir. Banyak plugin yang menyertakan fungsi atau opsi yang sebetulnya tidak benar-benar Anda butuhkan disamping fungsi utamanya.
Sedangkan jika Anda melakukannya secara manual, yaitu dengan membuat script sendiri maka tentu Anda tidak akan menambahkan fungsi/script yang tidak Anda butuhkan bukan?
Untuk script yang akan saya bagikan kali ini sudah mendukung:
- Parent dan Child Pages
- Halaman Arsip
- Custom Post Types
- Custom Taxonomies
Silakan tambahkan script di bawah ini ke dalam file functions.php dan style.css.
//Breadcrumbs
function custom_breadcrumbs() {
// Settings
$separator = '>';
$breadcrums_id = 'breadcrumbs';
$breadcrums_class = 'breadcrumbs';
$home_title = 'Homepage';
// If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat)
$custom_taxonomy = 'product_cat';
// Get the query & post information
global $post, $wp_query;
// Do not display on the homepage
if (!is_front_page()) {
// Build the breadcrums
echo '<ul id="'.$breadcrums_id.
'" class="'.$breadcrums_class.
'">';
// Home page
echo '<li class="item-home"><a class="bread-link bread-home" href="'.get_home_url().
'" title="'.$home_title.
'">'.$home_title.
'</a></li>';
echo '<li class="separator separator-home"> '.$separator.
' </li>';
if (is_archive() && !is_tax() && !is_category() && !is_tag()) {
echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">'.post_type_archive_title($prefix, false).
'</strong></li>';
} else if (is_archive() && is_tax() && !is_category() && !is_tag()) {
// If post is a custom post type
$post_type = get_post_type();
// If it is a custom post type display name and link
if ($post_type != 'post') {
$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);
echo '<li class="item-cat item-custom-post-type-'.$post_type.
'"><a class="bread-cat bread-custom-post-type-'.$post_type.
'" href="'.$post_type_archive.
'" title="'.$post_type_object - > labels - > name.
'">'.$post_type_object - > labels - > name.
'</a></li>';
echo '<li class="separator"> '.$separator.
' </li>';
}
$custom_tax_name = get_queried_object() - > name;
echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">'.$custom_tax_name.
'</strong></li>';
} else if (is_single()) {
// If post is a custom post type
$post_type = get_post_type();
// If it is a custom post type display name and link
if ($post_type != 'post') {
$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);
echo '<li class="item-cat item-custom-post-type-'.$post_type.
'"><a class="bread-cat bread-custom-post-type-'.$post_type.
'" href="'.$post_type_archive.
'" title="'.$post_type_object - > labels - > name.
'">'.$post_type_object - > labels - > name.
'</a></li>';
echo '<li class="separator"> '.$separator.
' </li>';
}
// Get post category info
$category = get_the_category();
if (!empty($category)) {
// Get last category post is in
$last_category = end(array_values($category));
// Get parent any categories and create array
$get_cat_parents = rtrim(get_category_parents($last_category - > term_id, true, ','), ',');
$cat_parents = explode(',', $get_cat_parents);
// Loop through parent categories and store in variable $cat_display
$cat_display = '';
foreach($cat_parents as $parents) {
$cat_display. = '<li class="item-cat">'.$parents.
'</li>';
$cat_display. = '<li class="separator"> '.$separator.
' </li>';
}
}
// If it's a custom post type within a custom taxonomy
$taxonomy_exists = taxonomy_exists($custom_taxonomy);
if (empty($last_category) && !empty($custom_taxonomy) && $taxonomy_exists) {
$taxonomy_terms = get_the_terms($post - > ID, $custom_taxonomy);
$cat_id = $taxonomy_terms[0] - > term_id;
$cat_nicename = $taxonomy_terms[0] - > slug;
$cat_link = get_term_link($taxonomy_terms[0] - > term_id, $custom_taxonomy);
$cat_name = $taxonomy_terms[0] - > name;
}
// Check if the post is in a category
if (!empty($last_category)) {
echo $cat_display;
echo '<li class="item-current item-'.$post - > ID.
'"><strong class="bread-current bread-'.$post - > ID.
'" title="'.get_the_title().
'">'.get_the_title().
'</strong></li>';
// Else if post is in a custom taxonomy
} else if (!empty($cat_id)) {
echo '<li class="item-cat item-cat-'.$cat_id.
' item-cat-'.$cat_nicename.
'"><a class="bread-cat bread-cat-'.$cat_id.
' bread-cat-'.$cat_nicename.
'" href="'.$cat_link.
'" title="'.$cat_name.
'">'.$cat_name.
'</a></li>';
echo '<li class="separator"> '.$separator.
' </li>';
echo '<li class="item-current item-'.$post - > ID.
'"><strong class="bread-current bread-'.$post - > ID.
'" title="'.get_the_title().
'">'.get_the_title().
'</strong></li>';
} else {
echo '<li class="item-current item-'.$post - > ID.
'"><strong class="bread-current bread-'.$post - > ID.
'" title="'.get_the_title().
'">'.get_the_title().
'</strong></li>';
}
} else if (is_category()) {
// Category page
echo '<li class="item-current item-cat"><strong class="bread-current bread-cat">'.single_cat_title('', false).
'</strong></li>';
} else if (is_page()) {
// Standard page
if ($post - > post_parent) {
// If child page, get parents
$anc = get_post_ancestors($post - > ID);
// Get parents in the right order
$anc = array_reverse($anc);
// Parent page loop
if (!isset($parents)) $parents = null;
foreach($anc as $ancestor) {
$parents. = '<li class="item-parent item-parent-'.$ancestor.
'"><a class="bread-parent bread-parent-'.$ancestor.
'" href="'.get_permalink($ancestor).
'" title="'.get_the_title($ancestor).
'">'.get_the_title($ancestor).
'</a></li>';
$parents. = '<li class="separator separator-'.$ancestor.
'"> '.$separator.
' </li>';
}
// Display parent pages
echo $parents;
// Current page
echo '<li class="item-current item-'.$post - > ID.
'"><strong title="'.get_the_title().
'"> '.get_the_title().
'</strong></li>';
} else {
// Just display current page if not parents
echo '<li class="item-current item-'.$post - > ID.
'"><strong class="bread-current bread-'.$post - > ID.
'"> '.get_the_title().
'</strong></li>';
}
} else if (is_tag()) {
// Tag page
// Get tag information
$term_id = get_query_var('tag_id');
$taxonomy = 'post_tag';
$args = 'include='.$term_id;
$terms = get_terms($taxonomy, $args);
$get_term_id = $terms[0] - > term_id;
$get_term_slug = $terms[0] - > slug;
$get_term_name = $terms[0] - > name;
// Display the tag name
echo '<li class="item-current item-tag-'.$get_term_id.
' item-tag-'.$get_term_slug.
'"><strong class="bread-current bread-tag-'.$get_term_id.
' bread-tag-'.$get_term_slug.
'">'.$get_term_name.
'</strong></li>';
}
elseif(is_day()) {
// Day archive
// Year link
echo '<li class="item-year item-year-'.get_the_time('Y').
'"><a class="bread-year bread-year-'.get_the_time('Y').
'" href="'.get_year_link(get_the_time('Y')).
'" title="'.get_the_time('Y').
'">'.get_the_time('Y').
' Archives</a></li>';
echo '<li class="separator separator-'.get_the_time('Y').
'"> '.$separator.
' </li>';
// Month link
echo '<li class="item-month item-month-'.get_the_time('m').
'"><a class="bread-month bread-month-'.get_the_time('m').
'" href="'.get_month_link(get_the_time('Y'), get_the_time('m')).
'" title="'.get_the_time('M').
'">'.get_the_time('M').
' Archives</a></li>';
echo '<li class="separator separator-'.get_the_time('m').
'"> '.$separator.
' </li>';
// Day display
echo '<li class="item-current item-'.get_the_time('j').
'"><strong class="bread-current bread-'.get_the_time('j').
'"> '.get_the_time('jS').
' '.get_the_time('M').
' Archives</strong></li>';
} else if (is_month()) {
// Month Archive
// Year link
echo '<li class="item-year item-year-'.get_the_time('Y').
'"><a class="bread-year bread-year-'.get_the_time('Y').
'" href="'.get_year_link(get_the_time('Y')).
'" title="'.get_the_time('Y').
'">'.get_the_time('Y').
' Archives</a></li>';
echo '<li class="separator separator-'.get_the_time('Y').
'"> '.$separator.
' </li>';
// Month display
echo '<li class="item-month item-month-'.get_the_time('m').
'"><strong class="bread-month bread-month-'.get_the_time('m').
'" title="'.get_the_time('M').
'">'.get_the_time('M').
' Archives</strong></li>';
} else
if (is_year()) {
// Display year archive
echo '<li class="item-current item-current-'.get_the_time('Y').
'"><strong class="bread-current bread-current-'.get_the_time('Y').
'" title="'.get_the_time('Y').
'">'.get_the_time('Y').
' Archives</strong></li>';
} else if (is_author()) {
// Auhor archive
// Get the author information
global $author;
$userdata = get_userdata($author);
// Display author name
echo '<li class="item-current item-current-'.$userdata - > user_nicename.
'"><strong class="bread-current bread-current-'.$userdata - > user_nicename.
'" title="'.$userdata - > display_name.
'">'.
'Author: '.$userdata - > display_name.
'</strong></li>';
} else if (get_query_var('paged')) {
// Paginated archives
echo '<li class="item-current item-current-'.get_query_var('paged').
'"><strong class="bread-current bread-current-'.get_query_var('paged').
'" title="Page '.get_query_var('paged').
'">'.__('Page').
' '.get_query_var('paged').
'</strong></li>';
} else if (is_search()) {
// Search results page
echo '<li class="item-current item-current-'.get_search_query().
'"><strong class="bread-current bread-current-'.get_search_query().
'" title="Search results for: '.get_search_query().
'">Search results for: '.get_search_query().
'</strong></li>';
}
elseif(is_404()) {
// 404 page
echo '<li>'.
'Error 404'.
'</li>';
}
echo '</ul>';
}
}
#breadcrumbs{
list-style:none;
margin:10px 0;
overflow:hidden;
}
#breadcrumbs li{
display:inline-block;
vertical-align:middle;
margin-right:15px;
}
#breadcrumbs .separator{
font-size:18px;
font-weight:100;
color:#ccc;
}
Kemudian panggil fungsi di atas dengan menambahkan kode di bawah ini ke dalam file template halaman, tergantung di mana Anda ingin menampilkannya, apakah di single post atau page, setiap tema biasanya memisahkan file template antara single post dan page.
<?php custom_breadcrumbs(); ?>
Berikut adalah contoh ketika saya menerapkannya di situs pugam.com ini, di mana breadcrumbs paling atas dihasilkan dari plugin SEO by Yoast dan breadcrumbs di bawahnya dihasilkan dengan menggunakan script di atas.
Bonus
Bagi Anda yang menggunakan plugin SEO by Yoast, Anda dapat mengaktifkan fungsi breadcrumbs ini dengan mudah. Caranya, di menu pengaturan plugin SEO by Yoast, masuk ke bagian Advanced, nanti Anda akan menemukan bagian breadcrumbs.
Pada bagian Enable Breadcrumbs, geser toggle menjadi Enabled lalu atur dan sesuaikan opsi-opsi di bawahnya. Terakhir, untuk menampilkannya tambahkan kode berikut di halaman yang Anda inginkan:
<?php if ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>