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

Recientemente, mientras trabajábamos en un proyecto de diseño personalizado, encontramos la necesidad de añadir un poco de estilo personalizado a nuestros elementos del menú de navegación de WordPress. Este diseño en particular requería un estilo diferente para el primer elemento de menú y el último elemento de menú. Ahora podríamos fácilmente ir en el administrador de WordPress y añadir una clase css personalizada al primer y último elemento del menú. Pero debido a que estamos entregando esto a un cliente, es muy probable que puedan reorganizar el orden de los menús en el futuro. El uso del panel de administración para añadir clases no era el método más eficiente. Así que decidimos hacerlo usando filtros. En este artículo, le mostraremos cómo cambiar el estilo de su primer y último elemento del menú de WordPress añadiendo una clase CSS.first y.last.

Todo lo que tiene que hacer es abrir el archivo functions.php del tema . A continuación, pegue el siguiente código:

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

Otra manera de cambiar el estilo del primer y último elemento del menú sería usar selectores CSS que funcionan en la mayoría de los navegadores modernos.

12ul#sumenú> li:primer hijo { }ul#sumenú> li:último hijo { }

Nota: si tiene muchos usuarios en navegadores antiguos (Internet Explorer), entonces probablemente quiera evitar la siguiente técnica.

Esperamos que este artículo le haya ayudado. Hemos creado una hoja de trucos para las clases CSS generadas por defecto por WordPress, que puede resultar muy útil a la hora de cambiar el estilo de los elementos del menú.

Deja un comentario