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

9

Sé que puede agregar una clase en las opciones de menú personalizadas, pero la agrega a la LI antes de la A. Quiero aplicar la clase directamente a esta A específica en lugar de toda la 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>

¿Alguna idea?

    
pregunta Rarst 22.02.2011 - 21:12

6 respuestas

11

puedes usar nav_menu_css_class filter

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 puedes cualquier condición que desees. y esto agregará la clase a la li específica y puede aplicar un estilo a la etiqueta en función de eso:

.my_class a{
   background-color: #FFFFFF;
}
    
respondido por el Bainternet 22.02.2011 - 22:10
4

Encontré una solución en este sitio a través de el uso de un caminante personalizado .

Dos pasos: reemplace el código predeterminado de wp_nav_menu con uno editado y luego agregue un código a las funciones.php del tema.

Primero, reemplace el código wp_nav 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, puedes 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 inicio del enlace html. Si lo cambias por algo como esto:

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

Luego, todos los enlaces en el menú tendrán una clase="abc" agregada.

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é querría hacer esto? quiero que los enlaces de mis menús abran los lightboxes (los cuadros de colores, para ser más específicos), y requieren clases en los enlaces para hacerlo. Por ejemplo:

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

¿Es posible que haya una forma de generar dinámicamente las clases, como "lightbox1" para el primer enlace, "lightbox2" para el segundo enlace, etc.?

    
respondido por el Raiman Au 29.03.2011 - 08:47
3

SOLUCIONADO !!!! Necesitaba resolver esto para hacer que el enlace del elemento del menú a HTML en línea en un fancybox. Pegue el siguiente código en function.php de su 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 WP, cree un enlace personalizado y agréguelo a su menú. En la parte superior donde se dice Opciones de pantalla, asegúrese de tener marcada la opción "Relación de enlace (XFN)". Agregará ese campo a su elemento de menú personalizado. Escribe "fancybox" (sin comillas) en el campo y guarda tu menú.

La función busca la llamada al menú de navegación, luego busca donde tiene un rel="fancybox" y lo reemplaza por un rel="fancybox" class="fancybox" . Puede reemplazar fancybox con cualquier clase que necesite para agregar a los elementos de su menú. Hecho y hecho!

    
respondido por el HahahaComedy 14.12.2011 - 22:47
1

Las respuestas actuales no parecen reconocer que la pregunta es cómo agregar una clase al elemento a y no al elemento li , o son demasiado complicadas. Este es un enfoque simple que usa el filtro nav_menu_link_attributes que le permite apuntar a un menú específico basado en su barra y un enlace a una página específica en ese menú basado en 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;
}
    
respondido por el MarcGuay 06.03.2016 - 21:17
0

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

    
respondido por el RaiGA 21.11.2011 - 21:49
0

Hace poco tuve que hacer algo similar y descubrí otra manera. 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 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);
    
respondido por el darrinb 08.01.2015 - 02:28

Lea otras preguntas en las etiquetas