Hướng dẫn tạo menu Wordpress nhiều level trong Walker_Nav_Menu

25th Aug 2021
Table of contents

WordPress allows using so-called Walker classes for traversing and displaying elements in an hierarchical structure. In this post we’ll learn about how to create, implement and customize our own walker class to customize our menu output.

add_action('wp_loaded','webendev_register_nav_menu_class');
/**
* New walker class to extend Walker_Nav_Menu
*    Dynamically adds child categories to menu
*
*/
function webendev_register_nav_menu_class(){

    class Submenu_Walker_Nav_Menu extends Walker_Nav_Menu  {

        function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
        extract($args);
            global $wp_query;
            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

            $class_names = $value = '';
            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
            $classes[] = 'menu-item-' . $item->ID;
            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
            $class_names = ' class="' . esc_attr( $class_names ) . '"';

            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
            $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
            $output .= $indent . '<li' . $id . $value . $class_names .'>';

            $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</a>';

            if($item->object == 'category'){
                $child_cats = wp_list_categories('title_li=&echo=0&hide_empty=0&child_of='.$item->object_id);
                if( $child_cats ){
                    $item_output .= '<ul class="sub-menu">' .$child_cats. '</ul>';
                }

            }

            $item_output .= $args->after;
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

        }

    }

}

Sau đó vô đây call cái menu của mình

     wp_nav_menu(

          array(

            'container_class' => 'row navbar-collapse',

            'theme_location' => 'your_theme',

            'fallback_cb' => false,

            'menu_class' => 'nav navbar-nav',

            'li_class' => 'menu-item-level',

            'anchor_class' => 'box',

            "walker"            => new My_Custom_Nav_Walker(),

            'items_wrap'      => '<ul id="nav">%3$s</ul>',

          )

        );
Bạn thấy bài viết này như thế nào?
0 reactions

Add new comment

Image CAPTCHA
Enter the characters shown in the image.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”

Related Articles

Nếu bạn muốn liệt kê tất cả các danh mục có sẵn cho một loại bài đăng tùy chỉnh, đoạn mã này có thể giúp bạn.

WP_Query là một lớp mạnh mẽ và cung cấp nhiều bộ lọc và hành động mà bạn có thể sử dụng để thay đổi cách vòng lặp WordPress hiển thị dữ liệu và cách truy vấn truy xuất dữ liệu.

If you want to build a simple, similar post list – in a single page view – when you query the latest or random posts from a post type you can use WP_Query.