Simplemente podría agregar una clase CSS personalizada al primer y último elemento del menú, pero si el menú se reorganiza, esos elementos ya no serán el primero y el último.
En este artículo, le mostraremos cómo agregar una clase .first y .last que aplicará estilo al primer y último elemento del menú incluso si se reordenan los elementos del menú.
¿Por qué aplicar un estilo diferente al primer y último elemento de navegación?
En un proyecto de diseño personalizado anterior, necesitábamos agregar algunos estilos personalizados a los elementos del menú de navegación de un sitio web de WordPress. Este diseño en particular requería un estilo diferente para el primer elemento del menú y el último elemento del menú.
Ahora podríamos editar fácilmente el menú y agregar una clase CSS personalizada al primer y último elemento del menú. Pero debido a que estábamos entregando el proyecto a un cliente, nuestra solución tenía que funcionar incluso si reorganizaban el orden de los menús.
Así que decidimos usar filtros en su lugar.
En este tutorial, le mostraremos dos formas de diseñar el primer y último elemento de su menú de navegación. Puede elegir su método preferido de la siguiente lista:
- Método 1: agregar la primera y la última clase mediante un filtro
- Método 2: Aplicar estilo a los primeros y últimos elementos mediante selectores CSS
Método 1: agregar la primera y la última clase mediante un filtro
La primera forma de diseñar el primer y último elemento del menú de navegación de manera diferente es agregar un filtro a su tema.
Deberá agregar código al archivo functions.php de su tema. Si no ha hecho esto antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.
Todo lo que tienes que hacer es abrir el archivo functions.php de tu tema y luego pegar el siguiente fragmento de código:
function wpb_first_and_last_menu_class($items) {
$items[1]->classes[] = 'first';
$items[count($items)]->classes[] = 'last';
return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
Esto crea clases CSS .first y .last para su primer y último elemento del menú de navegación, respectivamente. Puede usar esas clases para diseñar los elementos del menú.
Para aprender cómo hacer esto en detalle, consulte nuestra guía sobre cómo diseñar los menús de navegación de WordPress.
Para este tutorial, agregaremos el siguiente formato CSS básico a la hoja de estilo style.css de nuestro tema para simplemente poner en negrita el primer y último elemento del menú:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Aquí puede ver capturas de pantalla antes y después de que agreguemos el código a nuestro sitio de demostración.
Método 2: Aplicar estilo a los primeros y últimos elementos mediante selectores CSS
Una segunda forma de diseñar el primer y último elemento del menú de manera diferente es usar selectores CSS. Este método es más simple, pero es posible que no funcione con algunos navegadores más antiguos, como Internet Explorer.
Para seguir este método, tendrá que agregar código a la hoja de estilo de su tema o la sección ‘CSS adicional’ del Personalizador de temas de WordPress.
Si no ha hecho esto antes, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.
Debe comenzar editando el archivo style.css de su tema, o navegando a Apariencia »Personalizar y haciendo clic en ‘CSS adicional’.
Después de eso, debe pegar el siguiente fragmento de código y luego guardar o publicar sus cambios.
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Tenga en cuenta que deberá reemplazar ‘yourmenuid’ con el ID real del menú de navegación. Los selectores ‘primer hijo’ y ‘último hijo’ seleccionan un elemento si es el primer y último hijo de su padre, que es el menú de navegación.
Por ejemplo, usamos este código para poner en negrita el primer y último elemento del menú de navegación en nuestro sitio de demostración:
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
Esperamos que este tutorial le haya ayudado a aprender cómo agregar la clase .first y .last a los menús de navegación de WordPress.
Es posible que también desee aprender cómo corregir 50 errores comunes de WordPress, o consulte nuestra lista de los mejores creadores de páginas de arrastrar y soltar.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
Cómo agregar la primera y la última clase CSS a los elementos del menú de WordPress apareció por primera vez en .
Fuente: tongasoft