Aggiungi classe al collegamento specifico nel menu personalizzato

So che puoi aggiungere una classe nelle opzioni di menu personalizzate, ma la aggiunge alla LI prima della A. Voglio applicare la classe direttamente a questa A specifica piuttosto che all'intera LI.

Quindi, invece di essere l'output

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

Voglio che sia così.

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

Qualche idea?

puoi usare il nav_menu_css_classfiltro

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;
}

Usando questo oggetto $ puoi qualsiasi condizione tu voglia. e questo aggiungerà la classe al li specifico e potrai modellare un tag in base a quello in questo modo:

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

Ho trovato una soluzione in questo sito tramite l'uso di un walker personalizzato .

Due passaggi: sostituisci il codice wp_nav_menu predefinito con uno modificato, quindi aggiungi il codice al function.php del tema.

Innanzitutto, sostituisci il wp_nav_code predefinito con il seguente (il codice viene copiato dal sito sopra):

    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())
     );

Quindi, aggiungi il seguente codice a Functions.php. In questo modo puoi effettivamente aggiungere una classe ai collegamenti del 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';
        }

        }
}

Verso la fine del codice sono diverse righe che iniziano con $ item_output. In particolare, vuoi guardare questo pezzo:

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

Perché questa riga determina l'output per l'inizio del collegamento html. Se lo cambi in qualcosa del genere:

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

Quindi a tutti i tuoi collegamenti nel menu verrà aggiunto class = "abc".

Detto questo, non consente una classe personalizzata per ogni collegamento (o almeno non so come codificarlo). Questo è un problema per me.

Per quelli che chiedono perché vorresti farlo? Voglio avere i miei collegamenti di menu aperti lightbox (colorboxes, per essere più specifici), e per farlo richiedono classi sui collegamenti. Per esempio:

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

Esiste forse un modo per generare dinamicamente le classi, come "lightbox1" per il primo link, "lightbox2" per il secondo link e così via?

RISOLTO !!!! Ho dovuto capire questo per rendere il collegamento della voce di menu per incorporare HTML in un fancybox. Incolla il seguente codice nel function.php del tuo tema:

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

Quindi ... nella scheda Menu della dashboard di WP, crea un collegamento personalizzato e aggiungilo al tuo menu. Nella parte superiore dove si trova Opzioni schermo, assicurati di avere "Link Relationship (XFN)" selezionato. Aggiungerà quel campo alla tua voce di menu personalizzata. Digita "fancybox" (senza virgolette) nel campo e salva il menu.

La funzione cerca la chiamata al menu di navigazione, quindi trova ovunque tu abbia un rel="fancybox"e la sostituisce con un rel="fancybox" class="fancybox". È possibile sostituire fancybox con qualsiasi classe sia necessario aggiungere alle voci del menu. Fatto e fatto!

Le risposte attuali non sembrano riconoscere che la domanda è come aggiungere una classe aall'elemento e non liall'elemento, o sono troppo complicate. Ecco un approccio semplice che utilizza il nav_menu_link_attributesfiltro che ti consente di scegliere come target un menu specifico in base alla sua lumaca e un link alla pagina specifico in quel menu in base al suo ID. Puoi var_dump $ args e $ item per ottenere altri modi per creare la tua condizione.

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;
}

So che è stata data risposta molto tempo fa, ma proprio come informazioni generali, ho scoperto come aggiungere una classe a ciascuna voce di menu singolarmente utilizzando l'opzione "Schermo" della pagina di amministrazione di WordPress per i menu personalizzati.

Di recente ho dovuto fare qualcosa di simile e ho trovato un altro modo. Ho dovuto aggiungere una classe simile per un plugin Nivo Lightbox. Quindi ho aggiunto "nivo" all'attributo rel ("Link Relationship (XFN)") e poi quanto segue sul nav_menu_link_attributesfiltro.

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

Nell'area superiore della Appearance -> Menuspagina, fare clic per espandere il Screen Options, selezionare la casella di controllo di CSS Classes. Ora quando espandi ciascuna delle voci di menu aggiunte, vedrai un CSS Classes (optional)campo.