¿Necesita agregar un estilo personalizado al primer y último elemento del menú de navegación de WordPress?
Simplemente puede agregar una clase CSS personalizada al primer y último elemento del menú, pero si se reorganiza el menú, 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 darán forma al primer y último elemento del menú, incluso si se reordenan los elementos del menú.
¿Por qué estilizar el primer y el último elemento de navegación de manera diferente?
En un proyecto de diseño personalizado anterior, necesitábamos agregar un estilo personalizado 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 podemos editar fácilmente el menú y agregar una clase CSS personalizada al primer y último elemento del menú. Pero como le 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 lista a continuación:
- Método 1: agregar la primera y última clase usando un filtro
- Método 2: diseñar el primer y último elemento usando selectores CSS
Método 1: agregar la primera y última clase usando un filtro
La primera forma de aplicar un estilo diferente al primer y último elemento del menú de navegación es agregar un filtro al tema.
Deberá agregar código al archivo functions.php de su tema. Si nunca antes ha hecho esto, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.
Todo lo que necesita hacer es abrir el archivo functions.php de su 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 las clases CSS .first y .last para el primer y último elemento del menú de navegación, respectivamente. Puede usar esas clases para diseñar los elementos del menú.
Para saber 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 poner en negrita el primer y último elemento del menú:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Aquí puede ver las capturas de pantalla antes y después de agregar el código a nuestro sitio de demostración.
Método 2: diseñar el primer y último elemento usando selectores CSS
Una segunda forma de aplicar un estilo diferente al primer y último elemento del menú es usar selectores CSS. Este método es más simple, pero es posible que no funcione con algunos navegadores antiguos, como Internet Explorer.
Para seguir este método, deberá agregar código a la hoja de estilo de su tema o a la sección “CSS adicional” del Personalizador de temas de WordPress.
Si nunca antes ha hecho esto, 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’.
A continuación, debe pegar el siguiente fragmento de código y luego guardar o publicar los cambios.
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Tenga en cuenta que deberá reemplazar “yourmenuid” con el ID del menú de navegación real. Los selectores de ‘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 las clases .first y .last a sus menús de navegación de WordPress.
También puede querer aprender a corregir 50 errores comunes de WordPress o consultar nuestra lista de los mejores creadores de páginas de arrastrar y soltar.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
Cómo agregar la primera y la última clase de CSS a los elementos del menú de WordPress
¿Necesita agregar un estilo personalizado al primer y último elemento del menú de navegación de WordPress?
Simplemente puede agregar una clase CSS personalizada al primer y último elemento del menú, pero si se reorganiza el menú, 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 darán forma al primer y último elemento del menú, incluso si se reordenan los elementos del menú.
¿Por qué estilizar el primer y el último elemento de navegación de manera diferente?
En un proyecto de diseño personalizado anterior, necesitábamos agregar un estilo personalizado 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 podemos editar fácilmente el menú y agregar una clase CSS personalizada al primer y último elemento del menú. Pero como le 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 lista a continuación:
- Método 1: agregar la primera y última clase usando un filtro
- Método 2: diseñar el primer y último elemento usando selectores CSS
Método 1: agregar la primera y última clase usando un filtro
La primera forma de aplicar un estilo diferente al primer y último elemento del menú de navegación es agregar un filtro al tema.
Deberá agregar código al archivo functions.php de su tema. Si nunca antes ha hecho esto, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.
Todo lo que necesita hacer es abrir el archivo functions.php de su 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 las clases CSS .first y .last para el primer y último elemento del menú de navegación, respectivamente. Puede usar esas clases para diseñar los elementos del menú.
Para saber 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 poner en negrita el primer y último elemento del menú:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Aquí puede ver las capturas de pantalla antes y después de agregar el código a nuestro sitio de demostración.
Método 2: diseñar el primer y último elemento usando selectores CSS
Una segunda forma de aplicar un estilo diferente al primer y último elemento del menú es usar selectores CSS. Este método es más simple, pero es posible que no funcione con algunos navegadores antiguos, como Internet Explorer.
Para seguir este método, deberá agregar código a la hoja de estilo de su tema o a la sección “CSS adicional” del Personalizador de temas de WordPress.
Si nunca antes ha hecho esto, 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’.
A continuación, debe pegar el siguiente fragmento de código y luego guardar o publicar los cambios.
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Tenga en cuenta que deberá reemplazar “yourmenuid” con el ID del menú de navegación real. Los selectores de ‘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 las clases .first y .last a sus menús de navegación de WordPress.
También puede querer aprender a corregir 50 errores comunes de WordPress o consultar nuestra lista de los mejores creadores de páginas de arrastrar y soltar.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
