¿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 …
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[//><!--
-
sfHover = function() {
-
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
-
for (var i=0; i<sfEls.length; i++) {
-
sfEls[i].onmouseover=function() {
-
this.className+=” sfhover”;
-
}
-
sfEls[i].onmouseout=function() {
-
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
-
}
-
}
-
}
-
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
-
//–><!]]>
Ya puedes ofrecer un aspecto profesional a tu blog con menús desplegables, que además son muy útiles para tus lectores.
24 comentarios en “Lista de Categorías Desplegable”
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 ?¿
[...] un blog para que muestre una página estática en vez de posts o mas avanzados como crear una lista desplegable de categorías. Así hasta mas de 40 trucos, la mayoría muy [...]
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.
Escribe un Comentario
Comentarios adicionales gracias BackType
BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.
[#3]
Ya está disponible WordPress MU 2.9.1 y José Conti me avisa que en unas horas tendrá lista la traducción para poder tener actualizado y listo tu sitio multiusuario.
[#6]
¿Sabías que Kubrick, el tema que va a ser sustituido en 2010 lo creó un desarrollador danés?. Toda la historia de este tema, ya mítico, la tienes en este artículo (traducido con Google).
[#26]
Último mensaje de: seijas
En el foro: Otros CMS
Último mensaje de: adriancon
En el foro: Plugins
Último mensaje de: fum
En el foro: General WordPress.org
Último mensaje de: AMD
En el foro: Themes y Diseño
Último mensaje de: JuanM@
En el foro: Plugins
Acceder