02jun
14

Creando Tabs con jQuery

Hace ya tiempo que explicamos como crear áreas de contenido en Tabs (pestañas) en nuestro blog WordPress, en esa ocasión utilizando DomTabs. Pero varios usuarios pidieron una guía para hacer lo mismo pero utilizando otra librería: jQuery.

Bueno, ya sabes que aquí siempre cumplimos con la palabra dada, así que aquí tienes una guía para incluir contenido en Tabs usando jQuery y un poco de CSS.

Vamos a ello.

  1. Lo primero es descargar estos dos archivos: tabs.js y jquery.js
  2. Súbelos a la carpeta donde tengas tu plantilla activa (p.ej: wp-content/themes/miplantilla)
  3. A continuación abre tu fichero header.php de la plantilla que utilices y añade el siguiente código entre las etiquetas <head> y </head>: 
    <script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabs.js'; ?>"></script>
  4. Ahora, si es el caso, ve a tu fichero sidebar.php y añade este código donde quieras que aparezcan las Tabs, preferentemente al principio de la misma (arriba). Por supuesto, esto es un ejemplo del contenido que puedes añadir, utiliza lo que desees. Aquí hemos puesto las entradas recientes, categorías y el archivo: 
    <div id="”sidebartabs”">
<div class="”tabbed”">
<ul class="”tabs”">
	<li class="”t1?"><a class="”t1" title="”Entradas">Entradas Recientes</a></li>
	<li class="”t2?"><a class="”t2" title="”Categorías”">Categorías</a></li>
	<li class="”t3?"><a class="”t3" title="”Archivo”">Archivo</a></li>
</ul>
<div class="”t1?">
<ul>< ?php wp_get_archives(’type=postbypost&amp;limit=10&amp;format=html’); ?></ul>
</div>
<div class="”t2?">
<ul>< ?php wp_list_categories(”); ?></ul>
</div>
<div class="”t3?">
<ul>< ?php wp_get_archives(’type=weekly&amp;format=html’); ?></ul>
</div>
</div>
</div>
  5. Ahora tienes que abrir la hoja de estilos de tu plantilla (style.css) y añadir el siguiente código (ten en cuenta los comentarios encerrados en /*): 
    #sidebartabs { /* actua como contenedor del widget */
clear:both;
width:300px; /* este ancho debes ajustarlo al mas adecuado a tu sidebar */
margin-left:10px;
margin-bottom:20px;
margin-top:0px;
display:block;
}
#sidebartabs .tabbed div a { /* Esto marca la forma de mostrar los enlaces en las Tabs */
padding-left:3px;
padding-top:5px;
padding-bottom:5px;
display:block;
font-size:10pt;
color:#999999;
border-bottom:#ababab 1px solid;
text-decoration: none;
clear:both;
text-align:left;
margin-left:0px;
margin-right:4px;
margin-top:0;
margin-bottom:0;
width:270px;
}
#sidebartabs .tabbed div a:hover { /* Aqui das estilo a los enlaces cuando colocas el cursor sobre ellos - como vimos en un post reciente */
color:#777777;
text-decoration: none;
}
.tabbed { /* Este es el contenedor del area de las pestañas */
margin-bottom:10px;
clear:both;
margin-top:0px;
}
.tabbed ul.tabs { /* Estilo de las tabs */
float: left;
display: inline;
width: 100%;
margin: 0;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
}
.tabbed ul.tabs li { /* Estilo de cada tab */
list-style-type: none;
float: left;
margin: 0;
padding: 0;
z-index:10;
}
.tabbed ul.tabs li a { /* Estilo del enlace de la tab */
overflow: hidden;
display: block;
margin: 0 1px 0 0;
padding: 10px 12px;
background-color:#efefef;
cursor:pointer;
}
.tabbed ul.tabs li a:hover { /* Estilo cuando colocas el cursor sobre una tab */
text-decoration:none;
}
.tabbed ul.tabs li a.tab-current { /* Estilo de la tab activa */
background-color:#e8e8e8;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:#cda2a2 solid 2px;
}
.tabbed div { /* Estilo del area de cada tab, dentro de la pestaña */
float: left;
display: block;
background-color:#e8e8e8;
padding:10px;
clear:both;
width:100%;
padding-bottom:20px;
border:1px solid #CCCCCC;
border-bottom:#cda2a2 solid 2px;
margin-top:-1px;
z-index:1;
}
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
display: none;
}
  6. Con estos estilos anteriores obtienes unas bonitas tabs en tonos grises. Experimenta con colores y estilos para adaptarlo al aspecto de tu plantilla. También puedes añadir mas tabs agregando estas líneas en el fichero sidebar.php: 
    </li>
	<li class="”t4?"><a class="”t4" title="”NombreTabNueva”">NombreTabNueva</a></li>
POR DEBAJO DE
	<li class="”t3?"><a class="”t3" title="”Archivo”">Archivo</a></li>
Y LUEGO …
<div class="”t4?">LO QUE QUIERAS QUE VAYA AQUÍ</div>
Y ASÍ SUCESIVAMENTE…

Eso es todo, ya lo tienes. Con esto y poco mas no necesitas pagar por una plantilla Premium.

Gracias

Para saber más:

por en Programación, Tutoriales / Trucos código, CSS, DomTABs, javascript, jQuery, stylesheet, Tabs
  • wordpressionado

    En primer lugar muchas gracias por este torrente de información que nunca para… Pero, porqué sólo me sale esto (esto lo veo en la página, así como sale). Muchas gracias y perdón por ser tan plasta.

    * Entradas Recientes
    * Categorías
    * Archivo

  • http://www.gerencie.com Sabogal

    La navegación de esta forma o mediante pestañas, no afecta el posicionamiento?, esto por que creo que googlebot no podría seguir esos enlaces. Estoy equivocado?

    Saludos!

  • http://www.perrocallejero.com Perro Callejero

    No afecta al posicionamiento porque los enlaces siguen ahi.

    Tú no los ves porque se ocultan con el juego de javascript, pero en el código fuente, que es lo que leen los robots, están todos.

  • http://www.todotutoriales.es todotuto

    Genial el tuto, os felicito de nuevo, solo una pregunta, ¿cual de los dos sistemas carga más rápido y chupa menos recursos del servidor, jQuery o DomTabs?

  • http://fernandotellado.com/ Fernando Tellado

    Personalmente me da la sensación de que Domtabs es mas rápido, pero jQuery es mas flexible. Por otra parte jQuery interfiere con algunos plugins (share-this, lightbox).

    Es cuestión de elección personal y prueba-error.

  • http://www.minimalnet.org MinimalNet

    Fernando, el plugin este de texto enriquecido y plano no va bien, no te da el código de manera correcta por lo que se hace muy complicado poner en marcha lo que explica este post.

  • http://redcardel.net Enrique Castillo

    @Fernando Tellado Muchísimas gracias por esa info que pusiste, gracias a eso he resuelto mis problemas :-D no sabía que jQuery interfiriera, muchas gracias de nuevo :-D

  • http://fernandotellado.com/ Fernando Tellado

    Me alegro que lo solucionaras Enrique, a mi me tocó descubrirlo con “prueba-error” ;)

  • http://www.davidortega.net david

    no me sale, tengo algun error como reemplazo esas “”sidebartabs”"

  • http://fernandotellado.com/ Fernando Tellado

    No se a que te refieres, habría que verlo en detalle, que cada plantilla es un mundo. Mira a ver si en el foro podemos verlo mejor.

  • Christian

    Buenas , me parece genial este minitutorial, el código finalmente quedaria algo como esto (lo del head no, sino el cuerpo de la página o sidebar.)

    Entradas Recientes
    Categorías
    Archivo

    texto del TAB 1

    TEXTO del TAB 2

    TEXTO del TAB 3

  • Pingback: Creando Tabs con jQuery | Ayuda WordPress

  • Pingback: Widgets utilizados en este blog | nandroid blog

  • http://angelverde.info Angelverde

    Despues de horas de investigación descubrí que idTabs es muy sencillo de implementar y cumple su cometido http://www.sunsean.com/idTabs