Aggiungere una Classe a un Link Specifico nel Menu Personalizzato
So che è possibile aggiungere una classe nelle opzioni del menu personalizzato, ma questa viene aggiunta al tag LI prima del tag A. Voglio applicare la classe direttamente a questo specifico tag A invece che all'intero LI.
Quindi invece di avere come 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 utilizzare il filtro nav_menu_css_class
add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
if(tua condizione){ //esempio: puoi controllare il valore di $item per decidere qualcosa...
$classes[] = 'my_class';
}
return $classes;
}
Utilizzando questo $item puoi impostare qualsiasi condizione desideri. e questo aggiungerà la classe al li specifico e puoi stilizzare il tag a in base a ciò così:
.my_class a{
background-color: #FFFFFF;
}

Ho trovato una soluzione su questo sito attraverso l'uso di un walker personalizzato.
Due passaggi: sostituire il codice predefinito di wp_nav_menu con uno modificato e poi aggiungere codice al functions.php del tema.
Per prima cosa, sostituisci il codice wp_nav_menu predefinito con il seguente (il codice è copiato dal sito sopra citato):
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())
);
Successivamente, aggiungi il seguente codice al functions.php. Facendo questo puoi effettivamente aggiungere una classe ai link 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 ci 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 dell'html del link. Se lo cambi in qualcosa come questo:
$item_output .= '<a'. $attributes . 'class="abc"' .'>';
Allora tutti i link nel menu avranno class="abc" aggiunto ad essi.
Detto questo, non permette una classe personalizzata per ogni link (o almeno non so come codificarlo). Questo è un problema per me.
Per quelli che chiedono perché vorresti fare questo? Voglio che i link del mio menu aprano lightbox (colorbox, per essere più precisi), e richiedono classi sui link per farlo. Per esempio:
<a class="lightbox1" href="#">Photo</a>
C'è forse un modo per generare dinamicamente le classi, come "lightbox1" per il primo link, "lightbox2" per il secondo link e così via?

@Rainman la tua risposta mi è stata utile e hai posto una buona domanda. Sono sicuro che tu abbia trovato una soluzione migliore, ma per chi non l'avesse ancora fatto, ho usato una versione modificata della soluzione trovata qui: http://www.wpbeginner.com/wp-themes/how-to-add-custom-items-to-specific-wordpress-menus/

RISOLTO!!!! Avevo bisogno di capire come fare in modo che la voce del menu linkasse a HTML inline in un fancybox. Incolla il seguente codice nel file 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');
Poi... nella scheda Menu del Pannello di Controllo di WP, crea un link personalizzato e aggiungilo al tuo menu. In alto dove dice "Opzioni Schermo", assicurati di aver selezionato "Relazione Link (XFN)". Aggiungerà quel campo alla tua voce di menu personalizzata. Digita "fancybox" (senza virgolette) nel campo e salva il tuo menu.
La funzione cerca la chiamata al menu di navigazione, poi trova dove hai un rel="fancybox"
e lo sostituisce con un rel="fancybox" class="fancybox"
. Puoi sostituire fancybox con qualsiasi classe tu debba aggiungere alle voci del tuo menu. Fatto e finito!

Ottimo post!! Solo una cosa da notare. Il codice non funzionerà se qualcuno aggiunge un titolo. Mi sono imbattuto nello stesso problema... Quindi ho semplicemente rimosso il tag A dall'inizio di entrambi i valori di sostituzione. Lasciandomi con qualcosa del genere... return preg_replace('/rel="fancybox"/', 'class="fancybox"', $ulclass, -1); Il codice funziona alla grande!

Le risposte attuali non sembrano riconoscere che la domanda riguarda come aggiungere una classe all'elemento a
e non all'elemento li
, oppure sono troppo complicate. Ecco un approccio semplice che utilizza il filtro nav_menu_link_attributes
per consentirti di puntare a un menu specifico basato sul suo slug e a un link specifico in quel menu basato sul suo ID. Puoi usare var_dump su $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";
// Assicurati di non sovrascrivere eventuali classi esistenti
$atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class;
}
return $atts;
}

Sapevo che questa domanda era stata risolta molto tempo fa, ma solo come informazione generale, ho scoperto come aggiungere una classe a ciascuna voce del menu individualmente utilizzando l'opzione "Schermo" della pagina di amministrazione di WordPress per i Menu Personalizzati.

Recentemente ho dovuto fare qualcosa di simile e ho trovato un'altra soluzione. Dovevo aggiungere una classe simile per un plugin Nivo lightbox. Quindi ho aggiunto "nivo" all'attributo rel ("Link Relationship (XFN)") e poi il seguente codice sul filtro 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);
