Intereting Posts

Добавить дополнительную разметку в меню WP

Им было предложено перестроить HTML-сайт в тему WP, у него довольно развитая структура меню, и я не совсем уверен, как я могу ее воспроизвести. Во втором пункте меню есть подменю, но это не просто «ul» внутри «li», есть дополнительные div и т. Д., Потому что выпадающее меню имеет 3 столбца с двумя столбцами, содержащими дочерние ссылки и 3-й содержащий контент.

Это пример:

<ul class="nav navbar-nav three"> <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle">Parent Link</a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> <div class="row"> <ul class="col-sm-6 col-md-3 list-unstyled two"> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 1</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 2</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 3</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 4</a></li> </ul> <ul class="col-sm-6 col-md-3 list-unstyled two"> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 5</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 6</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 7</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 8</a></li> </ul> <ul class="col-sm-6 col-md-6 list-unstyled two"> <li> <h5>A title here</h5> </li> <li class="dart"> Some text here </li> </ul> </div> </div> </li> </ul> </li> </ul> 

Мне до сих пор удалось выяснить классы и дополнительные divs с помощью wp_nav_menu $ args и walker, вот что я до сих пор:

  class Child_Wrap extends Walker_Nav_Menu { function start_lvl(&$output, $depth = 0, $args = array()) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"dropdown-menu\"><li><div class=\"yamm-content\"><div class=\"row\">\n"; } function end_lvl(&$output, $depth = 0, $args = array()) { $indent = str_repeat("\t", $depth); $output .= "$indent</div></div></li></ul>\n"; } } <?php wp_nav_menu(array( 'menu' => 'Header Nav', 'container' => false, 'menu_class' => 'nav navbar-nav three', 'walker' => new Child_Wrap())); ?> 

Но вместо того, чтобы иметь подзаголовки в панели инструментов меню, есть ли способ вставки дополнительного меню в подменю, которое может создавать столбцы?

 <?php wp_nav_menu(array( 'menu' => 'Submenu 1', 'container' => false, 'menu_class' => 'col-sm-6 col-md-3 list-unstyled two', 'link_before' => '<i class="fa fa-map-marker"></i> ')); ?> 

благодаря

Solutions Collecting From Web of "Добавить дополнительную разметку в меню WP"

При разработке меню на тему, основанной на загрузке, теперь я использую следующий Walker:

 'walker' => new Custom_Walker_Nav_Menu class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { // add classes to ul sub-menus function start_lvl( &$output, $depth ) { // depth dependent classes $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent $display_depth = ( $depth + 1); // because it counts the first submenu as 0 $classes = array( 'sub-menu', ( $display_depth % 2 ? 'menu-odd' : 'menu-even' ), ( $display_depth >=2 ? 'sub-sub-menu' : '' ), 'menu-depth-' . $display_depth ); $class_names = implode( ' ', $classes ); // build html $output .= "\n" . $indent . '<ul class="dropdown-menu">' . "\n"; } function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { // Most of this code is copied from original Walker_Nav_Menu global $wp_query, $wpdb; $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, $args ) ); $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 ) . '"' : ''; $has_children = $wpdb->get_var("SELECT COUNT(meta_id) FROM wp_postmeta WHERE meta_key='_menu_item_menu_item_parent' AND meta_value='".$item->ID."'"); if ( $depth == 0 && $has_children > 0 ) { $output .= $indent . '<li class="dropdown">'; $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 .' data-hover="dropdown" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '<span class="caret"></span></a>'; $item_output .= $args->after; } else { $output .= $indent . '<li>'; $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>'; $item_output .= $args->after; } $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args, $id ); } }