🔧 Langkah-langkah:
1. Tambahkan Snippet PHP (via Code Snippets atau functions.php)
Jika kamu pakai plugin Code Snippets, tambahkan snippet ini:
function custom_breadcrumb() {
global $post;
$breadcrumb = '<nav class="breadcrumb">';
$breadcrumb .= '<a href="' . home_url() . '">Home</a>';
if (is_category() || is_single()) {
$categories = get_the_category();
if ($categories) {
$breadcrumb .= ' » <a href="' . get_category_link($categories[0]->term_id) . '">' . $categories[0]->name . '</a>';
}
if (is_single()) {
$breadcrumb .= ' » ' . get_the_title();
}
} elseif (is_page() && $post->post_parent) {
$ancestors = array_reverse(get_post_ancestors($post->ID));
foreach ($ancestors as $ancestor) {
$breadcrumb .= ' » <a href="' . get_permalink($ancestor) . '">' . get_the_title($ancestor) . '</a>';
}
$breadcrumb .= ' » ' . get_the_title();
} elseif (is_page()) {
$breadcrumb .= ' » ' . get_the_title();
} elseif (is_search()) {
$breadcrumb .= ' » Search results for "' . get_search_query() . '"';
} elseif (is_404()) {
$breadcrumb .= ' » 404 Not Found';
}
$breadcrumb .= '</nav>';
return $breadcrumb;
}
add_shortcode('custom_breadcrumb', 'custom_breadcrumb');2. Gunakan di Elementor
Masukkan shortcode ini:
Tambahkan widget Shortcode di tempat kamu ingin menampilkan breadcrumb.
[custom_breadcrumb]🎨 Tips Styling
Tambahkan CSS di halaman atau di Customizer > Additional CSS:
.breadcrumb {
font-size: 14px;
margin-bottom: 20px;
}
.breadcrumb a {
text-decoration: none;
color: #0073aa;
}
.breadcrumb a:hover {
text-decoration: underline;
}