我如何为此代码准备菜单（数组）答案

【问题标题】：how can i prepare menu (arrays) for this code我如何为此代码准备菜单（数组）
【发布时间】：2021-05-14 21:46:31
【问题描述】：

我正在学习 wordpress 和 bootstrap，但我不知道如何为以下代码准备菜单：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
    <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 1</a></li>     <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 2</a></li>
    <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 3</a></li>
    <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 4</a></li>
</ul> </div>

对于我正在使用的这段代码

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <?php
 wp_nav_menu(
        array(
        'menu'                 => 'primarym',
        'container'            => 'ul',
        'container_class'      => 'navbar-nav nav-dropdown nav-right',
        'menu_class'           => 'menu',
        'menu_id'              => 'primary-menu',
        'echo'                 => true,
    )
    ); ?>   
     </div>

这在我的模板中不起作用，任何人都可以帮助我。

【问题讨论】：

标签： wordpress drop-down-menu navigation nav

【解决方案1】：

无需创建自定义walker。只需使用附加参数并为 nav_menu_css_class 和 nav_menu_link_attributes 设置过滤器。

请检查下面哪些对您有帮助。

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <?php
 wp_nav_menu(
        array(
        'menu'                 => 'primarym',
        'container'            => 'ul',
        'container_class'      => '',
        'menu_class'           => 'navbar-nav nav-dropdown nav-right',
        'menu_id'              => 'primary-menu',
        'add_li_class'         => 'nav-item',
        'echo'                 => true,
    )
    ); ?>   
</div>

注意新的“add_li_class”参数。并在functions.php上设置过滤器

function add_additional_class_in_li($classes, $item, $args) {
    if(isset($args->add_li_class)) {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_in_li', 1, 3);


function add_additional_class_in_ancher($atts) {
  $atts['class'] = "nav-link link text-black display-4";
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_additional_class_in_ancher');

【讨论】：

【解决方案2】：

您的function 很接近，请记住container 用于菜单容器（在您的情况下，div 标记），menu 用于菜单本身（在您的情况下），ul 标签）。对于这两个元素，您必须将参数设置为：

wp_nav_menu(
    array(
        'menu'            => 'primarym', // or the id of the menu (you could otherwise use theme_location)
        'container'       => 'div',
        'container_id'    => 'navbarSupportedContent',
        'container_class' => 'collapse navbar-collapse',
        'menu_class'      => 'navbar-nav nav-dropdown nav-right',
        'items_wrap'      => '<ul class="%2$s" data-app-modern-menu="true">%3$s</ul>',
        'walker'          => new My_Walker(),
    )
);

您会注意到有一个新的walker 参数，没有它您将无法以您想要的方式显示菜单元素本身（li 和a 标签）。

walker 是一个核心类，用于实现导航菜单项的 HTML 列表，您可以在示例中使用它：

class My_Walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth, $args ) {
    }
    function start_el( &$output, $item, $depth, $args ) {
        // $output : var returned at the end of the walker
        // $item : information about the current item
        $output .= sprintf(
            '<li class="nav-item"><a class="nav-link link text-black display-4" href="%1$s">%2$s',
            $item->url,
            $item->title
        );
    }
    function end_el( &$output, $item, $depth, $args ) {
        // $output : var returned at the end of the walker
        $output .= '</a></li>';
    }
    function end_lvl( &$output, $depth, $args ) {
    }
}

【讨论】：