Recientemente, mientras trabajábamos en un proyecto de diseño personalizado, vimos la necesidad de agregar un estilo personalizado a los 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 al administrador de WordPress y agregar una clase CSS personalizada al primer y último elemento del menú. Pero como se lo entregamos a un cliente, es muy probable que reorganice el orden de los menús en el futuro. Usar el método del panel de administración para agregar clases no fue el método más eficiente. Entonces decidimos hacerlo usando filtros. En este artículo, le mostraremos cómo diseñar su primer y último elemento de menú de WordPress de manera diferente agregando una clase CSS .first y .last. Todo lo que necesitas hacer es abrir el archivo functions.php de tu tema. Luego pegue el siguiente código: function wpb_first_and_last_menu_class ($ items) {$ items[1]-> curso[] = ‘primero’; $ artículos[count($items)]-> curso[] = ‘último’; devolver $ artículos; } add_filter (‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’); Otra forma de diseñar el primer y último elemento del menú de manera diferente sería usar selectores CSS que funcionan en la mayoría de los navegadores modernos. ul # yourmenuid> li: first-child {} ul # yourmenuid> li: last-child {} Nota: si tiene muchos usuarios en navegadores antiguos (Internet Explorer), probablemente querrá evitar la siguiente técnica. Esperamos que este artículo te haya ayudado. Hemos creado una hoja de trucos sobre las clases CSS generadas por WordPress de forma predeterminada, que también puede ser útil al diseñar elementos de menú.
Originally posted 2021-02-25 09:10:35.
