SummArg | Cursos y recursos para webmasters

15/07/2011

Crear un widget de pestañas (tabs) en la sidebar de WordPress

Existen algunos plugins que nos permiten añadir contenidos en pestañas (tabs) en nuestra sidebar, pero ¿qué mejor que poder hacerlo paso a paso nosotros mismos? De este modo tenemos la posibilidad de adaptar el widget exactamente a lo que necesitamos. Nos basamos en la guía de justintadlock pero introdujimos algunos cambios de nuestro gusto.

Primer paso: jQuery

Vamos a usar una versión de jQuery de nuestra elección y no la que nos brinda en el núcleo WordPress, para ello insertamos el siguiente código en el functions.php, que carga el script en la versión que le indicamos excepto para el panel de administración.
function my_init_method() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
}

Ahora generamos un archivo llamado tabs.js y lo colocamos dentro de la carpeta /scripts/ de nuestro theme. Colocamos el siguiente contenido:
$(document).ready(function() {
// Setea la función para mostrar y ocultar las tabs en la sidebar, setea la pestaña actual.
$('div.tabbed div').hide();
$('div.t1').show();
$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');
// SIDEBAR TABS
$('div.tabbed ul li a').click(function(){
var thisClass = this.className.slice(0,2);
$('div.tabbed div').hide();
$('div.' + thisClass).show();
$('div.tabbed ul.tabs li a').removeClass('tab-current');
$(this).addClass('tab-current');
});
});

Y vinculamos el script abriendo el archivo header.php e insertando el siguiente código antes de </head>.
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabs.js'; ?>"></script>

Paso dos: Insertando el widget en nuestra sidebar

La estructura HTML es muy simple. Vamos a colocar solo 3 pestañas con contenido de prueba:
<div class="tabbed">
<ul class="tabs">
<li><a title="Tab 1">Tab 1</a></li>
<li><a title="Tab 2">Tab 2</a></li>
<li><a title="Tab 3">Tab 3</a></li>
</ul>
<!-- tab 1 -->
<div class="t1">
<!-- Una lista. -->
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<!-- tab 2 -->
<div class="t2">
<!-- Un texto -->
<p>Hola!.</p>
</div>
<!-- tab 3 -->
<div class="t3">
<!-- Otra lista -->
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div> </div><!-- tabbed -->

De este modo podemos insertar llamadas a funciones que desplieguen listados con las entradas mas vistas, o archivos, o por ejemplo las entradas mas comentadas:
<div class="t1">
<ul>
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?> (<?php comments_number('0','1','%'); ?>)</a></li>
<?php endwhile; ?>
</ul>
</div>

Paso tres: El estilo

Finalmente en el CSS añadimos lo siguiente:
.tabbed {
width:320px;
margin-bottom:10px;
}
.tabbed ul.tabs {
float: left;
display: inline;
width: 100%;
margin: 0;
padding: 0;
}
.tabbed ul.tabs li {
list-style: none;
float: left;
margin: 0;
padding: 0;
}
.tabbed ul.tabs li a {
overflow: hidden;
display: block;
margin: 0 2px 0 0;
padding: 7px 5px;
background: #ffffff;
border-top: 3px solid #ce0000;
border-left: 1px solid #ce0000;
border-right: 1px solid #ce0000;
color: black;
font-weight:bold;
}
.tabbed ul.tabs li a:hover {
}
.tabbed ul.tabs li a.tab-current {
background: #ce0000;
border-top: 3px solid #ce0000;
border-left: 1px solid #ce0000;
border-right: 1px solid #ce0000;
color:#ffffff;
}
.tabbed div {
float: left;
display: block;
width: 100%;
border: 1px solid #ce0000;
padding:10px;
}
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
display: none;
}
.tabbed h2 {
font-size:14px;
font-weight:bold;
margin-bottom:3px;
border-bottom: 1px solid #b4b4b4;
}
.tabbed div ul {
list-style-type: disc;
margin: 0 0 5px 5px;
}
.tabbed div ul li {
margin: 0 0 5px 5px;
}
.tabbed div p {
margin:bottom 5px;
}
.tabbed div a:hover {
background: #ce0000;
color: #ffffff;
}
.tabbed div.t3 ul li a {
font-size:12px;
font-weight:bold;
}

El resultado visual será similar al que muestra la imagen:

Dejar un comentario

  1. Se ve muy bueno, pero mi theme no tiene la carpeta SCRIPTS, entonces donde guardo el tabs.js?

  2. En donde vos quieras! Si tenés una carpeta /js/ también sirve, sino simplemente creá la carpeta /scripts/.

  3. Perfecto, gracias!!!

  4. no me funciona, por favor ayúdame, soy un novato en esto sino me echa mi jefe, ayudame por favor. el sitio es elmagacin punto com

Dejar un comentario