SummArg | Cursos y recursos para webmasters

28/01/2011

Cómo marcar la página actual en un menú en WordPress?

Para marcar en un menú la página que actualmente estamos mirando, generalmente añadimos al link alguna clase llamada .activo o similar, en donde indicamos alguna particularidad en su diseño que la diferencia de los demás links del menu.

WordPress tiene un marcado por defecto de la clase activa cuando lista páginas con wp_list_pages y es .current_page_item. Entonces al listar páginas utilizando esta función de la plataforma de este modo:

<ul>
 <li><a href="<?php echo get_option('home'); ?>">Inicio</a></li>
 <?php wp_list_pages('title_li='); ?>
</ul>

Suponiendo que estamos mirando la página “La Empresa”, WordPress nos devolvería algo como esto:

<ul>
 <li><a href="#">Inicio</a></li>
 <li class="current_page_item"><a href="#">La Empresa</a></li>
 <li><a href="#">Servicios</a></li>
 <li><a href="#">Productos</a></li>
 <li><a href="#">Contactenos</a></li>
</ul>

Pero a veces necesitamos saber añadir nosotros la clase manualmente, y esto no es complicado si utilizamos los Conditional Tags. En definitiva el código podría traducirse en algo como esto:

<ul>
 <li<?php if ( is_home()) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>">Inicio</a></li>
 <li<?php if ( is_page('la-empresa')) { echo ' class="current_page_item"'; } ?>><a href="#">La empresa</a></li>
 <li<?php if ( is_page('servicios')) { echo ' class="current_page_item"'; } ?>><a href="#">Servicios</a></li>
 <li<?php if ( is_page('productos')) { echo ' class="current_page_item"'; } ?>><a href="#">Productos</a></li>
 <li<?php if ( is_page('contactenos'))  { echo ' class="current_page_item"'; } ?>><a href="#">Contactenos</a></li>
</ul>

El CSS en este caso, debería diferenciar el link activo especificandolo en la clase .current_page_item con algún detalle distintivo.

.current_page_item {
text-decoration:underline;
color:red;
}

Con esto podrán personalizar la barra de navegaciones cuando linkeen secciones de modo personalizado.

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Para marcar en un menú la página que actualmente estamos mirando, generalmente añadimos al link alguna clase llamada .activo o similar, en donde indicamos alguna particularidad en su diseño que la diferencia de los demás link…..

  2. ¡Muchísimas gracias por compartirlo con los demás! Me ha sido de gran ayuda 🙂

    ¡Un saludo!

  3. justi

    Hola, para los elementos de menú funciona, pero y para las subpáginas de los menús? Cuando entro en un submenú deja de estar activo el menú..

    Gracias!

  4. Cuando wordpress no marca un elemento del menu (como al estar dentro de una entrada con un menu personalizado) siempre está la opción de utilizar JQuery:

    $(window).load(function(){
    $( “.menu-item-31” ).addClass( “current_page_item ” );
    });

Dejar un comentario