Agregar clase a un enlace específico en el menú personalizado

Sé que puede agregar una clase en las opciones del menú personalizado, pero lo agrega al LI antes del A. Quiero aplicar la clase directamente a este A específico en lugar de todo el LI.

Entonces, en lugar de que la salida sea

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

Yo también quiero que sea así.

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

¿Algunas ideas?

puedes usar 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 este $ item puede cualquier condición que desee. y esto agregará la clase a la li específica y puede diseñar una etiqueta basada en eso de la siguiente manera:

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

Encontré una solución en este sitio mediante el uso de un andador personalizado .

Dos pasos: reemplace el código predeterminado wp_nav_menu con uno editado, y luego agregue el código a functions.php del tema.

Primero, reemplace el wp_nav_code predeterminado con lo siguiente (el código se copia del sitio anterior):

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

A continuación, agregue el siguiente código a functions.php. Al hacer esto, puede agregar una clase a los enlaces del menú:

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

        }
}

Hacia el final del código hay varias líneas que comienzan con $ item_output. En particular, desea ver esta pieza:

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

Porque esta línea determina la salida para el comienzo del enlace html. Si lo cambia a algo como esto:

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

Entonces todos sus enlaces en el menú tendrán class = "abc" agregado a ellos.

Dicho esto, no permite una clase personalizada para cada enlace (o al menos no sé cómo codificarlo). Este es un problema para mí.

Para aquellos que preguntan ¿por qué quieres hacer esto? Quiero que mis enlaces de menú abran cajas de luz (cajas de colores, para ser más específicos), y requieren clases en los enlaces para hacerlo. Por ejemplo:

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

¿Hay alguna manera de generar dinámicamente las clases, como "lightbox1" para el primer enlace, "lightbox2" para el segundo enlace, y así sucesivamente?

¡RESUELTO! Necesitaba resolver esto para hacer que el elemento del menú se vincule a HTML en línea en un fancybox. Pega el siguiente código en el function.php de tu tema:

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

Luego ... en la pestaña Menú del Panel de control de WP, cree un enlace personalizado y agréguelo a su menú. En la parte superior donde dice Opciones de pantalla, asegúrese de tener marcada "Relación de enlace (XFN)". Agregará ese campo a su elemento de menú personalizado. Escriba "fancybox" (sin comillas) en el campo y guarde su menú.

La función busca la llamada al menú de navegación, luego encuentra donde tenga a rel="fancybox"y la reemplaza con a rel="fancybox" class="fancybox". Puede reemplazar fancybox con cualquier clase que necesite agregar a sus elementos de menú. ¡Hecho y hecho!

Las respuestas actuales no parecen reconocer que la pregunta es cómo agregar una clase al aelemento y no el lielemento, o son demasiado complicadas. Aquí hay un enfoque simple que utiliza el nav_menu_link_attributesfiltro que le permite orientar un menú específico en función de su slug y un enlace de página específico en ese menú en función de su ID. Puede var_dump $ args y $ item para obtener más formas de crear su condición.

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

Sé que esto fue respondido hace mucho tiempo, pero solo como información general, encontré cómo agregar una clase a cada elemento del menú individualmente usando la opción "Pantalla" de la página de administración de WordPress para menús personalizados.

Tuve que hacer algo similar recientemente y descubrí otra forma. Tuve que agregar una clase similar para un complemento de Nivo lightbox. Así que agregué "nivo" al atributo rel ("Relación de enlace (XFN)") y luego lo siguiente en el 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);

En el área superior de la Appearance -> Menuspágina, haga clic para expandir Screen Options, marque la casilla de verificación de CSS Classes. Ahora, cuando expanda cada uno de los elementos de menú agregados, verá un CSS Classes (optional)campo.