¿Desea añadir un estilo personalizado al primer y último elemento de su menú de WordPress?
Una opción es simplemente añadir una clase CSS personalizada al primer y último elemento del menú. Sin embargo, si reorganiza el menú en algún momento, es posible que esos elementos dejen de ser el primero y el último.
En este artículo, le mostraremos cómo añadir una clase .first y .last que dará estilo al primer y último elemento incluso si reordena el menú más adelante.
¿Por qué dar un estilo diferente al primer y al último elemento de navegación?
A veces, puede que necesite añadir un estilo personalizado al primer y último elemento de un menú de navegación. Esto puede hacer que los enlaces importantes destaquen, como el enlace al formulario de contacto de tu sitio o a la página del carrito de WooCommerce.
En este caso, podría simplemente añadir una clase CSS personalizada al primer y último elemento del menú. Sin embargo, si cambia el pedido / orden del menú en cualquier punto, entonces esto podría romper por completo el estilo personalizado.
Por esta razón, recomendamos utilizar filtros en su lugar.
En esta guía, le mostraremos cómo dar estilo al primer y último elemento de su menú de navegación, para que pueda reorganizar el menú sin romper el estilo personalizado. Simplemente usa los enlaces rápidos de abajo para saltar directamente al método que quieras usar:
Método 1: Añadir la primera y última clase utilizando un filtro (recomendado)
Nota: Este método solo funciona con un tema clásico de WordPress. Si utiliza un tema de bloque, vaya al método 2.
La forma más sencilla de dar estilo a los elementos del menú de navegación es añadir un filtro al tema.
A menudo encontrará fragmentos de código en tutoriales de WordPress con instrucciones para añadirlos al archivo functions. php de su tema.
El mayor problema es que incluso un pequeño error en el fragmento de código personalizado puede romper su sitio de WordPress y hacerlo inaccesible. Por no mencionar que si actualiza su tema de WordPress, perderá todas sus personalizaciones.
Ahí es donde entra en juego WPCode .
Este plugin gratuito hace que sea fácil añadir CSS personalizado, PHP, HTML y más a WordPress sin poner en riesgo su sitio.
Lo primero que tienes que 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.
Una vez activado, diríjase a Fragmentos de código ” Añadir fragmento.
Aquí, sólo tiene que pasar el ratón por encima de “Añada su código personalizado”.
Cuando aparezca, haga clic en “Usar fragmento de código”.
Para empezar, escriba un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento en el escritorio de WordPress.
A continuación, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código PHP”.
A continuación, puede añadir el siguiente PHP al cuadro 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');
A continuación, desplácese a la parte superior de la pantalla y haga clic en el conmutador “Inactivo” para que cambie a “Activo”.
Por último, haga clic en “Guardar fragmento” para activar el fragmento de código PHP.
Esto crea las clases CSS .first y .last para el primer y el último elemento del menú. Ahora puede utilizar estas clases para aplicar un estilo único a estos elementos.
Para ello, deberá añadir un segundo fragmento de código a su sitio web de WordPress. Para empezar, cree un nuevo fragmento de código personalizado siguiendo el mismo proceso descrito anteriormente.
A continuación, escriba un título para el fragmento de código personalizado.
A continuación, abra el menú desplegable “Tipo de código”, pero esta vez seleccione “Fragmento de código CSS”.
Para esta guía, simplemente pondremos en negrita el primer y el último elemento del menú añadiendo el siguiente formato CSS al cuadro de código:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Una vez hecho esto, haz clic en el conmutador “Inactivo” para que cambie a “Activo”.
Por último, haga clic en “Guardar fragmento” para activar el fragmento de código CSS.
Ahora, si visita su sitio web, verá el menú actualizado en directo.
Método 2: Estilizar el primer y el último elemento con selectores CSS (funciona con todos los temas)
Si no desea utilizar plugins, puede dar estilo al primer y último elemento del menú utilizando selectores CSS. Sin embargo, este método puede no funcionar con algunos navegadores antiguos, como Internet Explorer.
Teniendo esto en cuenta, es una buena idea probar su sitio web WordPress en diferentes navegadores / exploradores.
Para seguir este método, deberá añadir código a la hoja de estilo de su tema o a la sección “CSS adicional” del Personalizador de temas de WordPress.
Si no lo ha hecho antes, consulte nuestra guía sobre cómo añadir fácilmente CSS personalizado a su sitio de WordPress.
El primer paso es editar el archivo style.css de tu tema o ir a Apariencia ” Personalizar y hacer clic en “CSS adicional”.
A continuación, añada el siguiente fragmento de código a su sitio:
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Tenga en cuenta que deberá sustituir “yourmenuid” por el ID de su menú de navegación.
Los selectores ‘first-child’ y ‘last-child’ seleccionan el primer y el último hijo de su padre, que son el primer y el último elemento del menú de navegación.
Por ejemplo, hemos utilizado este código para poner en negrita el primer y el último elemento del menú de navegación de 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 utiliza un tema en bloque de WordPress, faltará el Personalizador de temas en su administrador de WordPress. Debe introducir esta URL en su navegador para acceder al Personalizador de temas:
https://yourdomainname.com/wp-admin/customize.php
Asegúrese de sustituir el dominio por el nombre de dominio de su sitio web.
Después, abre la pestaña “CSS adicional” como antes e inserta el siguiente código. Fíjate en que el código es ligeramente diferente, ya que no necesitas añadir 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;
}
No dudes en personalizar el código según tus necesidades. En el ejemplo siguiente, hemos convertido los enlaces primero y último en botones.
Esto es lo que parece:
Esperamos que este tutorial te haya ayudado a aprender cómo añadir las clases .first y .last a los menús de navegación de WordPress. Puede que también quieras ver nuestra guía práctica sobre cómo crear una página de destino con WordPress o comprobar nuestra lista de los mejores editores de arrastrar y soltar páginas.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Mahdi says
i’ve changed the code slightly to work with child menus too:
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 says
exactly what i needed. thank you!
Georgios Panagiotakopoulos says
Thanks! This works great!
Munkhbayar says
Thanks for code. Works for me.
mad_doc says
Thank you for idea & help!
Charles says
Thanks for this nice code…
What about child menu first and last item?
It applied only for parent manu.
Do you have any idea about child last item?
jordi says
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 says
This does not work reliably if you have nested menus.
Editorial Staff says
Hmm, will look into a fix for this.
Administrador
Olivier says
It works when the menu item is the last, or the last child of a last menu item.
It does not work when the menu item is a last child of a menu item that is not the last.
Olivier says
Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!
Elliott Richmond says
Nice! Would usually use CSS but this is a good tip
Mattia says
Great! This is particularly interesting because I have to class more than 2 menu items…
Now I got it!
Thanks
karen says
Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!
Editorial Staff says
The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.
Administrador
Ivo Minchev says
I’ve tried this at the site http://aurorachalet-switzerland.com/ and I cannot see the effect. I’m using the “Twenty Eleven” theme for this site. Where is the problem?
Ivo Minchev says
Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.
Editorial Staff says
This should work as long as you specify the correct id tags.
Administrador
Editorial Staff says
Don’t think that you are using the wp_nav_menu. From the looks of it, it seems that your site is using the fall_back menu by listing all pages. Can you confirm that you have gone into Appearance > Menu and created a menu there. Then specified that menu as a primary location??
Administrador