Cómo agregar una clase ul en nav

Question

Cómo agregar una clase ul en nav

12 jun 2015, 16:27:28

Vistas: 49.8K

Votos: 5

He estado aprendiendo a convertir HTML a WordPress y quiero convertir una clase como esta:

<div class="mainmenu pull-left">
    <ul class="nav navbar-nav collapse navbar-collapse">
        <li><a href="index.html" class="active">Inicio</a></li>
        <li class="dropdown"><a href="#">Tienda<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="shop.html">Productos</a></li>
                <li><a href="product-details.html">Detalles del Producto</a></li> 
                <li><a href="checkout.html">Pago</a></li> 
                <li><a href="cart.html">Carrito</a></li> 
                <li><a href="login.html">Iniciar Sesión</a></li> 
            </ul>
        </li> 
        <li class="dropdown"><a href="#">Blog<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="blog.html">Lista del Blog</a></li>
                <li><a href="blog-single.html">Entrada Individual</a></li>
            </ul>
        </li> 
        <li><a href="404.html">404</a></li>
        <li><a href="contact-us.html">Contacto</a></li>
    </ul>
</div>

Esto es lo que he hecho:

if ( ! function_exists( 'mytheme_setup' ) ) :
    function wpflex_setup() {  
        // Registrar menús de navegación
        register_nav_menus( array(
            'primary' => 'Menú Principal'
        ) );
    }
endif;

wp_nav_menu( array( 
    'theme_location' => 'top-menu',
    'container'      => '',
    'menu_class'     => 'mainmenu pull-left',
) );

¿Cómo agregar una clase para ul?

dkvnk

51

menús temas

Todas las respuestas a la pregunta

Comentarios

No olvides 'container' => 'ul',

Richard Lindhout

30 ago 2016 17:12:55

Comentarios

Sucio, pero esta era la única forma de lograr que hiciera lo que quería hacer. ¡Gracias!

Jimmy Pelton

29 sept 2021 00:39:54

ChrisL 131 · Answer 1 · 2015-06-12T17:54:46Z

Ya lo hiciste correctamente. Si revisas la Documentación para wp_nav_menu, verás que menu_class es la opción correcta para la clase del UL:

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => '',
    'menu_class'=> 'mainmenu pull-left *agrega-tu-clase-aquí*'
 ) );

ChrisL

131

12 jun 2015 17:54:46

Behzad 466 · Answer 2 · 2015-06-12T20:55:40Z

Es tan simple como añadir el parámetro items_wrap y agregar o editar el atributo de clase:

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => false,
    'items_wrap' => '<ul class="nav tu_clase_personalizada">%3$s</ul>',
));

Behzad

466

12 jun 2015 20:55:40

Ted 51 · Answer 3 · 2017-02-25T07:09:10Z

WordPress crea el menú de páginas por defecto de forma diferente a los menús activos (aquellos que creas y asignas en el panel de administración). No hay una forma directa de agregar clases al elemento UL en los menús de páginas, pero existen otras formas. Prueba agregando esto a tu archivo functions.php:

function add_id_and_classes_to_page_menu( $ulclass ) {
  return preg_replace( '/<ul>/', '<ul id="main-menu" class="nav navbar-nav collapse navbar-collapse">', $ulclass, 1 );
}
add_filter( 'wp_page_menu', 'add_id_and_classes_to_page_menu' );

Ten en cuenta que esto reemplazará cualquier ID y clase existente, por lo que los he vuelto a agregar en el ejemplo anterior. También añadí un id="main-menu" para completar.

Ted

51

25 feb 2017 07:09:10

J. Shabu 167 · Answer 4 · 2017-04-27T20:59:28Z

Aquí está tu código corregido. Lo he probado para agregar la clase al ul

wp_nav_menu( array( 
    'theme_location' => 'top-menu',
    'container'      => 'ul',
    'menu_class'     => 'mainmenu pull-left',
) );

J. Shabu

167

27 abr 2017 20:59:28

Alpesh Navadiya 11 · Answer 5 · 2017-05-29T10:38:05Z

<?php 
  // Mostrar el menú de navegación principal
  wp_nav_menu( array(
    'menu' => 'Menú Principal', // Nombre del menú a mostrar
    'menu_class' => 'nav navbar-nav', // Clases CSS para el elemento ul
    'container' => '' // Eliminar el contenedor div por defecto
  ));
?>

Alpesh Navadiya

11

29 may 2017 10:38:05