En la mayoría de los casos, al diseñar menús de navegación de WordPress, puede simplemente agregar clases de CSS desde el panel de administración de WordPress. Recientemente, mientras trabajaba 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 publicaciones individuales. Después de mirar por un tiempo, no pudimos encontrar ninguna solución. Nuestro último recurso fue preguntar en twitter. Otto (@ Otto42) respondió diciendo que es posible mediante el uso de filtros, pero no hay documentación para el filtro.
Después de buscar en el núcleo por un tiempo, descubrimos la solución. Lo que necesita hacer es pegar el siguiente código en su archivo functions.php:
// Filtrar una clase en el elemento de 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 [] = 'actual-menú-elemento';
}
devuelve $ clases;
}
El código anterior simplemente verifica si es una página de publicación única, y el título del elemento del menú es Blog. Si el criterio se corresponde, entonces está agregando una clase «Current-menu-item». Necesitábamos agregar una clase personalizada para que funcione con este diseño en el que estamos trabajando.
Si no puede decirlo ya, 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, sí tiene sentido.
Si estabas desesperado buscando este código, esperamos que este artículo haya sido útil. También puedes buscar 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 cuerpo de CSS. Por ejemplo:
.single #navigation .leftmenublog div {display: inline-block! important;}
Básicamente lo que hicimos fue agregar un div adicional para mostrar un ícono de flecha en nuestro menú. Esta flecha solo se mostrará si la clase se movió hacia arriba o se seleccionó. De lo contrario, estaba configurado para mostrar: ninguno; Al usar la clase de cuerpo, acabamos de hacer que el elemento div se muestre solo para la clase de menú específica.
