web-dev-qa-db-fra.com

Ajout de différentes classes à ancrer dans le menu de navigation

Est-ce possible?

Je veux ajouter différentes classes aux ancres, donc pas les mêmes sur toutes les ancres. Comment puis-je faire ceci?

PS: J'utilise ceci:

function add_nav_class($output) {
    $output= preg_replace('/<a/', '<a class="your-class"', $output, 1);
    return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

Mais je veux ajouter différentes classes aux liens ...

Alors comme ça:

<li><a class="1></a></li>
<li><a class="2></a></li>

etc...

menusnavigationlinkssub-menu
2
Johan

Oui c'est possible.

Vous pouvez y parvenir en utilisant le filtre wp_nav_menu_objects.

function my_wp_nav_menu_objects($objects, $args) {
    foreach($objects as $key => $item) {
        $objects[$key]->classes[] = 'my-class';
    }
    return $objects;
}
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);

Le seul problème est que ces classes seront ajoutées aux éléments li et non directement aux liens. Mais c'est le comportement par défaut de WordPress et je ne pense pas que vous devriez le changer.

Si vous devez vraiment le changer, il est toujours possible:

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    // you can put your if statements in here (use item, depth and args in conditions)
    if ( $depth == 1 ) {
        $item_output = preg_replace('/<a /', '<a class="level-1-menu" ', $item_output, 1);
    } else if ( $depth == 2 )
        $item_output = preg_replace('/<a /', '<a class="level-2-menu" ', $item_output, 1);
    }
    // .. and so on
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);
2
Krzysiek Dróżdż

vous pouvez suivre les étapes ci-dessous:

Étape 1: Dans wp-admin, allez à Apparence -> Menus, placez la classe sur l'élément de menu ici "Classes CSS (facultatif)". Si vous ne voyez pas les "Classes CSS (facultatif)" dans l'élément de menu, il y a "Option d'écran" dans le coin supérieur droit de l'écran et les options "Classe CSS" sous "Afficher les propriétés du menu avancé".

Étape 2: Sous votre dossier folder/function.php, ajoutez le code ci-dessous:

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    $classes     = implode(' ', $item->classes);
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

J'espère que le code ci-dessus fonctionne pour vous, laissez-moi savoir si cela ne fonctionne toujours pas.

5
Hardy Mathew