Adaugă Clasă la Link Specific în Meniul Personalizat

poți utiliza filtrul nav_menu_css_class

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(condiția ta){ //exemplu: poți verifica valoarea lui $item pentru a decide...
        $classes[] = 'my_class';
    }
    return $classes;
}

Folosind acest $item poți implementa orice condiție dorești. Aceasta va adăuga clasa la elementul li specific și poți stiliza tag-ul a în funcție de aceasta astfel:

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

Am găsit o soluție pe acest site prin utilizarea unui walker personalizat.

Doi pași: înlocuiește codul implicit wp_nav_menu cu unul editat, apoi adaugă cod în functions.php al temei.

Mai întâi, înlocuiește codul implicit wp_nav_menu cu următorul (codul este copiat de pe site-ul menționat mai sus):

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

Apoi, adaugă următorul cod în functions.php. Prin aceasta poți adăuga efectiv o clasă la link-urile din meniu:

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

        }
}

Spre finalul codului sunt câteva linii care încep cu $item_output. În special, vrei să te uiți la această bucată:

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

Pentru că această linie determină output-ul pentru începutul HTML-ului link-ului. Dacă o schimbi în ceva de genul:

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

Atunci toate link-urile din meniu vor avea adăugată clasa="abc".

Cu toate acestea, nu permite o clasă personalizată pentru fiecare link (sau cel puțin nu știu cum să o codez). Aceasta este o problemă pentru mine.

Pentru cei care întreabă de ce ai vrea să faci asta? Vreau ca link-urile din meniul meu să deschidă lightbox-uri (mai exact colorbox-uri), iar acestea necesită clase pe link-uri pentru a funcționa. De exemplu:

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

Există oare o modalitate de a genera clasele dinamic, cum ar fi "lightbox1" pentru primul link, "lightbox2" pentru al doilea link și așa mai departe?

REZOLVAT!!!! Am avut nevoie să găsesc această soluție pentru a face ca un element de meniu să se lege de HTML inline într-un fancybox. Lipiți următorul cod în fișierul functions.php al temei dumneavoastră:

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

Apoi... în fila Meniu din Panoul de Control WordPress, creați un link personalizat și adăugați-l în meniu. În partea de sus unde scrie "Opțiuni Ecran", asigurați-vă că aveți bifată opțiunea "Relație Link (XFN)". Aceasta va adăuga câmpul respectiv la elementul de meniu personalizat. Tastați "fancybox" (fără ghilimele) în acel câmp și salvați meniul.

Funcția caută apelul către meniul de navigare, apoi găsește oriunde aveți un rel="fancybox" și îl înlocuiește cu un rel="fancybox" class="fancybox". Puteți înlocui fancybox cu orice clasă aveți nevoie să adăugați la elementele de meniu. Gata și rezolvat!

Răspunsurile actuale nu par să recunoască faptul că întrebarea este cum să adaugi o clasă elementului a și nu elementului li, sau sunt prea complicate. Iată o abordare simplă folosind filtrul nav_menu_link_attributes care îți permite să țintești un meniu specific bazat pe slug-ul său și un link specific din acel meniu bazat pe ID-ul său. Poți folosi var_dump pe $args și $item pentru a obține mai multe modalități de a-ți crea condiția.

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

        // Asigură-te că nu suprascrii clasele existente
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}

Știu că acest lucru a fost răspuns cu mult timp în urmă, dar doar ca informație generală, am descoperit cum să adaug o clasă fiecărui element de meniu individual folosind opțiunea "Screen" din pagina de administrare WordPress pentru Meniuri Personalizate.

A trebuit să fac ceva similar recent și am descoperit o altă metodă. A trebuit să adaug o clasă similară pentru un plugin Nivo lightbox. Așa că am adăugat "nivo" la atributul rel ("Link Relationship (XFN)") și apoi următorul cod pe filtrul 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);

În partea superioară a paginii Apariție -> Meniuri, faceți clic pentru a extinde Opțiuni Ecran, bifați caseta de selectare Clase CSS. Acum, când extindeți fiecare element de meniu adăugat, veți vedea un câmp Clase CSS (opțional).