在wp_nav_menu中为UL添加类

Question

我正在学习wordpress和bootstrap，但是我无法在UL标签上添加class。

如截图所示，我想在UL上添加nav nav-tabs class，但它被添加到了父级div上。

$defaults = array(
  'menu_class'=> 'nav nav-tabs',        
);

wp_nav_menu( $defaults ); 

检查元素：

参考资料：
http://codex.wordpress.org/Function_Reference/wp_nav_menu

- JunM

---

请将您传递给 wp_nav_menu 的所有参数发布出来。 - andreivictor

这是我用BEM符号创造的东西 https://stackoverflow.com/questions/59847953/wordpress-primary-navigation-ul-li-class-override - anyapps

您需要确保已设置自定义菜单，并将菜单位置选择为顶部菜单。默认的WordPress菜单将无法正常工作，您将遇到您正在遇到的问题。 - Sambuxc

Answer 1

首先，您需要从 外观 -> 菜单 创建自定义导航菜单。

然后，使用以下参数的 wp_nav_menu：

<?php 
$args = array(
    'menu_class' => 'nav nav-tabs',        
    'menu' => '(your_menu_id)'
);
wp_nav_menu( $args ); 
?>

关于WordPress菜单，有很多可以阅读的内容。我建议阅读以下链接：
http://codex.wordpress.org/Navigation_Menus
http://www.paulund.co.uk/how-to-register-menus-in-wordpress

- andreivictor

---

似乎不起作用。我在文章中只指定了一个参数，那就是我的参数。 - JunM

你在 WordPress 仪表盘中定义了菜单吗？http://codex.wordpress.org/Appearance_Menus_SubPanel - andreivictor

不，只是默认的那个。看起来还是一样的。 - JunM

如果您没有菜单，wp_nav_menu 将显示 wp_page_menu 函数的输出，该函数会显示所有页面。尝试创建一个菜单，然后使用 menu 参数。 - andreivictor

请看我的方式：https://stackoverflow.com/questions/59847953/wordpress-primary-navigation-ul-li-class-override - anyapps

Answer 2

您需要指定容器元素，例如我们的情况下是'ul'标签，并在'menu_class'中指定我们要分配的类。以下是示例代码：

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => 'ul',
    'menu_class'=> '[add-your-class-here]'
 ) );

- Brane

---

现在一切都有意义了。 - Frizzant

Answer 3

更新：这是因为我在菜单页面中没有创建菜单导致的。

我想要给 wp_nav_menu 的 ul 添加一个类。我尝试了以下代码：

<?php

$defaults = array(
    'menu_class'      => 'menu',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);

wp_nav_menu( $defaults );

?>

根据WordPress的Codex文档，将'menu_class' => 'menu'更改为其它值应该会更改ul元素的类名，但实际上它会更改包裹ul的div元素的类名。

示例页面

- Albertino Carvalho

Answer 4

我曾遇到同样的问题，所以我把 "theme_location" 改为 "name"，这样就完美解决了。

示例：

$defaults = array(
    '[INSTEAD OF PUTTING "theme_location" PUT "name"]'  => 'THE NAME OF YOUR "theme_location"',
    'menu_class' => 'YOUR CLASS', **[It will change the <UL> class]**
    );

    wp_nav_menu( $defaults );

所以你的代码是：

wp_nav_menu( array(
    'name' => 'top-menu',
    'menu_class'=> 'YOUR CLASS'
 ) );

 wp_nav_menu( $defaults );

在此输入图片描述

您还可以将其放入容器中，例如<DIV>或<NAV>等。

示例：

$defaults = array(
    'name'  => 'top-menu',
    'menu_id'         => 'YOUR ID',
    'container'       => 'nav',
    'container_class' => 'YOUR CONTAINER CLASS (<nav> in this case)',
    'menu_class'      => 'YOUR CLASS FOR <UL>',
    );

    wp_nav_menu( $defaults );

在此输入图片描述

- Santiago Alejandro

---

为什么 name 在代码库中没有任何文档说明，但在实际使用中却能完美运行？https://developer.wordpress.org/reference/functions/wp_nav_menu/ - klewis

Answer 5

这是你应该这样做的方式，对我有效。

<?php wp_nav_menu( $menu_meta );

$menu_meta = array(
    'menu' => 'MENU-NAME-HERE',
    'items_wrap' => '<ul id="MENU-ID" class="MENU-CLASS">%3$s</ul>'
); ?>

- Umair Razzaq

Answer 6

你可以试试这个。对我来说有效。

     wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'container' => 'ul',
    'menu_class'=> '[your-class-here]'
 ) );

- Tahmidur R. Shovon