¿Alguna vez has visto sitios web con elementos de menú de primer y último elemento con un estilo único? Eso no es casualidad, es CSS inteligente en acción. Esta técnica puede resaltar enlaces importantes, como tu página de contacto o una oferta especial.
Muchos de nuestros lectores han intentado agregar clases personalizadas a sus elementos de menú, solo para descubrir que cuando reorganizan su menú, el estilo se rompe. Los elementos etiquetados como 'primero' y 'último' ya no están en esas posiciones, lo que deja el menú con un aspecto inconsistente.
Es por eso que esta guía te mostrará cómo agregar una clase .first y .last que se mantendrá en tus elementos de menú, incluso si los reorganizas más tarde. Cubriremos dos métodos: un filtro para temas clásicos y selectores CSS para todos los temas, incluidos los temas de bloques.
¿Por qué dar estilo diferente a los primeros y últimos elementos de navegación?
A veces, es posible que necesites agregar un estilo personalizado a los primeros y últimos elementos de un menú de navegación. Esto puede hacer que los enlaces importantes destaquen, como el enlace a tu formulario de contacto o la página de carrito de WooCommerce.
En este caso, podrías simplemente agregar una clase CSS personalizada a los elementos de menú primero y último. Sin embargo, si cambias el orden del menú en cualquier momento, esto podría romper completamente el estilo personalizado.
Por esta razón, recomendamos usar filtros en su lugar.
En esta guía, te mostraremos cómo estilizar el primer y último elemento de tu menú de navegación, para que puedas reorganizar el menú sin romper el estilo personalizado. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:
- Método 1: Agregar clases de primer y último elemento usando un filtro (Recomendado)
- Método 2: Estilizar los primeros y últimos elementos usando selectores CSS (Funciona con todos los temas)
Consejo profesional: ¿Quieres resaltar algún elemento del menú en tu sitio web? Consulta nuestra guía sobre cómo resaltar un elemento del menú en WordPress para más información.
Método 1: Agregar clases de primer y último elemento usando un filtro (Recomendado)
Nota: Este método solo funciona con un tema de WordPress clásico. Si estás usando un tema de bloques, ve al Método 2.
La forma más fácil de estilizar los elementos de tu menú de navegación es agregar un filtro a tu tema.
A menudo encontrarás fragmentos de código en tutoriales de WordPress con instrucciones para agregarlos al archivo functions.php de tu tema.
El mayor problema es que incluso un pequeño error en el fragmento de código personalizado puede romper tu sitio de WordPress y hacerlo inaccesible. Sin mencionar que, si actualizas tu tema de WordPress, perderás todas tus personalizaciones.
Ahí es donde entra WPCode .
Este plugin gratuito facilita la adición de CSS, PHP, HTML personalizados y más a WordPress sin poner tu sitio en riesgo.
Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, dirígete a Snippets de código » Añadir Snippet.
Aquí, simplemente pasa el ratón sobre ‘Añadir tu código personalizado’.
Cuando aparezca, haz clic en ‘Usar snippet’.
Para empezar, escribe un título para el fragmento de código personalizado. Puede ser cualquier cosa que te ayude a identificar el fragmento en el panel de WordPress.
Después de eso, abre el menú desplegable ‘Tipo de código’ y selecciona ‘Fragmento de PHP’.
Luego puedes añadir el siguiente PHP a la caja 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');
Después de eso, estás listo para desplazarte a la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’ para que cambie a ‘Activo’.
Finalmente, haz clic en ‘Guardar fragmento’ para que el fragmento de PHP se active.
Esto crea las clases CSS .first y .last para tus elementos de menú primero y último. Ahora puedes usar estas clases para aplicar estilos únicos a estos elementos en tu menú de navegación personalizado.
Para hacer esto, necesitarás agregar un segundo fragmento a tu sitio web de WordPress. Para empezar, crea un nuevo fragmento de código personalizado siguiendo el mismo proceso descrito anteriormente.
Después de eso, escribe un título para el fragmento de código personalizado.
Luego, abre el menú desplegable 'Tipo de código', pero esta vez selecciona 'Fragmento CSS'.
Para esta guía, simplemente pondremos en negrita el primer y último elemento del menú agregando el siguiente formato CSS a la caja de código:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Hecho esto, haz clic en el interruptor 'Inactivo' para que cambie a 'Activo'.
Finalmente, haz clic en 'Guardar fragmento' para que el fragmento CSS se active.
Ahora, si visitas tu sitio web, verás el menú recién estilizado en vivo.
Método 2: Estilizar los primeros y últimos elementos usando selectores CSS (Funciona con todos los temas)
Si no quieres usar un plugin de fragmentos de código, puedes estilizar el primer y último elemento del menú usando selectores CSS. Sin embargo, este método podría no funcionar con algunos navegadores antiguos, como Internet Explorer.
Teniendo esto en cuenta, es una buena idea probar tu sitio web de WordPress en diferentes navegadores.
Para seguir este método, necesitarás agregar código a la hoja de estilos de tu tema o a la sección 'CSS adicional' del Personalizador de temas de WordPress.
Si no has hecho esto antes, consulta nuestra guía sobre cómo agregar fácilmente CSS personalizado a tu sitio de WordPress.
El primer paso es editar el archivo style.css de tu tema o ir a Apariencia » Personalizar y luego hacer clic en ‘CSS adicional’.
Después de eso, procede a agregar el siguiente fragmento de código a tu sitio:
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Ten en cuenta que deberás reemplazar ‘yourmenuid’ con el ID de tu menú de navegación.
Los selectores ‘first-child’ y ‘last-child’ seleccionan el primer y último hijo de su padre, que son los primeros y últimos elementos del menú de navegación.
Por ejemplo, usamos este código para poner en negrita los primeros y últimos elementos del menú de navegación en nuestro blog de WordPress:
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
Si usas un tema de bloques de WordPress, entonces el Personalizador de temas faltará en tu administrador de WordPress. Necesitas ingresar esta URL en tu navegador para acceder al Personalizador de temas:
https://yourdomainname.com/wp-admin/customize.php
Asegúrate de reemplazar el dominio con el nombre de dominio de tu sitio web.
Después de eso, abre la pestaña ‘CSS adicional’ como antes e inserta el siguiente código. Nota cómo el código se ve ligeramente diferente, ya que no necesitas agregar el ID de tu menú.
li:first-child a,
li:last-child a {
background-color: black;
border: none;
color: white !important; /* Ensures the color white is prioritized */
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}
Siéntete libre de personalizar el código según tus necesidades. En el siguiente ejemplo, convertimos los primeros y últimos enlaces en botones.
Así es como se ve:
Esperamos que este tutorial te haya ayudado a aprender cómo agregar las clases .first y .last a los menús de navegación de WordPress. También te puede interesar nuestro artículo sobre cómo crear un menú de navegación vertical en WordPress y nuestra guía para principiantes sobre cómo crear un menú desplegable en un sitio de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Ahmed Mahdi
he modificado un poco el código para que funcione también con submenús:
function wpb_first_and_last_menu_class($items) {
foreach($items as $k => $v){ $parent[$v->menu_item_parent][] = $v; }
foreach($parent as $k => $v){ $v[0]->classes[] = ‘first’; $v[count($v)-1]->classes[] = ‘last’; }
return $items;
}
add_filter(‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’);
Trevor Simonton
¡Justo lo que necesitaba. ¡Gracias!
Georgios Panagiotakopoulos
¡Gracias! ¡Esto funciona genial!
Munkhbayar
Gracias por el código. Me funciona.
mad_doc
¡Gracias por la idea y la ayuda!
Charles
Gracias por este buen código...
¿Qué hay del menú infantil, el primer y el último elemento?
Se aplicó solo para el menú padre.
¿Tienes alguna idea sobre el último elemento del submenú?
jordi
Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
can’t make it works
thanks to share anyway!!
Jake
Esto no funciona de manera confiable si tienes menús anidados.
Personal editorial
Hmm, investigaré una solución para esto.
Administrador
Olivier
Funciona cuando el elemento del menú es el último, o el último hijo de un elemento de menú que es el último.
No funciona cuando el elemento del menú es un último hijo de un elemento de menú que no es el último.
Olivier
Junto con algunas otras adiciones a functions.php que he intentado, este código no logra etiquetar un elemento del menú como el primer o último elemento del menú cuando están en un submenú. ¡Una solución para esto sería genial!
Elliott Richmond
¡Genial! Normalmente usaría CSS, pero este es un buen consejo
Mattia
¡Genial! Esto es particularmente interesante porque tengo que clasificar más de 2 elementos de menú…
¡Ahora lo entiendo!
Gracias
karen
¡Gracias por esto! Perdona si me lo perdí, pero ¿hay un ejemplo del menú para ver la diferencia en la navegación creada por esta clase? ¡Gracias de nuevo!
Personal editorial
El sitio que diseñamos para nuestro cliente aún no está en línea. Pero la razón principal fue que queríamos tener un borde a la izquierda del primer elemento del menú. Todos los demás elementos tenían un borde a la derecha con un relleno y margen específicos. Usamos la última clase para eliminar el margen derecho y el borde derecho porque no era necesario. Estaba chocando con el contenedor de envoltura. Espero que puedas visualizarlo.
Administrador
Ivo Minchev
He probado esto en el sitio http://aurorachalet-switzerland.com/ y no puedo ver el efecto. Estoy usando el tema "Twenty Eleven" para este sitio. ¿Dónde está el problema?
Ivo Minchev
Probablemente por la etiqueta #yourmenuid. Probé algunos IDs pero ninguno funcionó.
Personal editorial
Esto debería funcionar siempre y cuando especifiques las etiquetas de ID correctas.
Administrador
Personal editorial
No creo que estés usando wp_nav_menu. Por lo que parece, tu sitio está usando el menú de respaldo (fall_back) listando todas las páginas. ¿Puedes confirmar que fuiste a Apariencia > Menú y creaste un menú allí? ¿Luego especificaste ese menú como una ubicación principal?
Administrador