Resalta el enlace actual en los menús de WordPress.

Resalta 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 superior. Antes de WordPress 3.0, resaltar el elemento del menú actual basado en la página en la que estaba un visitante requería más trabajo, ya que tenía que ejecutar declaraciones if en cada enlace para probar si esa era la página actual o un antepasado de la página actual. , con la introducción del nuevo sistema de menú de arrastrar y soltar en la versión 3 de WordPress, ahora se asignan clases especiales a cada enlace, lo que facilita su estilo.

Salir del menú básico de WordPress

Primero tomemos un momento para mirar el menú básico de WordPress Ouput (basado en un menú simple usando el Tema de WordPress Twenty Ten) para que pueda ver el tipo de clases que se agregan 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>

Resalte las páginas / categorías / otros enlaces de menú actuales

Si observa el código anterior, puede ver todas las diferentes clases que WordPress agrega a los enlaces del menú, pero las que desea enfocarse para resaltar son:

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

Elemento de menú actual: Clase agregada al elemento del menú de la página que está viendo el usuario.

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

.current-page-ancestor: Clase agregada al elemento de menú de la página principal si se muestra 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á de 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 el mensaje titulado “Harry Potter”, que se encuentra en esta categoría.

Ejemplo de menú básico resaltado

Este es un método de resaltado muy básico y general, pero puede ayudarlo a comenzar. 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 apunta 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, serán segmentados. 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.

Deja un comentario

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

Ir arriba