Hướng dẫn tạo menu Wordpress nhiều level trong Walker_Nav_Menu
25th Aug 2021WordPress 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>', ) );
Add new comment