¿Estás cansado de tu vieja barra de navegación?. Si es así ¿que tal añadir una lista desplegable de categorías?, algo al estilo de los themes tipo revista.
Vamos a ver como hacer una lista desplegable de tus páginas y sub-páginas, incluyendo al final como mostrar tus categorías directamente en el menú.
¿Estas [email protected]?. Vamos con ello …
Índice de contenidos
HTML y PHP
Empezaremos usando las funciones internas de WordPress para obtener la lista de páginas y categorías. Edita el fichero header.php de tu plantilla y remplaza el antiguo código ‘nav’ por este otro:
<ul id="nav" class="clearfloat">
<li><a href="<?php&phpMyAdmin=3e6c4943d9a6t7c8283c echo get_option('home'); ?>/" class="on">Blog</a></li>
< ?php wp_list_pages('title_li='); ?>
<li class="cat-item"><a href="#">Categorías</a>
<ul class="children">
< ?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "</ul><ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</li></ul>
Este código hará una lista de todas tus páginas y sub-páginas, así como una lista de las Categorías. Cuando un usuario coloque el cursor sobre el nivel superior de páginas o categorías se mostrará un desplegable de las sub-páginas/categorías.
CSS
A pesar de que el código anterior es completamente funcional, nuestro script necesita un poco de estilo CSS. Este en concreto, tomado del theme gratuito Mimbo, es perfecto para el ejemplo que estamos utilizando.
#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}
Javascript
Los navegadores actuales (Safari, Firefox, Opera, e incluso Internet Explorer 7) no tienen problemas con la clase ‘:hover’ en elementos li. Pero, como seguro ya has imaginado, el viejo y obsoleto Internet Explorer 6 no puede con ellos.
Para hacer nuestro script compatible también con este caduco navegador (IE6), tenemos que cargar este pequeño, y poco molesto, código Javascript en la sección ‘head‘ de nuestro documento HTML document, o incluso mejor en un fichero .js aparte.
< 
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
es justo lo que estoy necesitando!!! (entre otras cosas!), buenísimo el post!… pero, servirá para colocar arriba la lista que aparece actualmente sobre un costado de mi blog (el indice que está en un widguet)?… gracias!
Estimados. Muy buen porst. Pero tengo una duda. Es posible abarcar también páginas hijas de las sub-páginas. ???
Eso gracias.
Los enlaces en menú de este tipo, ¿son seguidos correctamente por los buscadores?
Saludos!
@emiliano, es precisamente para eso, pero para categorías y páginas.
@Sabogal, los buscadores leen el código de la página y el contenido de contexto ¿para que quieres que sigan tu lista de categorías cuando lo que importa es el contenido? 😉
@rafasilva, si claro
yo uso un plugin y funsiona perfectamente solo se instalar y se agraga un codigo simple al header.php
Y el plugin es ?¿
como entro a header.php?? jeje
Dany, desde tu aplicación de ftp o en el editor de archivos de tu WP.
dj duck, si no vas a decir cual es el plugin mejor no digas nada.
(Comentario editado por Guillermo, se quitaron ofensas)
Buenisimo post… estaba buscando esto!! Me queda una duda. ¿Es posible editarlo para que despliegue las sub-categorías de forma lateral al poner el ratón sobre la categoría? Ahora me salen las categorías y las subcategorías todas juntas y sin distinción y necesitaría que también las sub-categorías fueran desplegables.
Muchas gracias!
exelente post, hay muchos themes muy buenos pero no funcionales al tener muchas categorias en un blog
Hola. He usad el HTMl en http://www.f1inlive.com, pero tengo la duda de como intercambiar la posicion de Pilotos con cualquier otra categoria. Si os fijais, al usar el codigo cat_ID, me sale así. Quisrea saber si hay una solucion aparte de volver a escribir categorias.
Saludos
@AndresRv: ¿te refieres a darles otro orden en el listado?
no entiendo como «remplazar el antiguo codigo nav»… es decir… me podrías decir donde debería ponerlo con más precisión? (y que debería borrar)… mil gracias… mataría saber cual es ese plugin!!!… saludetes, emi
este va como loco:
ryans-suckerfish-wordpress-dropdown-menu
Uhmmm…¿se podría adaptar para que listara los meses del archivo en vez de las categorías?
Si, fernando, justo eso. Quiero cambiar el orden ese. Y estarioa bien saber si alguien podria ayudarme. Gracias
Hola, mi problema es que me salen las páginas y subpáginas a la vez. Y yo quiero que las subpáginas sólo aparezcan cuando pongo el cursor encima de la «página madre».
Hay alguna forma de hacerlo???
Yo necesito que solo me muestre las sub paginas, de la pagina madre. Asi como esta muestra tambien las subpaginas del las subpaginas.
lo instale tal cual lo describes, pero los menus se superponen entre si y se ven ensimados :S
a alguien mas le paso esto?
Fernando te consulto lo siguiente:
Necesito que la lista desplegable me muestre una determinada categoria y subcategorias con el feed correspondiente a cada una.. cual seria el código que cambiaria o lo que tendria que agregar??
Desde ya muchas gracias!!
Habria algún modo de poner una lista desplegable así en un elemento de la barra lateral, como por ejemplo el que tú tienes de Ayuda para… ??
Muy buen post, voy a ponerme a trabajar en esto. Lo necesitaba.
Por siaca para el sidebar.php encontre un plugin que ayuda mucho es el WP-dTree
no he intentado instalarlo en el header.php. Prefiero de esta forma como lo expones en el post.
Se agradece.
Excelente tutorial
Realmente un fabuloso tutorial!
Hola muchas gracias por el tutorial. Muy bueno. Solo tengo una pregunta. Como hago para eliminar el enlace del menu "madre"? me explico. Tengo un menú dentro de la navegacion que se llama "Dias" al posicionar el mouse en "días" se despliegan los nombres de las sub-paginas: "lunes", "martes", etc. Lo que quiero es quitar el enlace de "Dias". Me podrías ayudar? muchas gracias …
Muy bueno Gracias
Muchas gracias, muy util y sencillo, me funciono lo que yo queria
se puede agregar una descripción a este mismo código, para que aparezca debajo del nombre de la categoría padre?
muy bueno, gracias por la entrada
Disculpa soy nuevo en esto de wordpress de hecho hoy lo estrené, donde puedo encontrar ese código???… te lo agradecria!!!