向 WordPress 导航项添加额外的 div

Question

更改我的 wp-menu 生成的输出的最简单方法是什么

<ul class="primary-menu">
<li class="menu-item">
    <a href="">nav link</a>
    <ul class="sub-menu"></ul>
</li>
</ul>

至

<ul class="primary-menu">
<li class="menu-item">
    <div class="alignme">
        <button></button><a href=""></a><button></button>
    </div>
    <ul class="sub-menu"></ul>
</li>
</ul>

?

我需要这种“帮手div”，因为我必须以某种方式对齐三个元素，并且独立于 li 中可能的附加内容（例如子菜单）。

我使用的是默认设置 wp_nav_menu()，作为第一次创建主题的我不知道在哪里可以找到菜单的“设置”。知道我应该去哪里仔细看看吗？

Answer 1

在wp_nav_menu“新Add_Div_Walker”中添加助行器class。检查我下面的代码。

$menu = array(
    'theme_location'  => 'primary',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'walker'          => new Add_Div_Walker
);
wp_nav_menu( $menu );

// add this below code in your functions.php file.
class Add_Div_Walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='alignme'>
            <button></button><a href=''></a><button></button>
        </div><ul class='submenu'>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
}

向 WordPress 导航项添加额外的 div

Add extra div to WordPress nav items

wordpress

wordpress-theming

wp-nav-menu-item