Opción 1:
Opción 2:
function agregar_clases_personalizadas_a_li($classes, $item, $args) {
// Añade una clase personalizada a todos los elementos
- del menú
$classes[] = ‘mi-clase-li’;// Puedes aplicar condicionales para añadir clases a ciertos elementos del menú
if(in_array(‘menu-item-has-children’, $item->classes)) {
$classes[] = ‘tiene-submenu’; // Si tiene submenú, añadir una clase específica
}return $classes;
}
add_filter(‘nav_menu_css_class’, ‘agregar_clases_personalizadas_a_li’, 10, 3);
2. Clases personalizadas para los enlaces ():
Puedes usar el filtro nav_menu_link_attributes para añadir clases o atributos a los enlaces dentro de los menús:
function agregar_clases_personalizadas_a_a($atts, $item, $args) {
// Añade una clase personalizada a todos los enlaces del menú
$atts['class'] = 'mi-clase-a';
// Si el elemento tiene submenú, puedes agregar más clases personalizadas
if(in_array('menu-item-has-children', $item->classes)) {
$atts['class'] .= ' tiene-submenu-link';
}
return $atts;
}
add_filter('nav_menu_link_attributes', 'agregar_clases_personalizadas_a_a', 10, 3);
3. Clases personalizadas para los submenús (.sub-menu):
Si quieres añadir clases a los submenús, puedes modificar la estructura utilizando un filtro como wp_nav_menu_objects o walker_nav_menu_start_el.
Aquí te dejo un ejemplo básico de cómo hacerlo usando wp_nav_menu_objects:
function agregar_clases_personalizadas_a_submenu($sorted_menu_items, $args) {
foreach ($sorted_menu_items as $item) {
// Si el elemento tiene submenú
if (in_array('menu-item-has-children', $item->classes)) {
$item->classes[] = 'mi-clase-submenu';
}
}
return $sorted_menu_items;
}
add_filter('wp_nav_menu_objects', 'agregar_clases_personalizadas_a_submenu', 10, 2);
Opción 3:
Usar CSS personalizado en style.css
Después de añadir las clases personalizadas, puedes definir estilos específicos en tu archivo style.css o en el CSS adicional desde el personalizador de WordPress.
/* Estilo para los elementos
- del menú */
.mi-clase-li {
background-color: #f5f5f5;
}/* Estilo para los enlaces del menú */
.mi-clase-a {
color: #333;
font-weight: bold;
}/* Estilo para los submenús */
.mi-clase-submenu {
background-color: #fafafa;
}/* Submenús, cuando el padre tiene un submenú */
.tiene-submenu .sub-menu {
display: none; /* Oculto por defecto */
}/* Mostrar submenús al hacer hover */
.tiene-submenu:hover .sub-menu {
display: block;
}
Resumen:
Personalizador de WordPress: Puedes añadir clases CSS a los elementos de menú individualmente desde el personalizador de menús.
Funciones PHP: Puedes agregar clases dinámicas a los elementos del menú (li, a, .sub-menu) utilizando filtros como nav_menu_css_class, nav_menu_link_attributes y wp_nav_menu_objects.
CSS personalizado: Después de agregar las clases, es importante definir los estilos que aplicarán a esos elementos desde el archivo style.css.
Cada enfoque te da la flexibilidad para personalizar tu menú de la manera que mejor se ajuste a tus necesidades.
Deja una respuesta