Resalte el enlace actual en los menús de WordPress

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 visita su sitio sepa 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 del menú actual en función de la página en la que estaba un visitante era más laborioso, porque tenía que ejecutar declaraciones if en cada enlace para probar 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, lo que facilita su estilo.

Salida básica del menú de WordPress

Primero, tomemos un momento para ver la salida básica del menú de WordPress (basada en un menú simple que usa el tema Twenty Ten WordPress) para que pueda ver el tipo de clases agregadas automáticamente a los enlaces:

Resaltado de páginas actuales / categoría / otros enlaces de menú

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

  1. .elemento-de-menú-actual
  2. .current-page-ancestor
  3. .current-post-ancestor

.elemento-de-menú-actual: Clase agregada 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”, heredará esta clase

.current-page-ancestor: Clase agregada al elemento de menú de la página principal si se está viendo una página secundaria.

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

.current-post-ancestor: Clase agregada al elemento del menú siempre que la categoría sea un antepasado de la publicación que se está viendo.

~ Ejemplo: la clase se agrega a la categoría “Película” en el menú si actualmente está viendo la publicación llamada “Harry Potter”, que se encuentra en dicha categoría.

Resaltado básico del menú de muestra

Este es un método de resaltado muy básico y general, pero puede ayudarlo a comenzar con buen pie. Simplemente copie y edite el siguiente CSS en su archivo style.css para resaltar los enlaces de su menú:

.current-menu-item a,
.current-page-ancestor a,
.current-post-ancestor a { background: #000; }

Por supuesto, este CSS se dirige a TODAS las clases actuales, lo que significa que si tiene varios menús en el sitio o incluso menús en las áreas de sus widgets, se dirigirán a ellos. Así que asegúrese de ajustar el CSS para que coincida con su tema, de modo que solo se oriente al menú al que desea dirigirse específicamente.

Publicaciones relacionadas

Botón volver arriba