Como utilizar Easy Accordion en wordpress

October 19th, 2010 por danielmd Comentar »

Me acabo de encontrar este sencillo script de JQuery llamado Easy Accordion, con el podemos mostrar contenido en forma de acordeón dentro de una pagina web, mide 8KS, funciona en IE6+, firefox, Safari, Chrome, es gratis y esta bien fácil de usar.
easy accordion jquery
Como en la pagina del autor explican detalladamente como utilizarlo en una pagina estática, yo les dejo aquí la forma en que se puede implementar este script dentro de un theme para wordpress, así se evitan de instalar un plugin innecesario que solo sobrecarga el servidor.

Lo primero que debemos hacer, es descargar el script Easy Accordion desde la pagina del autor: descargar plugin JQuery.

Ya que lo descargamos descomprimimos el script y lo guardamos en la carpeta del theme en el que lo vamos a implementar.

El siguiente paso es agregar estas tres lineas de código dentro del archivo header.php entre de las etiquetas head y /head.

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jquery.easyAccordion.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/utility.js"></script>

Ahora abrimos el archivo style.css y hasta el final pegamos el siguiente código que le dará formato a nuestro acordeón(puede ser editado desde ahí para cambiarle colores, tamaño etc.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Acordion */
.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
dd p{line-height:120%}
#accordion-1{width:550px;height:245px;padding:30px;background:#fff;border:1px solid #ddd;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
#accordion-1 dl{width:550px;height:245px}	
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#26478C;color:#fff;}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#2C539E;}
#accordion-1 dt.hover{color:#68889b;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 dd{padding:25px;background:border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#68889b}
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
#accordion-1 h2{font-size:1.5em;margin-top:10px}
#accordion-1 .more{padding-top:10px;display:block}

Ya que tenemos todo preparado, toca implementarlo en la parte que deseamos del theme, en mi caso yo lo puse en el inicio del archivo index.php, para que muestre 4 entradas aleatorias en la pagina de inicio del blog. El código que debemos colocar es el siguiente.

1
2
3
4
5
6
7
8
9
<div id="accordion-1">
<dl>
<?php query_posts(array('orderby' => 'rand', 'showposts' => 4)); if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<dt>Noticia</dt>
<dd><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2><p> <?php the_excerpt('(Leer el resto...)'); ?></dd>
<?php endwhile; ?>
<?php endif; ?>
</dl>
</div>

Para tener varios acordeones dentro de la misma pagina, pero con diferente estilo, crean otras clases como la de #accordion-1 con otro nombre, una ves que la hagan la declaran en el archivo utility.js que se encuentra dentro de la carpeta scripts, ya que es ahí donde se configuran los acordeones con su el intervalo, tiempo y el autostar para cada uno.
Se declaran de esta forma

1
2
3
4
5
6
7
8
$('#accordion-2').easyAccordion({ 
autoStart: false	
});
$('#accordion-3').easyAccordion({ 
autoStart: true,
slideInterval: 5000,
slideNum:false	
});

El resultado debe ser exactamente el mismo que este.
jquery slidebar
Y eso es todo, si no entendieron hagan sus preguntas en los comentario :)


Si te gusto esta entrada suscribete al blog vía RSS o puedes recibir las actualizaciones directamente en tu correo electrónico

1 comentario

cambiar gravatar y obtener una imagen propia
  1. jorgeespejo says:

    Hola no tienes los archivos??? saludos!!!

Comentar