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

Written by admin
Posted on Wed, 08/25/2021 - 03:25
1 view

Share Everywhere

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>',

          )

        );

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
4 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
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ể!”