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

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

您的 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 标签）你要。

A walker 是一个核心 class，用于实现 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 ) {
    }
}

Answer 2

无需创建自定义助行器。只需使用额外的参数并为 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');

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

how can i prepare menu (arrays) for this code

navigation

wordpress

nav

drop-down-menu