AprenderWP

Sitio especializado en Wordpress para principiantes

  • Principiantes
  • Tutoriales
  • Plugins
  • Temas
  • Blog
    • Novedades
    • Showcase
    • Opiniones
AprenderWP » Tutoriales » Agregar una clase personalizada en el elemento de menú WordPress utilizando sentencias condicionales

Agregar una clase personalizada en el elemento de menú WordPress utilizando sentencias condicionales

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 Cancelar la respuesta

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


Sobre mi

Mi nombre es Joaquin y llevo 12 años creando sitios web en wordpress. En este blog comparto todos mis conocimientos.

Necesito ayuda con ...


Empezar un
Blog

Optimizar
Wordpress

Seguridad
Wordpress

SEO
Wordpress

Errores
Worpdress

Crear una
Tienda Online
Política de Privacidad
Política de Cookies
Aviso Legal

Copyright © 2021 · AprenderWP