web-dev-qa-db-fra.com

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

Je sais que vous pouvez ajouter une classe dans les options de menu personnalisées, mais elle l’ajoute à la LI avant le A. Je souhaite appliquer la classe directement à cet A spécifique plutôt qu’à l’ensemble du LI.

Donc, au lieu d'être la sortie

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

Je le veux aussi être 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?

menus
10
user3407

vous pouvez utiliser le filtre nav_menu_css_class

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 utiliser n'importe quelle condition. et cela ajoutera la classe au li spécifique et vous pourrez styler la balise a en fonction de cette façon:

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

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

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

Tout d'abord, remplacez le code 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 class = "abc" ajouté à eux.

Cela dit, il ne permet pas une 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 menus ouvrent des lightboxes (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 éventuellement un moyen de générer dynamiquement les classes, telles que "lightbox1" pour le premier lien, "lightbox2" pour le deuxième lien, etc.?

4
Raiman Au

Résolu !!!! J'avais besoin de comprendre cela pour que l'élément de menu soit lié au HTML incorporé dans une boîte fantaisie. Collez le code suivant dans le fichier function.php de votre thème:

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 WP Tableau de bord, créez un lien personnalisé, ajoutez-le à votre menu. En haut, à la rubrique Options d'écran, assurez-vous que la case "Relation de lien (XFN)" est cochée. 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 du 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!

3
HahahaComedy

Les réponses actuelles ne semblent pas reconnaître que la question est de savoir comment ajouter une classe à l'élément a et non à l'élément li, ou sont trop compliquées. Voici une approche simple utilisant le filtre nav_menu_link_attributes 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 avoir 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;
}
1
MarcGuay

Dans la partie supérieure de la page Appearance -> Menus, développez le Screen Options, cochez la case CSS Classes. Désormais, lorsque vous développez chacun des éléments de menu ajoutés, vous verrez un champ CSS Classes (optional).

0
Unicornist

Je sais que cela a été répondu il y a longtemps, mais juste à titre d'information générale, 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.

0
RaiGA

Je devais faire quelque chose de similaire récemment et imaginé 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 filtre nav_menu_link_attributes.

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