Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir la primera y la última clase CSS a los elementos de menú de WordPress

¿Alguna vez has visto sitios web con elementos de menú únicos? No es casualidad: se trata de CSS inteligente. Esta técnica puede resaltar enlaces importantes, como la página de contacto o una oferta especial.

Muchos de nuestros lectores han intentado añadir 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 da al menú un aspecto incoherente.

Por eso, esta guía te mostrará cómo añadir una clase .first y .last que se pegará a tus elementos de menú, incluso si barajas las cosas 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.

How to Add the First & Last Class to WordPress Navigation Menu Items

¿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:

Consejo profesional: ¿Quieres destacar algún elemento / artículo del menú de tu sitio web? Compruebe nuestra guía sobre cómo marcar / destacar un elemento del menú en WordPress para obtener más información.

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.

Adding a custom code snippet using WPCode

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”.

Adding a custom code snippet to a WordPress website using WPCode

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”.

Adding a custom PHP snippet to WordPress using WPCode

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.

Adding custom styling to a navigation menu using WPCode

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 en su menú de navegación personalizado.

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”.

Styling the first and last menu items using WPCode

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”.

Adding custom styling to a menu using code

Por último, haga clic en “Guardar fragmento” para activar el fragmento de código CSS.

Ahora, si visita su sitio web, verá el nuevo menú en vivo.

An example of a WordPress menu, created using WPCode

Método 2: Estilizar el primer y el último elemento con selectores CSS (funciona con todos los temas)

Si no desea utilizar un plugin de fragmentos de código, puede dar estilo al primer y al ú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”.

The WordPress Theme Customizer

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;
}
Using CSS Selectors to Style First and Last Menu Items Differently

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:

Inserting custom CSS in the block theme for first and last navigation link styling

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 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 WordPress.

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

19 comentariosDeja una respuesta

  1. Ahmed Mahdi

    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’);

  2. Trevor Simonton

    exactly what i needed. thank you!

  3. Georgios Panagiotakopoulos

    Thanks! This works great!

  4. Munkhbayar

    Thanks for code. Works for me.

  5. mad_doc

    Thank you for idea & help!

  6. Charles

    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?

  7. jordi

    Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
    can’t make it works :( JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
    thanks to share anyway!!

  8. Jake

    This does not work reliably if you have nested menus.

      • Olivier

        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.

  9. Olivier

    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!

  10. Elliott Richmond

    Nice! Would usually use CSS but this is a good tip

  11. Mattia

    Great! This is particularly interesting because I have to class more than 2 menu items…
    Now I got it!

    Thanks

  12. karen

    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

      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

      Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.

    • Editorial Staff

      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

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.