如何将 class 添加到 wp_nav_menu() 函数

Question

我正在开发自己的自定义 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 框架，所以菜单标签已经有了一些预构建 classes。所以我的主菜单是这样的：

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

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

那么我如何添加这个 Wordpress 功能来安装带有预构建 classes 的菜单？

Answer 1

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

https://developer.wordpress.org/reference/functions/wp_nav_menu/

要解决此问题，请在 'theme_location' => 'top' 下面添加 'menu_class' => 'menu vertical medium-horizontal expanded 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>

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

Answer 3

这里是解决方案：

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

如何将 class 添加到 wp_nav_menu() 函数

How to add class to wp_nav_menu() function

wordpress

wordpress-theming

custom-wordpress-pages