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 . '"><strong class="bread-current bread-' . $post->ID . '" title="' . get_the_title() . '">' . get_the_title() . '</strong></li>';
            
        } else if ( is_category() ) {
            
            // Category page
            echo '<li class="item-current item-cat-' . $category[0]->term_id . ' item-cat-' . $category[0]->category_nicename . '"><strong class="bread-current bread-cat-' . $category[0]->term_id . ' bread-cat-' . $category[0]->category_nicename . '">' . $category[0]->cat_name . '</strong></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 . '"><strong title="' . get_the_title() . '"> ' . get_the_title() . '</strong></li>';
                
            } else {
                
                // Just display current page if not parents
                echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '"> ' . get_the_title() . '</strong></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 . '"><strong class="bread-current bread-tag-' . $terms[0]->term_id . ' bread-tag-' . $terms[0]->slug . '">' . $terms[0]->name . '</strong></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') . '"><strong class="bread-current bread-' . get_the_time('j') . '"> ' . get_the_time('jS') . ' ' . get_the_time('M') . ' Archives</strong></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') . '"><strong class="bread-month bread-month-' . get_the_time('m') . '" title="' . get_the_time('M') . '">' . get_the_time('M') . ' Archives</strong></li>';
            
        } else if ( is_year() ) {
            
            // Display year archive
            echo '<li class="item-current item-current-' . get_the_time('Y') . '"><strong class="bread-current bread-current-' . get_the_time('Y') . '" title="' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</strong></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 . '"><strong class="bread-current bread-current-' . $userdata->user_nicename . '" title="' . $userdata->display_name . '">' . 'Author: ' . $userdata->display_name . '</strong></li>';
        
        } else if ( get_query_var('paged') ) {
            
            // Paginated archives
            echo '<li class="item-current item-current-' . get_query_var('paged') . '"><strong class="bread-current bread-current-' . get_query_var('paged') . '" title="Page ' . get_query_var('paged') . '">'.__('Page') . ' ' . get_query_var('paged') . '</strong></li>';
            
        } else if ( is_search() ) {
        
            // Search results page
            echo '<li class="item-current item-current-' . get_search_query() . '"><strong class="bread-current bread-current-' . get_search_query() . '" title="Search results for: ' . get_search_query() . '">Search results for: ' . get_search_query() . '</strong></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;
}
 

Cuối cùng là đoạn code để hiển thị breadcrumb ra trang(thường thì nó sẽ nằm ở cuối cùng của header.php)

<div id="breadcrumbs-content"><?php the_breadcrumb(); ?></div>

Tuỳ theo mục đích sử dụng mà đoạn này sẽ nằm ở những vị trí khác nhau.
Vậy là xong :)