Agregando soporte de menús personalizados a tu tema wordpress
septiembre 15th, 2010 at 2:54pm
En nuevas versiones de WordPress, se agregó una nueva característica, que son los menús personalizados con lo cual se pueden agregar o quitar enlaces etc, para que nuestro tema soporte dicha característica hay que realizar alguna modificaciones en nuestro tema. Aquí las detallo : (nota el css puede variar, solo puse el que tengo ahora yo como ejemplo)
functions.php
add_theme_support( 'nav-menus' );
register_nav_menus(array('menu' => __('menu')));
header.php
<div id="menu"> <? wp_nav_menu(array( 'theme_location' => 'menu' )); ?> </div>
style.css
#menu {
background-color:#ccc;
margin: 0;
padding: 0;
}
#menu ul {
margin-top:0px;
margin-right: 14px;
margin-left:20px;
float: right;
list-style: none;
}
#menu ul li {
-moz-border-radius-bottomleft: 6px;
-khtml-border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-khtml-border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
}
#menu ul li a {
font-color:#000;
font-weight: normal;
display: block;
line-height: 30px;
padding: 0 10px;
font-size: 12px;
text-decoration:none;
border-bottom: none;
}
#menu ul li a:hover {
background: #000;
color: #fff;
-moz-border-radius-bottomleft: 6px;
-khtml-border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-khtml-border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
}
#menu ul li a:visted {color: #000;}
#menu .menu-item {
font-color: #000;
background: #fff;
margin-left:8px;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}
#menu .current-menu-item, #menu li .current-menu-item {
color: #fff;
background: #000;
margin-left:8px;
}
#menu .current-menu-item a{
color: #fff;
}
#menu .children a{
font-size: 10px;
}
Próximamente mas info y ejemplos de código para WordPress en : http://wiki.cayu.com.ar/
Posteos relacionados:
|
|
Usando
Excelente, he probado el archivo y he tenido muy buenos resultados, te agradezco por dedicar tu tiempo a que sigamos aprendiendo como mejorar nuestro wordpress….
Saludos
Usando
Hola, muy bueno el tuto.
Con este sistema, se puede agregar un menú personalizado.
Te hago una consulta ¿cómo hago para poner más de un menú personalizado en mi theme?
Usando
genio!! muchas gracias!! me vino de 10
Usando
Hola que tal, mucha gracias por el tutorial, cuando dices que se agrege ese codigo, por ejemplo el primero function.php en que parte del documento tengo que agregar? puede ser en cualquier lado? Espero tu respuesta, gracias