How to add a breadcrumb navigation to WordPress

Source: Internet
Author: User
Breadcrumbs is a standard design mode in webpage navigation design and is useful for website browsing. This article mainly introduces how to create proper and comprehensive crumb navigation in WordPress using a non-plug-in method, including classification nesting and page nesting. One thing to declare is that I added the corresponding class for the element based on the bootstrap foreground: during this period, the category is still

Breadcrumbs is a standard design mode in webpage navigation design and is useful for website browsing. This article mainly introduces how to create proper and comprehensive crumb navigation in WordPress using a non-plug-in method, including classification nesting and page nesting. One thing to declare is that I add corresponding classes for elements based on the bootstrap foreground:

In this case, the category is still a link on the category archiving page and is followed by >>, because the system function get_category_parents outputs the category result cyclically by default, my solution is to overwrite the get_category_parents method, and call the rewritten my_get_category_parents function instead of get_category_parents in the category directory. this solves this problem.

Put the following functions in the topic functions. php:

function get_breadcrumbs(){global $wp_query;if ( !is_home() ){// Start the ULecho '
 
 
    ';// Add the Home linkecho '
  • '. get_bloginfo('name') .'
  • ';if ( is_category() ){$catTitle = single_cat_title( "", false );$cat = get_cat_ID( $catTitle );echo "
  • » ". get_category_parents( $cat, TRUE, " » " ) ."
  • ";}elseif ( is_archive() && !is_category() ){echo "
  • » Archives
  • ";}elseif ( is_search() ) {echo "
  • » Search Results
  • ";}elseif ( is_404() ){echo "
  • » 404 Not Found
  • ";}elseif ( is_single() ){$category = get_the_category();$category_id = get_cat_ID( $category[0]->cat_name );echo '
  • » '. get_category_parents( $category_id, TRUE, " » " );echo the_title('','', FALSE) ."
  • ";}elseif ( is_page() ){$post = $wp_query->get_queried_object();if ( $post->post_parent == 0 ){echo "
  • » ".the_title('','', FALSE)."
  • ";} else {$title = the_title('','', FALSE);$ancestors = array_reverse( get_post_ancestors( $post->ID ) );array_push($ancestors, $post->ID);foreach ( $ancestors as $ancestor ){if( $ancestor != end($ancestors) ){echo '
  • » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'
  • ';} else {echo '
  • » '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'
  • ';}}}}// End the ULecho "
";}}
// Function my_get_category_parents ($ id, $ link = true, $ separator = '/', $ nicename = false, $ srcid, $ visited = array () {$ chain = ''; $ parent = get_category ($ id); if (is_wp_error ($ parent) return $ parent; if ($ nicename) $ name = $ parent-> slug; else $ name = $ parent-> name; if ($ parent-> parent & ($ parent-> parent! = $ Parent-> term_id )&&! In_array ($ parent-> parent, $ visited) {$ visited [] = $ parent-> parent; $ chain. = my_get_category_parents ($ parent-> parent, $ link, $ separator, $ nicename, $ srcid, $ visited);} $ has_children = false; if ($ id = $ srcid) {$ has_children = false;} else {$ has_children = true;} if ($ has_children) {if ($ link) $ chain. = 'term _ id )). '"title = "'. esc_attr (sprintf (_ ("View all posts in % s"), $ parent-> name )). '"> '. $ name. ''. $ separator; else $ chain. = $ name. $ separator;} else {$ chain. = $ name;} return $ chain ;}
The calling code of breadcrumb:
 

Bread analysis:

  • First, if it is a home page, no breadcrumb navigation is displayed; if it is not a home page, a link to the home page is added;
  • Then, some column judgment statements overwrite all possible locations. some statements are self-evident, such as search, 404 page, and archive page;
  • For a category, first obtain the Category ID and then obtain its parent category list by ID. the Function get_category_parents () provided by WordPress is used here ();
  • For an article, you must first obtain the Category ID, but the method is slightly different from the above. Once the Category ID is obtained, add the article title as above.

Page navigation:

  • First, obtain the page title;
  • Then retrieve the page's ancestor and reverse their order. with the built-in get_post_ancestors () function of WordPress, you can easily implement it. the next line of code adds the current page to the ancestor array;
  • Finally, use the foreach loop to output all the ancestors. the if statement in the loop ensures that the last ancestor (that is, the current page added to the array) has no link.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.