SummArg | Cursos y recursos para webmasters

01/03/2011

Cómo insertar un slider de noticias vertical en WordPress sin plugin?

En esta oportunidad vamos a utilizar un plugin para jQuery llamado Totem, que se encarga de facilitarnos la tarea de animar las noticias que insertaremos en una lista. Pueden ver todo lo referente a dicho plugin en:

Descarga | Demo

Como primera medida nos encargaremos de tener una categoría en nuestro WordPress llamada “Noticias” y luego ponemos mano a la obra.

Descargamos los archivos de Totem y colocamos dentro de la carpeta /scripts/ de nuestro theme los siguientes archivos:

jquery.totemticker.js
jquery.totemticker.min.js

Entre etiquetas <head> de nuestro archivo header.php, posiblemente debamos insertar jQuery, el cual ya viene incluido en WordPress y podemos cargarlo desde el archivo functions como nos explican en nosolocodigo.

Podemos optar por cargarlo desde afuera con la siguiente línea:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Luego, en el mismo archivo, insertaremos las llamadas a los archivos de nuestro plugin:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.totemticker.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.totemticker.min.js"></script>

En la plantilla que elijamos para nuestro ticker de noticias, vamos a inicializar el script. Podemos utilizar cualquier plantilla. Las opciones que utilizamos para iniciar el script son las básicas, pueden ver las mas avanzadas en esta sección.

<script type="text/javascript">
 $(function(){
 $('#vertical-ticker').totemticker({
 row_height    :    '150px',
 next        :    '#ticker-next',
 previous    :    '#ticker-previous',
 mousestop    :    true,
 });
 });
 </script>

Como pueden ver las opciones son muy intuitivas. Colocamos un alto máximo de 15opx a nuestro ticker, nombramos los IDs que utilizaremos para nuestros links de navegación, y mousestop que al ser seteado en true indica que el ticker debe detener la animación si el puntero del mouse pasa por encima.

En nuestro index, en la sección deseada, colocaremos el loop de la siguiente manera:

<?php query_posts('category_name=Noticias&showposts=6'); ?>
 <ul id="vertical-ticker">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
 <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><h2>
 <?php the_title(); ?></a></h2>    
 <?php the_excerpt(); ?>
 </li>
 <?php endwhile; else: ?>
 <p>No hay noticias</p>
 <?php endif; ?>
 </ul>
 <a href="#" id="ticker-previous">Anterior</a> <a href="#" id="ticker-next">Siguiente</a>
 <?php wp_reset_query(); ?>

Finalmente debemos añadir las siguientes líneas a nuestro CSS para que todo funcione como es debido. Vamos a destacar que nosotros preferimos utilizar imagenes en vez de texto para los links y les dejamos las dos flechas al final del artículo.

ul#vertical-ticker {
 margin-top: 10px;
padding-top: 10px;
}
#vertical-ticker {
 border-top: 1px solid #333;
 overflow:hidden;
 margin:0; padding:0;
 }
 #vertical-ticker li{
 display:block;
 color:#333;
 border-bottom:1px solid #ddd;
 }
#vertical-ticker li  h2 a{
font-size: 14px;
color: #2c2c2c;
line-height: 16px;
font-weight: bold;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
#vertical-ticker li  p{
font-size: 12px;
line-height:15px;
color: #2c2c2c;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
a#ticker-next {
background-image: url(images/arrow_left.png);
background-repeat: no-repeat;
width:22px;
height:22px;
float:left;
text-indent:-9999px;
}
a#ticker-previous {
background-image: url(images/arrow_right.png);
background-repeat: no-repeat;
width:22px;
height:22px;
float:right;
text-indent:-9999px;
}

Esperamos les resulte útil!

Dejar un comentario

  1. Ante todo decir q no sé nada de javascripts. Hay ciertos detalles q me gustaria me aclararas.
    Si inserto jQuery en el archivo header.php es suficiente con esas líneas? Pregunto pq al optar por cargarlo desde afuera pones 3 líneas, y no sé si las 2 últimas las necesito si opto por insertar jQuery en el archivo header.php. Otra pregunta si opto por cargarlo desde afuera donde ubico este archivo, ¿en q carpeta o asi? Es q quiero probar las 2 variantes.
    Por último, escogi una plantilla cualquiera para el blog, el blog no es para noticias pero quiero incluir noticias q se refieren a las entradas q presento. Mi pregunta es, ¿en q lugar, archivo o carpeta se ponen las líneas para iniciar el script? ¿Y las últimas líneas se añaden al CSS del theme?

  2. Nekko

    Si optás por cargarlo desde afuera, no necesitás nada mas que esas líneas, o si lo preferís podés descargarlo desde jQuery.com y alojarlo en un directorio dentro de tu theme. Es indistinto como se llame la carpeta siempre y cuando luego coloques la ruta al mismo correctamente.

    Generalmente las líneas para indicarle a un script a que elemento se debe aplicar se colocan antes del cierre de la etiqueta , pero bien podés colocarlo en el.

  3. Wilfran ray

    buenas, mi pregunta es hay alguna forma de hacer que las noticias se muestren en la dirección contraria digo, de arriba hacia a bajo????? es posible ???

  4. Nekko

    Si, dentro de las opciones tenés el parámetro “Direction” http://buildinternet.com/project/totem/

  5. Wilfran ray

    bueno chamo gracias jejeje, disculpa la molestia, voy a tratar de buscarlo y cambiar la dirección a gracias de nuevo

  6. Wilfran ray

    hola Nekko como estas mira e buscado y buscado la forma de cambiarla de dirección (que se muestren de arriba hacia bajo) y no e podido sera que me puedes ayudar. es que no encuentro lo de dirección, pues no aparece en las carpetas que se descargan desde aquí, espero tu respuesta?

  7. mira necesito un favor no e encontrado la forma de cambiar la direccion pues eso no trae direccion como comentaste

Dejar un comentario