web-dev-qa-db-fra.com

Comment ajouter des classes (css) à un seul wp_nav_menu ()?

Modifier

J'ai enlevé la question initiale car ce Q a bien plus de 1 000 vues à présent - ce qui signifie qu'il est important pour beaucoup de gens - de vous montrer quelque chose qui fonctionne a) sans un Walker & b) personnalisé, c'est facile. Note: J'ai seulement enlevé à Q original, parce que c'était assez peu spectaculaire.

La tâche

Ajoutez des classes css à tous les éléments du menu de navigation dans un menu de navigation spécifique ajouté via Apparence (Menu de l'interface utilisateur)> Menu.

La fonction

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

Était-ce utile? N'oubliez pas de voter! :)

theme-developmentmenuscss
2
kaiser

Je vais commencer par dire quelque chose de similaire à Horttcore ..

Y a-t-il une raison pour laquelle vous ne pouvez pas simplement fournir un élément conteneur différent pour un menu donné, il devrait fournir suffisamment de spécificité pour le style unique.

Bien que vous puissiez faire quelque chose comme ceci pour conditionner les arguments de menu en fonction de l'emplacement du menu.

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

Le code ci-dessus est basé sur l'exemple donné sur la page de codex pour wp_nav_menu, et pourrait facilement être étendu pour faire un nombre quelconque de choses.
http://codex.wordpress.org/Function_Reference/wp_nav_menu

J'espère que cela pourra aider..

3
t31os

J'ai eu un problème très similaire. Je devais cibler une wp_nav_menu() spécifique et remplacer les liens a par une classe. Voici ma solution en référence à l'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 );

Vous pouvez l'utiliser pour remplacer n'importe quel élément de vos menus de navigation. J'espère que cela t'aides.

1
Timothy Brand

Je me suis peut-être trompé, mais pourquoi ne pas ajouter la classe à votre thème? Spécifiez la classe lorsque vous appelez le menu.

<?php wp_nav_menu( array( 'theme_location' => 'Top Nav', 'menu_class' => 'span-3' ) ); ?>
1
Horttcore

Pour ajouter une classe CSS à un élément de menu, sélectionnez Apparence> Menu> Options d'écran (en haut à droite de l'écran) et assurez-vous queCSS Classesest coché. Cela vous permettra d’ajouter des classes CSS à chaque élément de menu. Pour plusieurs noms de classe, séparez chaque élément par un espace, par exemple:

my-class-one my-class-two
0
quratulain qadir