Ajouter une classe à un lien spécifique dans le menu personnalisé

Je sais que vous pouvez ajouter une classe dans les options du menu personnalisé, mais il l'ajoute au LI avant le A. Je veux appliquer la classe directement à ce A spécifique plutôt qu'à l'ensemble du LI.

Ainsi, au lieu de la sortie étant

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

Je veux que ce soit aussi comme ça.

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

Des idées?

vous pouvez utiliser un nav_menu_css_classfiltre

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    }
    return $classes;
}

En utilisant cet article $, vous pouvez n'importe quelle condition que vous souhaitez. et cela ajoutera la classe au li spécifique et vous pouvez styler la balise a en fonction de cela comme ceci:

.my_class a{
   background-color: #FFFFFF;
}

J'ai trouvé une solution sur ce site via l'utilisation d'un déambulateur personnalisé .

Deux étapes: remplacez le code wp_nav_menu par défaut par un code modifié, puis ajoutez du code au functions.php du thème.

Tout d'abord, remplacez le wp_nav_code par défaut par le suivant (le code est copié à partir du site ci-dessus):

    wp_nav_menu( array(
     'menu' => 'Main Menu',
     'container' => false,
     'menu_class' => 'nav',
     'echo' => true,
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'walker' => new description_walker())
     );

Ensuite, ajoutez le code suivant à functions.php. En faisant cela, vous pouvez réellement ajouter une classe aux liens du menu:

class description_walker extends Walker_Nav_Menu
{

  function start_el(&$output, $item, $depth, $args)
  {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

       $class_names = $value = '';

       $classes = empty( $item->classes ) ? array() : (array) $item->classes;

       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
       $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

                    if ($item->menu_order == 1) {
            $classes[] = 'first';
        }

        }
}

Vers la fin du code, plusieurs lignes commencent par $ item_output. En particulier, vous voulez regarder cette pièce:

$item_output .= '<a'. $attributes .'>';

Parce que cette ligne détermine la sortie pour le début du lien HTML. Si vous le changez en quelque chose comme ceci:

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

Ensuite, tous vos liens dans le menu auront la classe = "abc" ajoutée à eux.

Cela dit, il n'autorise pas de classe personnalisée pour chaque lien (ou du moins je ne sais pas comment le coder). C'est un problème pour moi.

Pour ceux qui demandent pourquoi voudriez-vous faire cela? Je veux que mes liens de menu ouvrent des lightboxes (colorboxes, pour être plus précis), et ils ont besoin de classes sur les liens pour le faire. Par exemple:

<a class="lightbox1" href="#">Photo</a>

Existe-t-il un moyen de générer dynamiquement les classes, telles que "lightbox1" pour le premier lien, "lightbox2" pour le deuxième lien, etc.?

RESOLU !!!! J'avais besoin de comprendre cela pour créer le lien de l'élément de menu pour HTML en ligne dans une boîte fantaisie. Collez le code suivant dans la fonction de votre thème: php:

function add_menuclass($ulclass) {
    return preg_replace('/<a rel="fancybox"/', '<a class="fancybox"', $ulclass, -1);
}
add_filter('wp_nav_menu','add_menuclass');

Ensuite ... dans l'onglet Menu du tableau de bord WP, ​​créez un lien personnalisé, ajoutez-le à votre menu. En haut, où est indiqué Options d'écran, assurez-vous que vous avez coché "Lien relation (XFN)". Il ajoutera ce champ à votre élément de menu personnalisé. Tapez "fancybox" (sans guillemets) dans le champ et enregistrez votre menu.

La fonction recherche l'appel au menu de navigation, puis trouve où vous avez un rel="fancybox"et le remplace par un rel="fancybox" class="fancybox". Vous pouvez remplacer fancybox par la classe que vous souhaitez ajouter à vos éléments de menu. Fait et fait!

Les réponses actuelles ne semblent pas reconnaître que la question est de savoir comment ajouter une classe à l' aélément et non l' liélément, ou sont trop compliquées. Voici une approche simple utilisant le nav_menu_link_attributesfiltre qui vous permet de cibler un menu spécifique en fonction de son slug et un lien de page spécifique dans ce menu en fonction de son ID. Vous pouvez var_dump $ args et $ item pour obtenir plus de façons de créer votre condition.

add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 4);

function custom_nav_menu_link_attributes($atts, $item, $args, $depth){
    if ($args->menu->slug == 'your-menu-slug' && $item->ID == 1){

        $class = "button";

        // Make sure not to overwrite any existing classes
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}

Je sais que cela a été répondu il y a longtemps, mais tout comme des informations générales, j'ai trouvé comment ajouter une classe à chaque élément de menu individuellement en utilisant l'option "Écran" de la page d'administration WordPress pour les menus personnalisés.

J'ai dû faire quelque chose de similaire récemment et j'ai trouvé une autre façon. J'ai dû ajouter une classe similaire pour un plugin Nivo lightbox. J'ai donc ajouté "nivo" à l'attribut rel ("Link Relationship (XFN)"), puis le suivant sur le nav_menu_link_attributesfiltre.

function add_nivo_menuclass($atts, $item, $args) {
    if( is_array($atts) && !empty($atts['rel']) && $atts['rel'] = 'nivo' ) {
        $atts['class'] = 'lightbox';
        $atts['data-lightbox-type'] = 'inline';
    }

    return $atts;

    }
add_filter('nav_menu_link_attributes','add_nivo_menuclass', 0,3);

Dans la zone supérieure de la Appearance -> Menuspage, cliquez pour développer la Screen Options, cochez la case de CSS Classes. Maintenant, lorsque vous développez chacun des éléments de menu ajoutés, vous verrez un CSS Classes (optional)champ.