Tag Archives: menus personalizados

Ejemplos de menús personalizados WordPress

¿SI TE ENCUENTRAS TOMANDO PLANTILLAS ANTIGUAS y quieres agregar soporte para menús personalizados? Éstos son ejemplos de código que puede utilizar para eso.

Para ser claros, esto no es en toda regla general para menús personalizados. Ver un excelente post de Justin Tadlock, Goodbye, headaches. Hello, menus!wp_nav_menu página del Codex para todos los detalles.

Primero, implementaremos lo siguiente en functions.php y header.php.

En header.php:


<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary', 'fallback_cb' => 'mytheme_page_menu' ) ); ?>

Este comando reemplaza la última navegación (generalmente) una lista de páginas el cual mueve a la función alternativa a functions.php.

En functions.php:


// habilita menu de navegacion

register_nav_menus( array(

'primary' => __( 'Primary Navigation', 'mytheme' )

) );

// agregar alternativa de navegacion

function mytheme_page_menu() { ?><ul class="menu">

<li<?php if ( is_home() ) echo ' class="selected"'; ?>><a href="<?php home_url(); ?>">Home</a></li>

<?php wp_list_pages( 'depth=1&title_li=' ); ?>

</ul>

<?php } ?>

No se olvide de cambiar “mytheme” en los ejemplos anteriores al nombre de su plantilla.

A continuación, añada las reglas CSS para elementos de submenú.


#nav li { 	position: relative; }

#nav li a { 	display: block; }

#nav .children .children, #nav .sub-menu .sub-menu { 	margin-left: 12px; }

#nav ul ul { 	display: none; 	float: left; 	position: absolute; 	top: 32px; 	left: 0; 	width: 85px; 	z-index: 9999; }

#nav ul ul li { 	min-width: 105px; }

#nav ul ul a { 	width: 105px; }

#nav ul li:hover > ul { 	display: block; }

/* tus estilos van aqui */

#nav ul li a:hover, #nav ul li:hover > a, #nav ul li.current_page_item > a, #nav ul li.current_page_parent > a, #nav ul li.current_page_ancestor > a, #nav ul li.current-cat > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent a { 	/* background, color, etc */ }

A continuación, prueba tu nuevo menú. Prueba sin menú personalizado (navegación normal de la página), con un menú personalizado habilitado, y probar los menús desplegables mediante la adición de elementos de submenú.

Por último, agregar la etiqueta custom-menu a tu archivo style.css para contar al mundo con orgullo  que sabe dar soporte un menú personalizado en tu plantilla.

Traducción de themeshaper.com/custom-menu-code-samples/