Resaltar el elemento de menú activo en el menú principal de su sitio web es realmente bueno para la usabilidad, ya 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 en función de la página en la que se encontraba un visitante requería más trabajo, porque tenía que ejecutar declaraciones if en cada enlace para probar si era la página actual o un ancestro 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 el estilo.
Salida básica del menú de WordPress
Primero, tomemos un momento para ver la salida básica del menú de WordPress (basado en un menú simple que usa el Veinte Diez Tema de WordPress) para que pueda ver el tipo de clases agregadas automáticamente a los enlaces:
<ul id="menu-my-menu" class="menu"><li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="http://mysite.com">Home</a></li>
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="http://mysite.com/sample-page">Page 1</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="http://mysite.com/sample-page-2">Page 2</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-6"><a href="http://mysite.com/drop-down">Drop Down</a>
<ul class="sub-menu">
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://mysite.com/drop-down-1">Drop Down 1</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-8"><a href="http://mysite.com/drop-down-2">Drop Down 2</a></li>
</ul>
</li>
</ul>
Resaltado de páginas actuales/categoría/otros enlaces de menú
Si observa el código anterior, puede ver todas las diferentes clases que WordPress agrega a los enlaces del menú, pero las que desea resaltar para resaltar son las siguientes:
- .elemento-menú-actual
- .ancestro-de-la-pagina-actual
- .actual-post-antepasado
.elemento-menú-actual: Clase agregada al elemento de menú para 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
.ancestro-de-la-pagina-actual: Clase agregada al elemento de menú para la página principal si actualmente 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.
.actual-post-antepasado: 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 bien. 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 orientarán. Así que asegúrese de modificar el CSS para que coincida con su tema, de modo que solo se dirija al menú al que desea dirigirse específicamente.