Agregue una clase personalizada en el elemento del menú de WordPress usando declaraciones condicionales

En la mayoría de los casos, cuando estiliza los menús de navegación de WordPress, simplemente puede agregar clases CSS desde el panel de administración de WordPress. Recientemente, mientras trabajábamos en un proyecto, nos encontramos en una situación problemática. Queríamos agregar una clase personalizada a un elemento de menú específico solo en páginas de una sola publicación. Después de mirar alrededor por un tiempo, no pudimos encontrar ninguna solución. Nuestro último recurso fue preguntar en twitter. Otto (@ Otto42) respondió diciendo que es posible usando filtros, pero no hay documentación para el filtro..

Después de buscar en el núcleo durante un tiempo, descubrimos la solución. Lo que debe hacer es pegar el siguiente código en su archivo functions.php:

 // Filtrado de una clase en el elemento del menú de navegación add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); function special_nav_class ($ classes, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'current-menu-item';  devolver $ clases;  

El código anterior simplemente comprueba si se trata de una sola página de publicación, y el título del elemento del menú es Blog. Si los criterios coinciden, entonces está agregando una clase "Elemento de menú actual". Necesitamos agregar una clase personalizada para que funcione con este diseño en el que estamos trabajando.

Si aún no puede saberlo, básicamente lo que queríamos hacer era mantener el elemento del blog resaltado en el menú cuando el usuario estaba en una sola publicación. Esto les permitió ver que las publicaciones individuales son parte del blog. Esto normalmente no tiene sentido, pero en el diseño en el que estamos trabajando, tuvo sentido.

Si estaba desesperado por buscar este código, esperamos que este artículo le haya ayudado. También puedes verificar otras variables de $ item. Algunos ejemplos son: $ item-> ID, $ item-> title, $ item-> xfn

Edición rápida: después de publicar este artículo en twitter, uno de nuestros usuarios @dbrabyn señaló que podríamos haberlo logrado fácilmente con las clases de CSS Body. Por ejemplo:

.single #navigation .leftmenublog div display: inline-block! important;

Básicamente, lo que hicimos fue agregar un div adicional para mostrar un icono de flecha en nuestro menú. Esta flecha solo se mostrará si la clase ha sido desplazada o seleccionada. De lo contrario, se configuró para mostrar: ninguno; Al utilizar la clase de cuerpo, solo hicimos la visualización del elemento div solo para la clase de menú específica.