En la mayoría de los casos, al cambiar el estilo de 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 añadir una clase personalizada a un elemento específico del menú sólo en páginas de un solo mensaje. Después de mirar alrededor durante un rato, 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 tiene que hacer es pegar el siguiente código en su archivo functions.php:
12345678//Filtrando una clase en el menú de navegación Itemadd_filter(‘nav_menu_css_class’, ‘special_nav_class’, 10 , 2);functionspecial_nav_class($classes, $item){ if(is_single() && $item->title == `Blog’){ $classes[] = ‘current-menu-item’; } return$classes;}
El código anterior es simplemente comprobar si se trata de una sola página de entrada, y el título del elemento de menú es Blog. Si el criterio coincide, entonces está añadiendo una clase «Currentmenu-item». Necesitábamos añadir una clase personalizada para que funcionara con este diseño en el que estamos trabajando.
Si no puedes 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 entrada. Esto les permitió ver que las entradas individuales son parte del blog. Esto normalmente no tiene sentido, pero en el diseño en el que estamos trabajando, sí lo tiene.
Si usted estaba desesperado buscando este código, esperamos que este artículo le haya ayudado. También puede buscar otras variables de posición $. Algunos ejemplos son: posición->ID, posición->título, posición->xfn
Quick Edit: Después de publicar este artículo en twitter, uno de nuestros usuarios @dbrabyn señaló que podríamos haberlo hecho fácilmente con las clases de CSS Body. Por ejemplo:
1.single #navigation .leftmenublog div{display: inline-block!}importante
Básicamente lo que hicimos fue añadir un div adicional para mostrar un icono de flecha en nuestro menú. Esta flecha sólo se mostraría si la clase estuviera sobrevolada o seleccionada. De lo contrario, estaba configurado para mostrar: ninguno; usando la clase de cuerpo, hicimos que el elemento div se mostrara sólo para la clase de menú específica.
Deja una respuesta