¿Cómo agregar clases (css) a un solo wp_nav_menu ()?

2

Editar

Eliminé la Pregunta original porque esta Q tiene más de 1.000 visitas ahora, lo que significa que es importante para mucha gente, para mostrarle algo que funciona a) sin un Walker & b) es fácil. Nota: Solo quité la Q original, porque era bastante poco espectacular.

La tarea

Agregue clases de css a todos los elementos del menú de navegación dentro de un menú de navegación específico que se agregó a través de (admin UI) Apariencia > Menú.

La función

function wpse4388_navmenu_classes( $items, $menu, $args )
{
    // prevent crashing the appearance > menu admin UI
    if ( is_admin() )
        return;

    # >>>> start editing

        // Nav menu name you entered in the admin-UI > Appearance > Menus (Add menu).
        $target['name'] = 'Topnav';

        // A targeted menu item that needs a special class - add the item number here
        $target['items'] = array( (int) 6 );

    # <<<< stop editing

    // filter for child themes: "filter_nav_menu_{nav menu name}"
    // the nav menu name looses all empty spaces and is set to lower
    // if you want to use the filter, hook your child theme function into 'after_setup_theme'
    $target = apply_filters( 'filter_nav_menu_'.strtolower( str_replace( " ", "", $target['name'] ), $target );

    // Abort if we're not with the named menu
    if ( $menu->name !== $target['name'] ) 
        return;

    foreach ( $items as $item )
    {
        // Add the class for each menu item
        $item->classes = 'classes for all items';

        // Append this class if we are in one of the targeted items
        if ( in_array( (int) $item->menu_order, $target['items'] ) )
            $item->classes .= ' only for a single item';
    }

    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'wpse4388_navmenu_classes', 10, 3 );

¿Fue útil? No te olvides de votar! :)

    
pregunta kaiser 21.11.2010 - 22:26

4 respuestas

3

Comenzaré diciendo algo similar a Horttcore ...

Hay una razón por la que no puede simplemente proporcionar un elemento contenedor diferente para el menú dado, debe proporcionar suficiente especificidad para darle un estilo único.

Aunque, puedes hacer algo como esto para condicionalizar los argumentos del menú según la ubicación del menú ...

function my_wp_nav_menu_args( $args = '' ) {
    if( $args['theme_location'] == 'your-specific-location' )
        $args = array_merge( array(
            'container_class' => 'example',
            'menu_class' => 'example2'
        ), $args );
    return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

El código anterior se basa en el ejemplo dado en la página de códice para wp_nav_menu , y podría extenderse fácilmente para hacer cualquier número de cosas.
enlace

Espero que ayude ..

    
respondido por el t31os 22.11.2010 - 09:58
1

Tal vez lo entendí mal, pero ¿por qué no agrega la clase a su tema? Especifique la clase cuando llame al menú.

<?php wp_nav_menu( array( 'theme_location' => 'Top Nav', 'menu_class' => 'span-3' ) ); ?>
    
respondido por el Horttcore 22.11.2010 - 09:36
1

Tuve un problema muy similar. Necesitaba apuntar a un determinado wp_nav_menu() y reemplazar los enlaces a con una clase. Aquí está mi solución en referencia al OP:

function theme_add_menuclass( $classes, $args ) {
    if ( $args->theme_location == 'your-menu-location' ) {
        return preg_replace( '/<li /i', '<li class="your-class"', $classes );
    }
    return $classes;
}
add_filter( 'wp_nav_menu_items', 'theme_add_menuclass', 10, 2 );

Puedes usar esto para reemplazar cualquier pieza en tus menús de navegación. Espero que esto ayude.

    
respondido por el Timothy Brand 24.03.2015 - 02:55
0

Para agregar una clase CSS a un elemento del menú, vaya a Apariencia > Menú > Opciones de pantalla (parte superior derecha de la pantalla) y asegúrese de que las Clases CSS estén marcadas. Esto le permitirá agregar clases CSS a cada elemento del menú. Para varios nombres de clase, separe cada elemento por un espacio, por ejemplo:

my-class-one my-class-two
    
respondido por el quratulain qadir 10.12.2016 - 13:03

Lea otras preguntas en las etiquetas