Agregue una clase personalizada en los elementos del menú de WordPress usando una declaración condicional

En la mayoría de los casos, al diseñar los menús de navegación de WordPress, simplemente puede agregar clases de 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 publicaciones individuales. 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 usar filtros, pero no hay documentación para el filtro.

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

//Filtering a Class in Navigation Menu Item
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';
     }
     return $classes;
}

El código anterior es simplemente verificar si es una página de publicación única, y el título del elemento del menú es Blog. Si el criterio coincide, entonces está agregando una clase «Elemento de menú actual». Necesitábamos 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, sí tenía sentido.

Si estaba buscando desesperadamente este código, esperamos que este artículo le haya ayudado. También puede verificar otras variables de $ item. Algunos ejemplos son: $ artículo-> ID, $ artículo-> título, $ artículo-> 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 ícono de flecha en nuestro menú. Esta flecha solo se mostraría si la clase se colocó encima o se seleccionó. De lo contrario, se configuró para mostrar: ninguno; Al usar la clase body, acabamos de hacer que el elemento div se muestre solo para la clase de menú específica.