Lista de Categorías Desplegable

¿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 list@?. 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.

< ![CDATA[//>

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

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.

32 comentarios en “Lista de Categorías Desplegable”

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

  2. Estimados. Muy buen porst. Pero tengo una duda. Es posible abarcar también páginas hijas de las sub-páginas. ???

    Eso gracias.

  3. @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

  4. Pingback: 40 trucos WordPress mas buscados | Labrys

  5. 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!

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

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

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

  9. Yo necesito que solo me muestre las sub paginas, de la pagina madre. Asi como esta muestra tambien las subpaginas del las subpaginas.

  10. lo instale tal cual lo describes, pero los menus se superponen entre si y se ven ensimados :S

    a alguien mas le paso esto?

  11. 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!!

  12. 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… ??

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

  14. 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 …

  15. Adobe Tutoriales

    se puede agregar una descripción a este mismo código, para que aparezca debajo del nombre de la categoría padre?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido