web-dev-qa-db-fra.com

Menu Wordpress - Ajouter une classe aux ancres

Essayer d'ajouter la classe d'amorçage standard "nav-link" aux ancres rendues par le menu Wordpress. Jusque là ...

1/Je peux transmettre des variables à wp_nav_menu ()

<?php wp_nav_menu(array(
                            'theme_location' => 'header-menu',
                            'menu_class' => 'navbar-nav',
                            'container' => 'false'
        ) );
        ?>

et appliquez une classe au menu de cette façon, et supprimez le div contenant.

2/J'utilise ensuite l'interface utilisateur Wordpress Appearances> Menu pour appliquer la classe "nav-item" aux balises li.

Q. Comment appliquer une classe à l'ancre de menu wordpress

wordpresswordpress-theming
5
TimothyAURA

Vous pouvez faire ce dont vous avez besoin avec le hook WP nav_menu_link_attributes:

add_filter( 'nav_menu_link_attributes', function($atts) {
        $atts['class'] = "nav-link";
        return $atts;
}, 100, 1 );

... ou si vous n'aimez pas les fermetures:

function add_link_atts($atts) {
  $atts['class'] = "nav-link";
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Filtrer les éléments de la liste du menu

Pour éviter d'utiliser l'interface utilisateur du menu WordPress pour ajouter des classes aux éléments de la liste de menus, vous pouvez tirer parti du filtre 'nav_menu_css_class':

add_filter( 'nav_menu_css_class', function($classes) {
    $classes[] = 'nav-item';
    return $classes;
}, 10, 1 );
22
DavidCara

Les paramètres de wp_nav_menu () w ne vous permettront pas d’ajouter une classe à vos liens avec la fonctionnalité par défaut. Cela vous permettrait d'insérer votre <a href="#"></a> dans un code HTML tel que <span class="wrapped-anchor"><a href="#"></a></span> si vous utilisez:

<?php 
   $parameters = TimothyAURA->set_specific_parameters_you_want(); // i mean, realy fullfill the array with the options you want based on the docs.
   $parameters['before'] = '<span class="wrapped-anchor">';
   $parameters['after'] = '</span>';
   wp_nav_menu($parameters);

Si vous avez vraiment besoin pour définir une classe pour vos ancres, vous devrez passer un objet Walker. Vous auriez besoin de lire et de comprendre cette documentation spécifique à ce sujet, cependant.

1
Rubén Marrero

Cela vous permet d’ajouter des classesUNIQUEMENTaux ancres d’un menu spécifique. Ajoutez simplement vos classes dans les valeurs $menuClassMap ci-dessous.

    function mytheme__menu_anchors_add_css( $atts, $item, $args ) {

        $menuClassMap = [
            'navbar-menu' => 'my-footer-menu-link-class',
            'footer-menu' => 'my-footer-menu-link-class',
        ];

        $additionalClassName = $menuClassMap[$args->menu->slug] ?? '';

        if($additionalClassName){
            if(!array_key_exists('class', $atts)){
                $atts['class'] = '';
            }
            $classList = explode (' ' , $atts['class']);
            $classList[] = $additionalClassName;
            $atts['class'] = implode (' ' , $classList);
        }
        return $atts;

    }

    add_filter( 'nav_menu_link_attributes', 'mytheme__menu_anchors_add_css', 10, 3 );
0
Fusion