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

如何解决我如何为此代码准备菜单数组

我正在学习 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>

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

解决方法

无需创建自定义步行者。只需使用附加参数并为 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');

,

您已经接近 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,$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,$args ) {
        // $output : var returned at the end of the walker
        $output .= '</a></li>';
    }
    function end_lvl( &$output,$args ) {
    }
}