Question

我正在尝试将子菜单项添加到父li的div内部。

这是我得到的......

<nav class="menu-main-menu-container">
<ul id="nav" class="">
    <li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item">
        <div>
            <a title="Locations | Traditions" href="#">Visit</a>
            <span>Locations | Traditions</span>
            <div class="arrow"></div>
        </div>
        <div class="main_sub_nav_wrap">
            <h2>Visit</h2>
        </div>
        <ul class="sub-menu">
            <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom">
                <a href="#">Sub Link 1</a>
            </li>
            <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom">
                <a href="#">Sub Link 2</a>
            </li>
            <li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom">
                <a href="#">Sub Link 3</a>
            </li>
        </ul>
    </li>
</ul>

我想要的是将它放入“main_sub_nav_wrap”中。

<nav class="menu-main-menu-container">
<ul id="nav" class="">
    <li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item">
        <div>
            <a title="Locations | Traditions" href="#">Visit</a>
            <span>Locations | Traditions</span>
            <div class="arrow"></div>
        </div>
        <div class="main_sub_nav_wrap">
            <h2>Visit</h2>
            <ul class="sub-menu">
                <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom">
                    <a href="#">Sub Link 1</a>
                </li>
                <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom">
                    <a href="#">Sub Link 2</a>
                </li>
                <li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom">
                    <a href="#">Sub Link 3</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

以下是我通过扩展助行器类来制作导航的内容......

<?php
class My_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth, $args) {
     global $wp_query;
     $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

     $class_names = $value = '';

     $classes = empty( $item->classes ) ? array() : (array) $item->classes;

     $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
     $class_names = ' class="' . esc_attr( $class_names ) . '"';

     $output .= $indent . '<li id="menu-item-'. $item->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 .= '<div><a'. $attributes .'>';
     $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
     $item_output .= '</a><span>' . $item->attr_title . '</span><div class="arrow"></div></div><div class="main_sub_nav_wrap"><div class="main_sub_nav"><div class="container"><div class="main_sub_nav_text"><h2>' . $item->title . '</h2></div></div></div></div>';
     $item_output .= $args->after;

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

我用它来添加到我的模板......

<?php
    $walker = new My_Walker;
    wp_nav_menu(array(
        'echo'           => true,
        'container'      => '',
        'theme_location' => 'header_menu',
        'container'      => 'nav',
        'menu_class'     => '',
        'menu_id'        => 'nav',
        'depth'          => 0,
        'walker'         => $walker
    ));
?>

Answer 1

我暂时没有使用过这段代码，请原谅我，如果有点关闭的话。在这里，我为我的一个菜单项（ID为63）添加了自定义<ul>子菜单，并按原样保留菜单的其余部分。您可以修改if ($isCategoryItem){ ... }部分以满足您的输出需求。

// Add product category menu as sub menu
class My_Walker extends Walker_Nav_Menu{        

function start_el(&$output, $item, $depth, $args) {
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
    $class_names = ' class="' . esc_attr( $class_names ) . '"';

    $output .= $indent . '<li id="menu-item-'. $item->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>';
    $item_output .= $args->after;

// $item_output is the actually outputted variable - add to it here as needed.
    // Or modify the previous 5 lines if you need to change the link itself

// Add category list to Category menu item
    $isCategoryItem = $item->ID == "63";
    if ($isCategoryItem){
        $terms = get_prod_cats();

        if (count($terms) > 0) {
            $cat_out .= '<ul class="sub-menu">';
            foreach ($terms as $term) {
                $cat_out .= '<li>'
                                . '<a href="'. esc_url(home_url('/')) . 'category/' . $term->slug
                                . '">' . $term->name . '</a>'
                            . '</li>';    
            }
            $cat_out .= '</ul>';
        }
    // Here we actually modify it. The lines before set up the custom output
        $item_output = $item_output . $cat_out;
    }

// Send it off to the next menu item!
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

}

使用Walker_Nav_Menu for WordPress在父li的div中添加子菜单

1 个答案: