Resulta el enlace actual en los menús de WordPress

Menús de WordPress

Resultado El elemento activo en el menú principal de su sitio web es realmente bueno para la usabilidad, el modo en que la persona que visita el sitio web es exactamente lo que está buscando y facilita la navegación por el menú desde la parte inferior. Antes de WordPress 3.0, resaltar el elemento del menú fact en función de la page en la que estaba un Visitants era más laborioso, porque tené que ejecutar declaraciones if en cada enlace para probar si era la page fact o un antepasado de la page fact, 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 esignalas a cada enlace, lo que facilita su.

Guardar en el menú de WordPress

Por ejemplo, nos tomamos un momento para ver el sonido del menú de WordPress (basado en un menú simple usando el tema de Twenty Ten WordPress) para poder ver automáticamente el tipo de clases agregadas en 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; }

Además, este CSS apunta a todas las clases actuales, lo que significa que tendrá diferentes variaciones en el sitio, incluidos menús basados ​​en sus widgets. Sobre el tema, la moda que se guía sólo por el hecho de que este conductor en particular está dirigiendo.