如何在我的Wordpress菜单中添加父菜单描述?

问题描述：

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

I've entered the description into the parent menu items in Wordpress, but they're not showing on my theme.

我知道可以使用沃克类来更改菜单，但是我不知道如何编写代码.

I know that a walker class can be used to make changes to the menu, but I don't know how to code it.

这是我想要实现的目标:

Here is what I want to achieve:

<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之内.

As you can see, I only want the description of the parent menu item to be shown, but it needs to be within the first ul.sub-menu within the parent list item.

我该如何编码使用start_lvl，start_el和end_lvl的助行器来有效地处理此问题?

How could I code a walker that uses start_lvl, start_el and end_lvl to handle this efficiently?

答

我设法像以前一样显示菜单，同时只需将现有菜单添加到父菜单中，就可以将菜单的描述添加到我想要的位置.

I managed to get the menu to display as before, whilst adding the parent menu description exactly where I wanted by simply just adding to what I already had.

我已经有一个沃克创建了子菜单图像容器和描述容器

I already had a walker that created the sub-menu image container, and the description container

// 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.

Then I managed to find a function that uses start_el and could assign the description to a variable, but not output it, then just output the $item_output as normal.

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，所以我只是在两个子菜单中都创建了一个全局变量，而输出正是我想要的！

Of course now I needed to use $description within my other submenu walker function, so I just created a global variable in both, and the output is exactly what I'm after!

最终输出

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";
    }
}

如何在我的Wordpress菜单中添加父菜单描述?

相关推荐