Micaela 14 de abril de 2009 a las 11.24
   Imprimir artículo
elWebmaster.com

WordPress: Agregando dropdowns y subcategorías en la barra de navegación


wordpress_finalEn el siguiente tutorial les mostraremos cómo pueden desplegar sub-categorías en un dropdown animado con WordPress y de qué manera se pueden crear dropdowns para sub-páginas.

Se trata de un código muy fácil de programar con el que no tendrán ningún tipo de problemas. Al final, editaremos el CSS para que vaya de acuerdo a nuestro tema.

1. Subir los archivos

Baja el archivo dropdown.zip, descomprímelo y sube las dos carpetas que contiene en la carpeta de tu tema. Por ejemplo:

yoursite.com/wp-content/themes/yourtheme/inc

yoursite.com/wp-content/themes/yourtheme/js

2. Edita tu cabecera

Abre header.php dentro de los archivos de tu tema y busca la siguiente línea:

  1. <?php wp_head(); ?>

Antes que eso, pega lo siguiente. Esto llamará a todo el JavaScript que necesitamos usar:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2.  
  3.     <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
  4.  
  5.     <script type="text/javascript">  jQuery(function(){
  6.  
  7.     jQuery('ul.sf-menu').superfish();
  8.  
  9.     });
  10.  
  11.     </script>

Nota: Utilizamos la versión de jQuery que hostea Google porque está en un dominio diferente que el nuestro y de esta forma, los usuarios pueden descargar más archivos simultáneamente mientras se carga el sitio. Además muchos sitios utilizan este link por lo que es probable que lo tengan en su caché y no sea necesario que lo descarguen.

3. Agrega tu navegación de página y categoría

Depende de tí el lugar de tu template en donde colocas esto. Por el hecho de que es un menú dropdown desearás hacerlo horizontal, así que tu archivo header.php será usualmente el lugar más apropiado donde comenzar a buscar, pero como cada tema es diferente deberás encontrar el sitio correcto por ti mismo.

Para añadir la navegación de categoría, pega el siguiente código en dónde desees que esté:

  1. <div id=”cat”>
  2.  
  3.     <?php include (TEMPLATEPATH . '/inc/catnav.php'); ?>
  4.  
  5.     </div>

Para la navegación de página, usa lo siguiente:

  1. <div id=”navi”>
  2.  
  3.     <?php include (TEMPLATEPATH . '/inc/navi.php'); ?>
  4.  
  5.     </div>

4. Edita el CSS

Abre el archivo style.css de tu tema y pega lo siguiente al final:

  1. /* Navegación de Página con Dropdown */
  2.  
  3.     #navi{height:29px;background:transparent;display:block;padding:0;font:normal 18px Arial,sans-serif;text-transform:uppercase;}
  4.  
  5.     #menu ,#menu ul {margin: 0;padding: 0;list-style: none;height:29px;}
  6.  
  7.     #menu a {color: #666;display: block;padding: 4px 10px 6px 10px;}
  8.  
  9.     #menu a:hover {color: #ccc;display:block;text-decoration: none;background:#0066cc;} /* Diseño de enlaces cuando el mouse se posa encima de ellos */
  10.  
  11.     #menu li {float: left;margin: 0;padding: 0;}
  12.  
  13.     #menu li li {float: left;margin: 0 0 0 5px;padding: 0;width: 130px;}
  14.  
  15.     #menu li li a, #menu li li a:link, #menu li li a:visited {background:#fff;width: 150px;float: none;margin: 0;padding: 4px 10px 5px 10px;color:#333;}
  16.  
  17.     #menu li li a:hover, #menu li li a:active {background:#333;width: 150px;float: none;margin: 0;padding: 4px 10px 5px 10px;color:#fff;}
  18.  
  19.     #menu li ul {position: absolute;width: 10em;left: -999em;z-index:1;}
  20.  
  21.     #menu li:hover ul {left: auto;display: block;}
  22.  
  23.     #menu li:hover ul, #menu li.sfhover ul {left: auto;}
  24.  
  25.     #menu li.current_page_item a{background:#0066cc;color:#fff;} /* Diseño para la página en la que el usuario esté en ese momento (si se aplica) */
  26.  
  27.     #menu li.current_page_item a:hover{color:#000;text-decoration:none;}
  28.  
  29.     /* Navegación de Categorías con Dropdown */
  30.  
  31.     .sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;font:normal 14px Arial,sans-serif;text-transform:uppercase;}
  32.  
  33.     .sf-menu {line-height:1.0;height:31px;background:transparent;}
  34.  
  35.     .sf-menu ul {position:absolute;top:-999em;width:10em; /* la compensación izquierda de submenús debe encajar (ver abajo) */}
  36.  
  37.     .sf-menu ul li {width:100%;}
  38.  
  39.     .sf-menu li:hover {visibility:inherit; /* arregla el ’sticky bug’ de IE7 */}
  40.  
  41.     .sf-menu li {float:left;position:relative;}
  42.  
  43.     .sf-menu a {display:block;position:relative;color:#666;}
  44.  
  45.     .sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0;top:30px; /* match top ul list item height */z-index:150;}
  46.  
  47.     ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
  48.  
  49.     ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */top:0;}
  50.  
  51.     ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
  52.  
  53.     ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* concuerda con el ancho de ul */top:0;}
  54.  
  55.     .sf-menu {float:left;margin:0;width:100%;}
  56.  
  57.     .sf-menu a {border-right:1px dotted #d7d7d7;padding: 8px  10px;text-decoration:none;color:#666;} /* Diseño de los enlaces del dropdown */
  58.  
  59.     .sf-menu a, .sf-menu a:visited  { /* selector visitado - IE6 aplicará color de texto*/color:#0066cc;}
  60.  
  61.     .sf-menu li {background:transparent;color:#666;}
  62.  
  63.     .sf-menu li li {background:#fff;}
  64.  
  65.     .sf-menu li li li {background:#fff;}
  66.  
  67.     .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:#d7d7d7;outline:0;color:#0066cc;} /* Fondo = Colores de fondo del enlace cuando el mouse se posa encima */
  68.  
  69.     .sf-menu li.current-cat a{background:#070707;color:#0066cc;}
  70.  
  71.     .sf-menu li.current-cat a:hover{background:#666;color:#ccc;}

Si no te sientes muy confiado trabajando con CSS puedes utilizar el código de arriba como tu base. Sólo edita las partecitas que necesites (que no serán muchas) y pronto tendrás el diseño terminado.

Fuente: Pro Blog Design


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. fatima dice:

    WOW MARAVILLOSA INFORMACION DE WORDPRESS ESTA WEB ESTA SUBIENDO COMO LA ESPUMA FELICIDADES ATTE: FATIMA

  2. jose antonio dice:

    Hola estoy muy interesado pero controlo lo justo, si por favor me pudieras decir en el punto 2 la linea que tengo que buscar. y supongo que lo que tengo que pegar lo pego en la cabezera del header.php
    muchas gracias

  3. Alejandra dice:

    Gracias. Ha sido un error. Ya agregamos la línea que faltaba 😛

  4. David dice:

    Excelente aporte sin duda me ha ayudado mucho. Gracias!!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder