Destacar el enlace actual en los menús de WordPress

Category: Tutorial 52 0

Resaltar el elemento de menú activo en el menú principal de su sitio web es realmente bueno para la usabilidad, de modo que la persona que ve su sitio sabe exactamente qué página está viendo y facilita la navegación por el menú desde la página actual. Antes de WordPress 3.0, resaltar el elemento de menú actual basado en la página en la que se encontraba el visitante era más laborioso, porque había que ejecutar si las declaraciones de cada enlace para comprobar si era la página actual o un antepasado de la página actual, sin embargo, con la introducción del nuevo sistema de menú de arrastrar y soltar en la versión 3 de WordPress, ahora hay clases especiales asignadas a cada enlace para facilitar el estilo de los mismos.

Salida del menú básico de WordPress

Primero tomemos un momento para ver el menú básico de WordPress (basado en un simple menú que utiliza el tema de Twenty Ten WordPress) para que puedas ver el tipo de clases que se añaden automáticamente a los enlaces:

<ul menu-item-type-custom menu-item-object-custom menu-item-3"³; ...li menu-item-type-custom menu-item-object-custom menu-item-4"³;³;a³;Página 1</a³;³;³;l ...li menu-item-type-custom menu-item-object-custom menu-item-5"³;³;a³;Página 2</a³;³;³;/li³;³; ...li menú-tipo de elemento-menú personalizado-elemento-objeto-actuación-menú-padre-menú personalizado-6"-Página 2</a menú-ul-tipo de elemento-menú-personalizado-objeto-menú-personalizado-elemento-7"³;³;a³;Drop Down 1</a³;³;/li³; 	Menú-tipo de elemento- menú personalizado-elemento-objeto-elemento-actualidad menú-elemento-8"-8";-Abajo 2</Abajo 2</Abajo 2&; ...y el resto..; ...y..; 

Resaltando las páginas actuales/categoría/otros enlaces del menú

Si echas un vistazo al código de arriba puedes ver todas las diferentes clases que WordPress añade a los enlaces del menú, pero en las que quieres centrarte para resaltarlas son las siguientes:

  1. …elemento del menú actual
  2. …página actual-anciano
  3. …actual-post-anciano

…elemento del menú actual: Clase añadida al elemento de menú de la página actual que está viendo el usuario.

~ Ejemplo: si está en la página “acerca de” y hay un enlace a la página “acerca de” entonces heredará esta clase

.current-page-ancestor : Clase añadida al elemento de menú de la página padre si se está viendo una página hija.

~ Ejemplo: Si tienes una página llamada “Páginas” y una página hija llamada “acerca de”, si estás en la página “acerca de” entonces el enlace del menú llamado “Páginas” heredará esta clase.

.actual-post-ancestor : Clase añadida al menú siempre y cuando la categoría sea un ancestro del puesto que se está viendo.

~ Ejemplo: la clase se añade a la categoría “Película” en el menú si está viendo el post llamado “Harry Potter”, que está en dicha categoría.

Ejemplo básico de resaltado de menú

Este es un método de resaltado muy básico y general, pero puede darte un buen comienzo. Sólo copia y edita el siguiente CSS en tu archivo style.css para resaltar tus enlaces de menú:

.currentmenu-item a, ...actual-página-anciano a, ...el actual postulante a un fondo: #000; }

Por supuesto este CSS apunta a TODAS las clases actuales, lo que significa que si tienes múltiples menús en el sitio o incluso menús en tus áreas de widgets serán apuntados. Así que asegúrate de ajustar el CSS para que coincida con tu tema, de modo que sólo apunte al menú que quieres apuntar específicamente.

Related Articles