Plugin and code implementation methods for adding breadcrumb navigation to WordPress

Breadcrumb Navigation(English:Breadcrumb Trail) is a navigation aid in the user interface.Breadcrumb NavigationTypically located below the title or page header, it provides users with a path back to the website homepage or entry page, usually appearing as a greater-than sign (>), although some designs use other symbols (such as «). They mostly look like this: Home > Category Page > Subcategory Page or Home >> Category Page >> Subcategory Page. For example, the current breadcrumb navigation effect of Naibabiji is shown in the figure below:

The Role of Breadcrumb Navigation

Breadcrumb navigation has two main purposes:

1. Enhance user experience, allowing users to easily know their location and navigate to the homepage and parent directories.
2. Help search engines understand the website structure, aiding inwebsite SEOeffectiveness.

WordPress Breadcrumb Navigation Plugin

Breadcrumb NavXT

ThisWordPress Breadcrumb Navigation Pluginsupports the Chinese language. You can set the breadcrumb separator in the backend, choose whether to display the current page link, and specify which pages or post types show breadcrumb navigation. Breadcrumb navigation can be set to display on all pages supported by WordPress. Breadcrumb NavXT Download Link:If you need to install Breadcrumb NavXT, simply search for the plugin name from the WP Admin Dashboard or download the installation package from below to install.Download Link How to Use Breadcrumb NavXT:After installing and activating Breadcrumb NavXT, find the page template file in your website theme where you want to display breadcrumb navigation, and insert the following code snippet in the appropriate location.

Flexy Breadcrumb

Compared to Breadcrumb NavXT above, Flexy Breadcrumb does not have Chinese language support, but its backend settings are simpler, allowing you to set the navigation font color, size, and icon information. Additionally, it supports setting the hierarchy of breadcrumb navigation, distinguished by category, date, or TAG. The advantage of Flexy Breadcrumb is its support for shortcodes; you can reference it via shortcodes in posts or other shortcode-supported areas, or add it to theme templates. Also, Flexy Breadcrumb's default styling is more aesthetically pleasing. Flexy Breadcrumb Download Link:You can directly search for the plugin name in the backend to install it, or download the installation package and upload it for installation.Download Link How to use Flexy Breadcrumb:After installing and activating the plugin, you can directly insert shortcodes when publishing posts [flexy_breadcrumb] , or insert the following code snippet at an appropriate location in your website's theme template files.

The above two WordPress breadcrumb navigation plugins are what Naibabiji considers to be quite useful. If you have better ones, feel free to recommend them to me.

WordPress Breadcrumb Navigation Code

If you don't like using plugins to implement WordPress breadcrumb navigation, you can also use the following code to get it done.

Multi-Conditional Code

This multi-conditional judgment code was seen fromWP Universitythere. It's quite comprehensive in functionality, supporting the theme language pack textdomain attribute (if your website is a single-language version, you don't need to modify the language pack; just modify the code directly.)

/**
 * WordPress 添加面包屑导航 
 * https://blog.naibabiji.com/skill/wordpress-mian-bao-xie-dao-hang.html
 */
function twentytwelve_breadcrumbs() {
	$delimiter = '»'; // 分隔符
	$before = ''; // 在当前链接前插入
	$after = ''; // 在当前链接后插入
	if ( !is_home() && !is_front_page() || is_paged() ) {
		echo '
'.__( '当前位置:' , 'twentytwelve' );
		global $post;
		$homeLink = home_url();
		echo ' ' . __( '首页' , 'twentytwelve' ) . ' ' . $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 $cat_code = str_replace ('' . get_the_time('Y') . ' ' . $delimiter . ' ';
			echo '' . get_the_time('F') . ' ' . $delimiter . ' ';
			echo $before . get_the_time('d') . $after;
		} elseif ( is_month() ) { // 月 存档
			echo '' . 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;
				echo '' . $post_type->labels->singular_name . ' ' . $delimiter . ' ';
				echo $before . get_the_title() . $after;
			} else { // 文章 post
				$cat = get_the_category(); $cat = $cat[0];
				$cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
				echo $cat_code = str_replace ('labels->singular_name . $after;
		} elseif ( is_attachment() ) { // 附件
			$parent = get_post($post->post_parent);
			$cat = get_the_category($parent->ID); $cat = $cat[0];
			echo '' . $parent->post_title . ' ' . $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 . ' ' . $delimiter . ' ';
			echo $before . get_the_title() . $after;
		} elseif ( is_search() ) { // 搜索结果
			echo $before ;
			printf( __( 'Search Results for: %s', 'twentytwelve' ),  get_search_query() );
			echo  $after;
		} elseif ( is_tag() ) { //标签 存档
			echo $before ;
			printf( __( 'Tag Archives: %s', 'twentytwelve' ), single_tag_title( '', false ) );
			echo  $after;
		} elseif ( is_author() ) { // 作者存档
			global $author;
			$userdata = get_userdata($author);
			echo $before ;
			printf( __( 'Author Archives: %s', 'twentytwelve' ),  $userdata->display_name );
			echo  $after;
		} elseif ( is_404() ) { // 404 页面
			echo $before;
			_e( 'Not Found', 'twentytwelve' );
			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 )', 'twentytwelve' ), get_query_var('paged') );
		}
		echo '
';
	}
}

Actually, this code snippet is similar to theBreadcrumb NavXTabove, just that the plugin has become a code version. In the above code, Naibabiji has already changed the default English display to Chinese „Current Location“ and „Home“. If you need to achieve multilingual support in conjunction with the theme„s language file, please replace “twentytwelve„ in the code with your own theme“s textdomain (you can search for textdomain in functions.php to see the result.)How to use the code:Copy the code above and add it to your theme's functions.php file. For beginners, it is recommended to useSafe method to add code to the functions.php file: Code Snippetsthis plugin to add the code. Then, insert the following code snippet into the page code where you want to display the navigation content:

If the effect is not satisfactory, just add some CSS to beautify it. Naibabiji Website Building Notes uses just the following bit of CSS code.

div#crumbs {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #757575;
}

Simple Code

The above code is actually quite complex. The essence of breadcrumb navigation is simply adding a home link, category page link, and post title on the current page. We can easily achieve this by directly adding the following code snippet to the theme template.

<a href="/" title="Home">首页</a> » <?php the_category(","); ?>  » <?php the_title(); ?>

The above directly uses WordPress built-in functions to call the category and post title, achieving it in a simple and straightforward way. Alright, all the above content isPlugin and code implementation methods for adding breadcrumb navigation to WordPress. If you have any questions, feel free to join our group to discuss with us (the group QR code is at the end of the article).