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 agregar un 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 del menú y el último elemento del menú. Ahora podríamos ir fácilmente en el administrador de WordPress y agregar 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. Usar el método de panel de administración para agregar clases no era el método más eficiente. Así que decidimos hacerlo usando filtros. En este artículo, le mostraremos cómo aplicar un estilo diferente a sus primeros y últimos elementos del menú de WordPress al agregar una clase de CSS .first y .last.

Todo lo que tienes que hacer es abrir tu tema funciones.php expediente. Luego pegue el siguiente código:

 función wpb_first_and_last_menu_class ($ items) $ items [1] -> classes [] = 'first'; $ items [count ($ items)] -> classes [] = 'last'; devuelve $ artículos;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Otra forma de personalizar el primer y último elemento del menú sería utilizar los selectores de CSS que funcionan en la mayoría de los navegadores modernos..

 ul # yourmenuid> li: primer hijo  ul # yourmenuid> li: last-child  

Nota: si tiene muchos usuarios en navegadores antiguos (Internet Explorer), es probable que desee evitar la siguiente técnica.

Esperamos que este artículo te haya ayudado. Hemos creado una hoja de trucos sobre las clases de CSS generadas por WordPress predeterminadas que pueden ser útiles al estilizar los elementos del menú también..