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

10

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?

Rarst
la source
Pour être clair, que voulez-vous dire par ajouter de la classe? Sur quelles options cliquez-vous exactement dans le panneau d'administration?
Wordpressor
2
À quoi ça sert? Changez simplement votre sélecteur de .classà .class a?
wyrfel
1
Ouais je ne comprends pas non plus, il suffit de configurer votre CSS pour cibler le lien en fonction de l' <li>élément contenant . Si vous avez un sous-menu sous cet élément particulier, ce n'est pas un problème, vous pouvez le résoudre dans le CSS pour (je peux donner des exemples si nécessaire).
t31os
+1 pour votre commentaire @wyrfel ... @ Picard102 jetez un oeil à la spécificité css. cela vous expliquera également comment cibler correctement les éléments html via css.
kaiser

Réponses:

11

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;
}
Bainternet
la source
J'essaie d'ajouter une classe pour les éléments avec un modèle de page spécifique, mais je ne peux pas get_page_template_slugtravailler. Des idées?
Bill
4

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.?

Raiman Au
la source
@Rainman, votre réponse m'a un peu aidé et vous avez posé une bonne question. Je suis sûr que vous avez trouvé une meilleure solution, mais pour ceux qui ne l'ont pas fait, j'ai utilisé une version modifiée de la solution trouvée ici: wpbeginner.com/wp-themes/…
NW Tech
3

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!

HahahaComedy
la source
Très bonne publication!! Une seule chose à noter. Le code ne fonctionnera pas si quelqu'un ajoute un titre. J'ai rencontré le même problème ... Je viens donc de supprimer la balise A au début des deux valeurs de remplacement. Me laissant avec quelque chose comme ça ... return preg_replace ('/ rel = "fancybox" /', 'class = "fancybox"', $ ulclass, -1); Le code fonctionne très bien!
1

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;
}
MarcGuay
la source
merci beaucoup, je change la if pour if ($args->theme_location == 'footer-menu' )de jeter un regard dans le menu par son emplacement, et tout fonctionne très bien
efirvida
0

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.

RaiGA
la source
0

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

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.

Licorne
la source