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.
- Lo primero es descargar estos dos archivos: tabs.js y jquery.js
- Súbelos a la carpeta donde tengas tu plantilla activa (p.ej: wp-content/themes/miplantilla)
- 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>
- 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&limit=10&format=html’); ?></ul> </div> <div class="”t2?"> <ul>< ?php wp_list_categories(”); ?></ul> </div> <div class="”t3?"> <ul>< ?php wp_get_archives(’type=weekly&format=html’); ?></ul> </div> </div> </div>
- 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; } - 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.
¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
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
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!
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.
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?
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.
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.
@Fernando Tellado Muchísimas gracias por esa info que pusiste, gracias a eso he resuelto mis problemas 😀 no sabía que jQuery interfiriera, muchas gracias de nuevo 😀
Me alegro que lo solucionaras Enrique, a mi me tocó descubrirlo con «prueba-error» 😉
no me sale, tengo algun error como reemplazo esas «»sidebartabs»»
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.
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.)
<code>
<a title="Entradas" rel="nofollow">Entradas Recientes
<a title="Categorías" rel="nofollow">Categorías
<a title="Archivo" rel="nofollow">Archivo
texto del TAB 1
TEXTO del TAB 2
TEXTO del TAB 3
Despues de horas de investigación descubrí que idTabs es muy sencillo de implementar y cumple su cometido http://www.sunsean.com/idTabs
Hola, gracias por la entrada. El caso es que tengo una página pero se me desconfiguran los tabs al navegar por ellos. Concretamente me ocurre en el menú «Producciones» y si vuelvo atrás a darle a un elemento que ya he visitado no se cargan las pestañas. Cual puede ser el problema? Muchas gracias