Tạo Breadcrumb điều hướng trang cho Wordpress

Breadcrumbs là một kỹ thuật điều hướng hiển thị tất cả các trang web truy cập hàng đầu từ trang chủ tới các trang đang xem. Tất cả các trang được liên kết để chuyển hướng về phía sau dễ dàng, nếu bạn nhìn vào phía trên cùng của trang này, bạn sẽ thấy menu điều hướng breadcrumb dẫn một con đường trở về trang chủ, nó giúp tiết kiệm thời gian cho người dùng khi thăm trang.

Đầu tiên ta thêm đoạn code bên dưới vào file Functions.php trong thư mục Theme

/* add breadcrumb */
function the_breadcrumb () {

 // Settings
 $separator = ' » ';
 $id = 'breadcrumbs';
 $class = 'breadcrumbs';
 $home_title = 'Trang chủ';

 // Get the query & post information
 global $post,$wp_query;
 $category = get_the_category();

 // Build the breadcrums
 echo '<ul id="' . $id . '" class="' . $class . '">';

 // Do not display on the homepage
 if ( !is_front_page() ) {

 // 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_single() ) {

 // Single post (Only display the first category)
 echo '<li class="item-cat item-cat-' . $category[0]->term_id . ' item-cat-' . $category[0]->category_nicename . '"><a class="bread-cat bread-cat-' . $category[0]->term_id . ' bread-cat-' . $category[0]->category_nicename . '" href="' . get_category_link($category[0]->term_id ) . '" title="' . $category[0]->cat_name . '">' . $category[0]->cat_name . '</a></li>';
 echo '<li class="separator separator-' . $category[0]->term_id . '"> ' . $separator . ' </li>';
 echo '<li class="item-current item-' . $post->ID . '">ID . '" title="' . get_the_title() . '">' . get_the_title() . '</li>';

 } else if ( is_category() ) {

 // Category page
 echo '<li class="item-current item-cat-' . $category[0]->term_id . ' item-cat-' . $category[0]->category_nicename . '">term_id . ' bread-cat-' . $category[0]->category_nicename . '">' . $category[0]->cat_name . '</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
 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 . '"> ' . get_the_title() . '</li>';

 } else {

 // Just display current page if not parents
 echo '<li class="item-current item-' . $post->ID . '">ID . '"> ' . get_the_title() . '</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 );

 // Display the tag name
 echo '<li class="item-current item-tag-' . $terms[0]->term_id . ' item-tag-' . $terms[0]->slug . '">term_id . ' bread-tag-' . $terms[0]->slug . '">' . $terms[0]->name . '</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') . '"> ' . get_the_time('jS') . ' ' . get_the_time('M') . ' Archives</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') . '">' . get_the_time('M') . ' Archives</li>';

 } else if ( is_year() ) {

 // Display year archive
 echo '<li class="item-current item-current-' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</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 . '">user_nicename . '" title="' . $userdata->display_name . '">' . 'Author: ' . $userdata->display_name . '</li>';

 } else if ( get_query_var('paged') ) {

 // Paginated archives
 echo '<li class="item-current item-current-' . get_query_var('paged') . '">'.__('Page') . ' ' . get_query_var('paged') . '</li>';

 } else if ( is_search() ) {

 // Search results page
 echo '<li class="item-current item-current-' . get_search_query() . '">Search results for: ' . get_search_query() . '</li>';

 } elseif ( is_404() ) {

 // 404 page
 echo '<li>' . 'Error 404' . '</li>';
 }

 }

 echo '</ul>';

}

Kế tiếp thêm phần css định dạng cho breadcrumb vào file style.css

#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;
}
#breadcrumbs-content{
    height: 30px;
    margin-top: -36px;
    overflow: hidden;
    width: auto;
    z-index: 1;
}

#breadcrumbs-content a {
    color: #fff !important;
    font-style: italic;
    text-decoration: none;
}
#breadcrumbs-content .bread-current{
color: #D73131;
}