Agregando soporte de menús personalizados a tu tema wordpress

por

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/

Related posts:

Default ThumbnailSEMINARIO «LOS PUEBLOS ORIGINARIOS Y LA EDUCACION INTERCULTURAL BILINGüE EN EL ABYA YALA» Default ThumbnailLos Pueblos Originarios: un aporte para el debate en el Mercosur Default ThumbnailDefensa y Justicia – Copa Argentina Default ThumbnailPresencia Mapuche en la Feria del Libro 2018

6 comentarios en «Agregando soporte de menús personalizados a tu tema wordpress»

  1. 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

  2. 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?

  4. 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

  5. Muchisimas gracias, justo esto me hacia falta al diseñar los temas, muy util me sirvio a la primera
    saludos

  6. Excelente.

    Pensé que era mas dificl hacer que un theme aceptara zonas de menú personalizados.

    Súper fácil.

    Solo un comentario. WP no usa el ID MENU, lo usa como Class. En el css deben ser .menu y no #menu

Deja un comentario