如何为此代码准备菜单(数组

Question

我正在和bootstrap一起学习wordpress，我不知道如何为下面的代码准备菜单：

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

这是不工作在我的模板，谁可以帮助我。

Answer 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');

Answer 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是一个核心类，用于实现导航菜单项的超文本标记语言列表，下面是如何在示例中使用它：

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 ) {
    }
}