Italiano
Română
РусскийCómo añadir estado activo a los enlaces de navegación
Estoy intentando añadir estados activos para mi menú de navegación personalizado, pero hasta ahora nada de lo que pruebo funciona. He configurado el menú de navegación en un archivo separado nav.php, luego incluí nav.php en mi archivo header.php así:
<?php include('nav.php'); ?>
Creé páginas personalizadas de WordPress en la carpeta child e incluí header.php justo después del nombre de la plantilla:
<?php /* Plantilla: Página de Diseño Web*/
?>
<?php get_header(); ?>
Aquí está mi código HTML y PHP actual en nav.php donde añadí un atributo id único "currentpage" para indicar qué elemento del menú refleja la página actual del usuario:
<ul id="menu" class="clearfix">
<li<?php if ($thisPage=="About")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/about" title="Página de bienvenida" class="parent-link menu-item-2" id="main-menu-item-4">About</a></li>
<li<?php if ($thisPage=="Portfolio")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/portfolio" class="parent-link menu-item-3">Portfolio</a></li>
<li<?php if ($thisPage=="Services")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/services" class="parent-link menu-item-4">Services</a></li>
<li<?php if ($thisPage=="Prices")
echo " id=\"currentpage\""; ?> class="parent-item"><a href="/prices" class="parent-link menu-item-5">Prices</a></li>
</ul>
Y este es mi CSS para los estados hover y active:
ul#menu li a:hover {
background-color: #999999;
color: #fff;
}
ul#menu li #currentpage a {
background: #fff;
color: #333;
}
Para cada página asigné el valor después del nombre de la plantilla, aquí está mi página de inicio:
<?php /* Plantilla: Página de Diseño Web
*/
?>
<?php $thisPage="Home"; ?>
<?php get_header(); ?>
Espero que alguien pueda ayudar, realmente no entiendo por qué este código u otro código PHP que pruebo no logro hacer funcionar estos menús personalizados.
Hola Dan, es un menú personalizado con el id #menu, pero ahora lo cambié a wp_nav_menu y también hice cambios en el css. ¿Debería eliminar también este código php de todos los li con viñetas: <?php if ($thisPage=="About") echo " id=\"currentpage\""; ?>
Steven Donea
¿Por qué no usas simplemente la función wp_nav_menu() en lugar de crear manualmente tu menú?
Dan
Hola Dan, tienes razón sobre usar la función wp_nav_menu(), en lugar de tomar la molestia de crear uno manualmente. Así que volví a añadir la navegación de WordPress y tengo esto: <div id="access" role="navigation"> <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> </div> ahora el único problema es cuando empiezo a dar estilo a los menús, primero que nada no puedo hacer que los menús floten a la derecha.
Steven Donea
Probablemente necesitarás cambiar tus selectores CSS para que funcionen con el HTML que WordPress genera para ti. Normalmente el elemento <ul> tiene una clase "menu", no un id como en tu ejemplo de código.
Dan