web-dev-qa-db-fra.com

Comment ajouter une classe dans <li> en utilisant wp_nav_menu () dans Wordpress?

J'utilise wp_nav_menu($args) et je souhaite ajouter my_own_class nom de classe CSS à l'élément <li> pour obtenir le résultat suivant:

<li class='my_own_class'><a href=''>Link</a>

Comment faire ça?

wordpress
24
Ayyaz Zafar

ICI WordPress ajoute une classe personnalisée dans les liens wp_nav_menu

OU Vous pouvez ajouter la classe <li class='my_own_class'><a href=''>Link</a></li> à partir du panneau d'administration:

  1. Aller au YOURSITEURL/wp-admin/nav-menus.php

  2. ouvrir SCREEN OPTIONS

  3. faites cocher CSS CLASSES, alors vous verrez le champ CSS Classes (optional) dans chaque lien de menu.
51
Rameez SOOMRO

Vous pouvez ajouter un filtre pour l'action nav_menu_css_class dans votre fichier functions.php.

Exemple:

function atg_menu_classes($classes, $item, $args) {
  if($args->theme_location == 'secondary') {
    $classes[] = 'list-inline-item';
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);

Docs: https://developer.wordpress.org/reference/hooks/nav_menu_css_class/

45
Andres F Garcia

Pas besoin de créer un marcheur personnalisé. Utilisez simplement un argument supplémentaire et définissez un filtre pour nav_menu_css_class.

Par exemple:

$args = array(
    'container'     => '',
    'theme_location'=> 'your-theme-loc',
    'depth'         => 1,
    'fallback_cb'   => false,
    'add_li_class'  => 'your-class-name1 your-class-name-2'
    );
wp_nav_menu($args);

Notez le nouvel argument 'add_li_class'.

Et définissez le filtre sur functions.php

function add_additional_class_on_li($classes, $item, $args) {
    if($args->add_li_class) {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
10
Zunan

utilisez ce filtre nav_menu_css_class comme indiqué ci-dessous

function add_classes_on_li($classes, $item, $args) {
    $classes[] = 'nav-item';
    return $classes;
}
add_filter('nav_menu_css_class','add_classes_on_li',1,3);
8
Regolith

Ajout de la classe à la balise <li> sans modifier le fichier functions.php:

  1. Allez à Apparence -> Menu -> Options d’écran -> Classes CSS
  2. L'option de classe CSS sera activée dans la fenêtre Menu Items

 enter image description here

6
Trupti

Aucune de ces réponses ne semble vraiment répondre à la question. Voici quelque chose de similaire à ce que j'utilise sur l'un de mes sites en ciblant un élément de menu par son titre/nom:

function add_class_to_menu_item($sorted_menu_objects, $args) {
    $theme_location = 'primary_menu';  // Name, ID, or Slug of the target menu location
    $target_menu_title = 'Link';  // Name/Title of the menu item you want to target
    $class_to_add = 'my_own_class';  // Class you want to add

    if ($args->theme_location == $theme_location) {
        foreach ($sorted_menu_objects as $key => $menu_object) {
            if ($menu_object->title == $target_menu_title) {
                $menu_object->classes[] = $class_to_add;
                break; // Optional.  Leave if you're only targeting one specific menu item
            }
        }
    }

    return $sorted_menu_objects;
}
add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2);
1
Mike

Pourquoi ne pas utiliser simplement str_replace function, si vous voulez juste "Ajouter des classes": 

<?php
    echo str_replace( '<li class="', '<li class="myclass ',
        wp_nav_menu(
            array(
                'theme_location'    => 'main_menu',
                'container'         => false,
                'items_wrap'        => '<ul>%3$s</ul>',
                'depth'             => 1,
                'echo'              => false
            )
        )
    );
?>

C'est une solution rapide pour les menus à un niveau ou les menus auxquels vous souhaitez ajouter des classes à tous les éléments <li>; elle n'est pas recommandée pour les menus plus complexes

0
Amin

Le bon pour moi est la solution Zuan. Sachez que vous devez ajouter isset à $args->add_li_class, cependant vous aurez Notice: Undefined property: stdClass::$add_li_class si vous n'avez pas défini la propriété dans toutes vos fonctions wp_nav_menu().

C'est la fonction qui a fonctionné pour moi:

function add_additional_class_on_li($classes, $item, $args) {
    if(isset($args->add_li_class)) {
      $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
0
rovente
<?php
    echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">',
            wp_nav_menu(
                    array(
                        'menu' => $nav_menu, 
                        'container'  => false,
                        'container_class'   => false,
                        'menu_class'        => false,
                        'items_wrap'        => '%3$s',
                                            'depth'             => 1,
                                            'echo'              => false
                            )
                    )
            );
?>
0
Tamal Sarker

Sans walker menu, il n'est pas possible de l'ajouter directement. Vous pouvez cependant l'ajouter en javascript. 

$('#menu > li').addClass('class_name');
0
Atiqur R.