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 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 las 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ó que es posible usar filtros, pero no hay documentación para el filtro.

Después de examinar el núcleo durante un tiempo, hemos encontrado 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 simplemente verifica si se trata de una sola página de publicación y el título del elemento del menú es Blog. Si se cumplen los criterios, se agrega una clase "Elemento de menú actual". Necesitábamos agregar una clase personalizada para que funcione con este proyecto en el que estamos trabajando.

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

Si buscaba desesperadamente este código, esperamos que este artículo le haya resultado útil. 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 hecho 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 aparece solo si la clase ha sido colocada o seleccionada. De lo contrario, se ha configurado para mostrar: ninguno; Usando la clase body, acabamos de hacer que el elemento div se muestre solo para la clase de menú específica.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir