如何向wp_nav_menu()函数添加类

我正在开发自己的自定义Wordpress主题, 但在菜单导航中遇到问题。基本上, 我了解到Wordpress具有名为wp_nav_menu()的功能, 例如包含以下功能：

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

但是因为我也在使用Foundation框架, 所以菜单标签已经有了一些预构建类。所以我的主菜单看起来像这样：

<div class="top-bar" id="main-menu">
            <ul class="menu vertical medium-horizontal expanded medium-text-center" data-responsive-menu="drilldown medium-dropdown">
                <li><a href="#">Tech</a>
                </li>
                <li><a href="#">Energy</a>
                </li>
                <li><a href="#">Space</a>
                </li>
                <li ><a href="#">Medicine</a>
                </li>
                <li ><a href="#">Robotics</a>
                </li>
                <li ><a href="#">Tesla</a>
                </li>
            </ul>
        </div>

因此, 为了在此处安装wp_nav_menu()函数, 我必须这样做：

<div class="top-bar" id="main-menu">
            <?php 
                $args = array(
                    'theme_location' => 'top'
                );
            ?>
            <?php wp_nav_menu($args); ?>
        </div>

但是问题是因为我已经从菜单元素中删除了类名和样式表, 导航将不再响应！

那么, 如何添加此Wordpress函数以使用预构建类安装菜单？

#1

你应该尝试阅读有关此类问题的文档, 因为WordPress文档内容广泛且非常好。

wp_nav_menu()

为了解决这个问题, 在’theme_location’=>’top’下添加’menu_class’=>’menu vertical medium-horizo​​ntal extended medium-text-center’。因此, 你的最终代码将是：

<div class="top-bar" id="main-menu">
        <?php 
            $args = array(
                'theme_location' => 'top', 'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center'
            );
        ?>
        <?php wp_nav_menu($args); ?>
    </div>

#2

尝试：

 $args = array(
        'theme_location' => 'top'
        'menu_class' => 'menu vertical medium-horizontal expanded medium-text-center', );
    wp_nav_menu( $args ); 

如果你还需要数据响应菜单, 则可以添加一些js。

编辑

在$ args中, 你也可以使用

'items_wrap' => '<ul class="menu vertical medium-horizontal expanded medium-text-center" data-responsive-menu="drilldown medium-dropdown">%3$s</ul>';

#3

这里的解决方案：

wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id3' => 'primary-menu3' ) );