Post Aleatorios con Newsticker en WordPress

Tutoriales | Escrito por Ezequiel M. | Junio - 28 - 2009

Newsticker fue recomendado hace un tiempo por Xiberneticos, un script JQuery que permite crear cajas animadas con noticias breves, esto desencadeno este post donde voy a fusionar Newsticker con WordPress.

El efecto logrado es similar al que se puede ver en los post aleatorios de la sidebar del theme actual de Puente Cromático. A continuación vamos a crear los archivos newsticker.php, newsticker.css, newsticker.js, vamos a agregar algunas funciones a functions.php y descargaremos el framework jQuery.

Configurando el Header

En el header necesitamos poner los enlaces a los archivos .js, .css y una función llamada jQuery.noConclict() que se encarga de evitar el conflicto con los otros scripts jQuery que usa WordPress.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/newsticker.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/newsticker.js"></script>
<script type="text/javascript" > jQuery.noConflict();</script>

newsticker.php

Hacemos una consulta a la base de datos y obtenemos los Post del blog en orden aleatorio (orderby=rand), los artículos pasan al bucle While mostrando los resultados a traves de las funciones de WordPress. Para mostrar los Thumbnail implemente un script creado por Metacortex, el cual toma las imágenes directamente de la BD sin necesidad de estar cargándolas con un campo personalizado.

<ul id="listticker">
<?php $my_query = new WP_Query('orderby=rand'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();?>
	<li>
    <?php mi_imagen($tamano = 'mini');?>
	<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="news-title"><?php the_title(); ?></a>
	<span class="news-text">Categor&iacute;a:<?php the_category(); ?></span>

	</li>
	<?php endwhile; ?>
</ul>

newsticker.css

Basicamente es el CSS que trae Newsticker, solo modifique el tamaño de las imagenes.

body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#listticker{
	height:200px;
	width:400px;
	overflow:hidden;
	border:solid 1px #DEDEDE;
	padding:6px 10px 14px 10px;;
}
#listticker li{
	border:0; margin:0; padding:0; list-style:none;
}

#listticker li{
	height:60px;
	padding:5px;
	list-style:none;
}
#listticker a{
	color:#000000;
	margin-bottom:
}
#listticker .news-title{
	display:block;
	font-weight:bold;
	margin-bottom:4px;
	font-size:11px;
}
#listticker .news-text{
	display:block;
	font-size:11px;
	color:#666666;
}
#listticker img{
	float:left;
	margin-right:14px;
	padding:4px;
	border:solid 1px #DEDEDE;
	width:50px;
	height:50px;
}

newsticker.js

Para que el script no genere conflictos en wordpress, hay que modificar el identificador “$” agregandole un nombre único, en este caso le puse $e. Esta variable se define en la primera linea con el valor de jQuery.noConflict();.

var $e = jQuery.noConflict();
$e(document).ready(function(){

	var first = 0;
	var speed = 700;
	var pause = 3500;

		function removeFirst(){
			first = $e('ul#listticker li:first').html();
			$e('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$e(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$e('ul#listticker').append(last)
			$e('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);

});

El archivo jQuery y la modificación de functions.php

Hay que agregar estas lineas de código al principio del archivo functions.php para poder llamar las imágenes automaticamente. Este script puede devolverlas en 3 tamaños, en este caso vamos a usar “mini” para tomar las miniaturas creadas por WordPress. No es necesario cambiar la configuración de las mismas desde el panel del blog, ya que en newsticker.css les puse dimensiones fijas.

<?php
// Función para extraer imagen de artículo. Autor: Darío Ferrer (alias: metacortex) 13/12/2008 - 4:45
// http://www.forosdelweb.com
// Licencia GNU/GPL. Puedes remover estos créditos si quieres.
      function mi_imagen($tamano = '') {
        if ( $images = get_children( array (
          'post_parent'    => get_the_ID(),
          'post_type'      => 'attachment',
          'numberposts'    => 1,
          'post_mime_type' => 'image'
         )));
        {
          if(!empty($images)) { //Solo añadí esta línea
              foreach( $images as $image ) {
                if($tamano == 'mini') {
                $imagen = wp_get_attachment_image( $image->ID, 'thumbnail' );
                } if($tamano == 'medio') {
                $imagen = wp_get_attachment_image( $image->ID, 'medium' );
                } if($tamano == 'grande') {
                $imagen = wp_get_attachment_image( $image->ID, 'full' );
                }
                echo $imagen;
              }
          } // y su respectivo cierre
        }
      }
?>

Por ultimo se necesita el archivo jQuery que se puede descargar desde este enlace. Al ser un archivo .txt, se debe remplazar la extensión a .js o copiamos el texto y creamos el archivo .js con cualquier editor web.

Colocamos jquery-1.3.2.js y newsticker.js dentro de la carpeta js del theme, si no existe hay que crearla. Los archivos newsticker.php y newsticker.css van en la raiz del theme donde se encuentra functions.php, index.php, sidebar…

Llamando a Newsticker desde el Theme

Para ver a Newsticker en cualquier parte del blog, hay que usar la función include con la ruta a newsticker.php.

<?php include (TEMPLATEPATH . '/newsticker.php'); ?>

Nota:
Los archivos aleatorios se dejan de visualizar una ves que se termina el While. Esto no es un problema para los blogs que tienen muchos post. Seria muy bueno si alguien puede colaborar con un poco de código, este script puede ser muy útil para todos los bloggers.