Blog / WordPress/ How to Add Breadcrumb Navigation in WordPress Without a Plugin

How to Add Breadcrumb Navigation in WordPress Without a Plugin

WordPress非插件添加面包屑导航的方法

1. Add Breadcrumb Code to Your Theme's functions.php

Add the following code to the end of your active theme's functions.php file. This code is suitable for newer WordPress versions and includes security improvements and bug fixes.

function cmp_breadcrumbs() {
    $delimiter = '»';
    $before = '';
    $after = '';
    if ( !is_home() && !is_front_page() || is_paged() ) {
        echo '
'; global $post; $homeLink = home_url(); echo 'Home ' . esc_html($delimiter) . ' '; if ( is_category() ) { global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) { $cat_code = get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '); echo str_replace('' . get_the_time('Y') . ' ' . esc_html($delimiter) . ' '; echo '' . get_the_time('F') . ' ' . esc_html($delimiter) . ' '; echo $before . get_the_time('d') . $after; } elseif ( is_month() ) { echo '' . get_the_time('Y') . ' ' . esc_html($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; echo '' . $post_type->labels->singular_name . ' ' . esc_html($delimiter) . ' '; } else { $cat = get_the_category(); if ($cat) { $cat = $cat[0]; $cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' '); echo str_replace('labels->singular_name . $after; } elseif ( is_attachment() ) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); if ($cat) { $cat = $cat[0]; echo '' . $parent->post_title . ' ' . esc_html($delimiter) . ' '; } echo $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { echo $before . get_the_title() . $after; } elseif ( is_page() && $post->post_parent ) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = '' . get_the_title($page->ID) . ''; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . esc_html($delimiter) . ' '; echo $before . get_the_title() . $after; } elseif ( is_search() ) { echo $before; printf('Search results for "%s"', get_search_query()); echo $after; } elseif ( is_tag() ) { echo $before; printf('Posts tagged "%s"', single_tag_title('', false)); echo $after; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $before; printf('Posts by %s', $userdata->display_name); echo $after; } elseif ( is_404() ) { echo $before; _e('Page not found', 'cmp'); echo $after; } if ( get_query_var('paged') ) { if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo sprintf( __(' (Page %s)', 'cmp'), get_query_var('paged') ); } echo '
'; } }

Key Improvements:

  • Fixed URL concatenation syntax errors.
  • Added security escaping functions like esc_url() and esc_html().
  • Added conditional checks to prevent undefined variable errors.
  • Translated text strings to English for broader compatibility.

2. Call the Breadcrumbs in Your Theme Templates

In your theme template files (e.g., header.php, single.php, page.php), insert the following code where you want the breadcrumbs to appear (typically above the title):

<?php if (function_exists('cmp_breadcrumbs')) cmp_breadcrumbs(); ?>

The breadcrumb trail will be generated dynamically based on the page type (home, post, page, category, etc.).

Custom Styling

The HTML output is wrapped in a <div id="nowplace">. You can style it by adding CSS rules to your theme's style.css file. Example:

#nowplace {
    font-size: 14px;
    margin: 15px 0;
    color: #666;
}
#nowplace a {
    color: #0073aa;
    text-decoration: none;
}
#nowplace a:hover {
    text-decoration: underline;
}
#nowplace .current {
    color: #333;
    font-weight: bold;
}

By following these steps, you can add a fully functional, customizable breadcrumb navigation to your WordPress site without using a plugin.

Post a Comment

Your email will not be published. Required fields are marked with *.