Agregar clases personalizadas a enlaces en wp_nav_menu

Question

Agregar clases personalizadas a enlaces en wp_nav_menu

29 jul 2014, 15:11:04

Vistas: 36.7K

Votos: 10

Quiero agregar una clase personalizada a los enlaces en las salidas de wp_nav_menu.

Por defecto, por ejemplo es:

<li id="menu-item" class="menu-item menu-item-type-custom">
    <a href="http://example.com">ejemplo</a>
</li>

Quiero esto:

<li id="menu-item" class="menu-item menu-item-type-custom ">
    <a href="http://example.com" class="class">ejemplo</a>
</li>

Hector

682

desarrollo de temas menús temas ganchos navegación

Todas las respuestas a la pregunta

Comentarios

¿Cómo podría acomodar múltiples atts diferentes dentro del anchor? Es decir, no solo agregar clases sino también añadir aria-expanded="false"?

Robert Andrews

18 jul 2018 14:48:24

Como en la tercera línea de la función.

cjbj

18 jul 2018 14:52:51

Tengo una mejor solución https://stackoverflow.com/a/67859550/9207553

Mohammad Ayoub Khan

6 jun 2021 16:19:37

Tengo una solución para añadir una clase a la etiqueta de anclaje.

1: Paso: añade esto en functions.php

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

2: Luego utilízalo así en tu tema

<?php
        // Mostrar menú aquí
        wp_nav_menu(array(
            'theme_location' => 'my-footer-menu',
            'menu_class'      => 'footer-top list-unstyled',
            'add_a_class'     => 'box-link text-dark',
        ));
?>

Mohammad Ayoub Khan

191

6 jun 2021 16:41:50

Puedes añadir clases de forma nativa mediante la interfaz en el administrador. Abre Opciones de pantalla (en la parte superior derecha de la pantalla) y marca Clases CSS. No recuerdo si la clase se aplica al enlace en sí, pero siempre puedes seleccionar el enlace dentro del contenedor con CSS (.clase a).

Rarst

100K

29 jul 2014 17:34:55

Comentarios

Admin permite aplicar CSS solo a elementos <li>, no a elementos <a> como desea el que pregunta.

Fusion

14 feb 2019 04:27:28

Esto no añade una clase a la etiqueta anchor, solo al li que la contiene.

Lisa

26 jun 2023 21:06:14

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $classes, $item, $args ) {
    if(isset($args->add_link_class)) {
        $classes['class'] = $args->add_link_class;
    }
    return $classes;
}

Ahora puedes usar add_link_class como un array en los menús.

kunal

1

19 sept 2020 15:32:52

cjbj 15K · Accepted Answer · 2016-09-30T12:41:59Z

Puedes hacer esto con el filtro nav_menu_link_attributes.

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $atts, $item, $args ) {
    $class = 'class'; // o algo basado en $item
    $atts['class'] = $class;
    return $atts;
}

cjbj

15K

30 sept 2016 12:41:59