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

¿Necesita agregar estilos personalizados para el primer y último elemento en el menú de navegación de WordPress?

Puede simplemente agregar clases CSS personalizadas al primer y último elemento del menú, pero si reorganiza el menú, esos elementos ya no serán el primer y el último elemento.

En este artículo, le mostraremos cómo agregar las clases .first y .last, que formatearán el primer y último elemento del menú, incluso si los elementos del menú se reorganizan.

¿Por qué son diferentes los estilos del primer y último elemento de navegación?

En los últimos proyectos de diseño personalizado, teníamos que agregar algunos estilos personalizados a los elementos del menú de navegación del sitio web de WordPress. Este diseño requiere en particular los diferentes estilos del primer elemento del menú y el último elemento del menú.

Ahora podemos simplemente editar el menú y agregar clases CSS personalizadas al primer y último elemento del menú. Pero desde que entregamos el proyecto al cliente, nuestra solución tiene que ser efectiva incluso si cambia el orden del menú.

Entonces decidimos cambiar a filtros.

En este tutorial, le mostraremos dos opciones para diseñar la primera y la última entrada en el menú de navegación. Puede elegir su método preferido de la siguiente lista:

Método 1: use filtros para agregar la primera y la última clase

La primera forma de tener diferentes estilos para el primer y último elemento del menú de navegación es agregar filtros al tema.

Debe agregar el código al archivo functions.php del tema. Si aún no lo ha hecho, 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 del tema y 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 su primer y último elemento del menú de navegación, respectivamente. Puede utilizar estas clases para diseñar los elementos del menú.

Para obtener más información al respecto, consulte nuestra guía para diseñar menús de navegación de WordPress.

En este tutorial, agregaremos el siguiente formato CSS básico a la hoja de estilo style.css de nuestro tema para hacer que el primer y el último elemento del menú estén simplemente en negrita:

.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 al sitio de demostración.

Método 2: use selectores CSS para formatear el primer y último elemento

La segunda forma de establecer diferentes estilos para el primer y último elemento del menú es utilizar selectores CSS. Este método es relativamente simple, pero es posible que no funcione para algunos navegadores más antiguos, como: B. Internet Explorer.

Para seguir este método, deberá agregar código a la hoja de estilo del tema o la sección "CSS adicional" del personalizador de temas de WordPress.

Si aún no lo ha hecho, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.

Primero debe editar o navegar por el archivo style.css del tema Apariencia »Personalizado Y haga clic en "CSS diferente".

Después de eso, deberá pegar los siguientes fragmentos de código y luego guardar o publicar sus cambios.

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Tenga en cuenta que debe 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 elemento hijo de su elemento padre (es decir, el menú de navegación).

Por ejemplo, usaremos este código para poner en negrita el primer y último elemento del menú de navegación en el 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 a agregar las clases .first y .last al menú 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 te gusta este artículo, suscríbete al nuestro. canal de Youtube Usado para tutoriales en video de WordPress; también puede encontrarnos Closermarketing.es con Facebook.