如何将父菜单描述添加到Wordpress菜单中


How can I add parent menu description to my Wordpress menu?

我已经在Wordpress的父菜单项中输入了描述,但它们没有显示在我的主题中。

我知道walker类可以用来更改菜单,但我不知道如何编码

以下是我想要实现的目标:

<nav id="main-menu" role="navigation">
<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <!-- REPEATING MENU ITEM START -->
        <li class="menu-parent-item"><a>Face</a>
        <ul class="sub-menu">
            <li class="menu-image-container">
                <div class="menu-image"></div>
                <div class="menu-description">[Face menu item description]</div>
            </li>
            <li class="heading">Face</li>
            <ul class="sub-menu">
                <li class="menu-item">Sub menu 1</li>
                <li class="menu-item">Sub menu 2</li>
                <li class="menu-item">Sub menu 3</li>
            </ul>
            <li class="heading">Ear</li>
            <ul class="sub-menu">
                <li class="menu-item">Sub menu 1</li>
                <li class="menu-item">Sub menu 2</li>
                <li class="menu-item">Sub menu 3</li>
            </ul>
            <li class="heading">Eyes</li>
            <ul class="sub-menu">
                <li class="menu-item">Sub menu 1</li>
                <li class="menu-item">Sub menu 2</li>
                <li class="menu-item">Sub menu 3</li>
            </ul>
        </ul>
        </li>
        <!-- REPEATING MENU ITEM END -->
    </ul>
</div>

正如您所看到的,我只希望显示父菜单项的描述,但它需要在父列表项的第一个ul.sub-menu中。

如何对使用start_lvlstart_elend_lvl的助行器进行编码以有效地处理此问题?

好的,我不确定这是否是愚蠢的,但我的尝试是:

因此,您需要确保管理菜单控制台中的描述(在"屏幕选项"下拉菜单中)

你的第一个菜单项应该是Face,然后Face再次作为其子项,然后sub-neu项目作为其子项目。

希望这能有所帮助!

在您的函数php中

class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
     function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
{
    $id_field = $this->db_fields['id'];
    if ( is_object( $args[0] ) ) {
        $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
    }
    return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_lvl( &$output, $depth=0, $args=array() ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "'t", $depth ) : '' ); // code indent
    $display_depth = ( $depth); // because it counts the first submenu as 0
    $classes = array('sub-menu');
    $class_names = implode( ' ', $classes );
    // build html
    $output .= "'n" . $indent . '<ul class="' . $class_names . '">' . "'n";
}
    function start_el(&$output, $item,  $depth = 0, $args = array(), $current_object_id = 0)
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;
        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );
        if ($args->has_children && $depth == 0){
        ! empty ( $class_names )
            and $class_names = ' class="menu-parent-item"';
        }else if($depth == 1){
         ! empty ( $class_names )
            and $class_names = ' class="heading"';
        }else{
         ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) .'"';  
        }
        $output .= "<li id='menu-item-$item->ID' $class_names>" ;
        $attributes  = '';
        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<div class="menu-description">' . esc_attr( $item->description ) . '</div>' : '';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        if (  $depth == 0) {//top level items
         $item_output = $args->before.$title.'</li><ul class="sub-menu"><li class="menu-image-container"><div class="menu-image"></div>'.$description.'</li>';  
        }
        else if(  $depth == 1){
             $item_output = $args->before.$title.'</li>';
        }
        else{//everything else
        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $args->after;
        }
        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}

在标题中(或菜单所在的位置)

<nav id="main-menu" role="navigation"><?php wp_nav_menu( array('menu' => 'Main', 'container' => 'div', 'container_class' => 'menu-main-menu-container', 'menu_id' => 'menu-main-menu', 'walker' => new Description_Walker )); ?></nav>

我设法让菜单像以前一样显示,同时通过简单地添加到我已经拥有的内容中,将父菜单描述添加到我想要的位置。

我已经有了一个walker,它创建了子菜单图像容器和描述容器

// Submenu walker to add image
class submenu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("'t", $depth);
        $output .= "'n$indent<ul class='sub-menu'><li class='menu-image-container'><div class='menu-image'></div><div class='menu-description'></div></li>'n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("'t", $depth);
        $output .= "$indent<li><div class='clear'></div></li></ul>'n";
    }
}

然后,我设法找到了一个使用start_el的函数,它可以将描述分配给一个变量,但不输出它,然后正常输出$item_output

function add_menu_description( $item_output, $item, $depth, $args ) {
    $description = __( $item->post_content );
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'add_menu_description', 10, 4);

当然,现在我需要在我的另一个子菜单walker函数中使用$description,所以我只在两者中创建了一个全局变量,输出正是我想要的!

最终输出

function add_menu_description( $item_output, $item, $depth, $args ) {
    global $description;
    $description = __( $item->post_content );
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'add_menu_description', 10, 4);
// Submenu walker to add image
class submenu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("'t", $depth);
        global $description;
        $output .= "'n$indent<ul class='sub-menu'><li class='menu-image-container'><div class='menu-image'></div><div class='menu-description'>".$description."</div></li>'n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("'t", $depth);
        $output .= "$indent<li><div class='clear'></div></li></ul>'n";
    }
}