Mostrar posts aleatorios con imágenes

Una excelente forma de promocionar viejos posts dentro de los puntos más visibles de nuestro blog, es haciendo un listado o display mostrándolos aleatoriariamente.

Mostrarlos en un simple listado no bastará, para hacerlo más llamativo podemos optar por incluir en ese listado la imagen que representa dicho post, así que en este tutorial les explicaré paso a paso como hacerlo.

Información: Este tutorial es para mostrar un listado aleatorio con imágenes de una proporción de 60 de ancho x 40 alto para lo cual las miniaturas autogeneradas por WordPress son de 150 ancho x 100 alto. *Información de fines estéticos.

Antes de empezar debemos de tener lo siguiente:

  1. Una imagen gif / jpg / png de 60×40 que represente que el post no tiene una imagen que lo acompañe.
  2. Dentro del theme tener el archivo functions.php, de no tenerlo crear uno.
  3. Ganas y paciencia para completar el tutorial.

Paso Número 1

Abrimos el archivo functions.php de nuestro theme e ingresamos el código que se muestra dentro de este archivo

ARCHIVO NO DISPONIBLE, lamentamos las molestias

Este código nos permitirá obtener desde nuestro theme la primera imagen en miniatura de cada post que solicitemos.

Paso Número 2

Escribamos el siguiente código en el lugar que deseamos donde aparesca el listado. *** Como una observación este tutorial estará destinado a mostrar el listado en un sidebar.php ó en un single.php por el diseño final del mismo.

<div class="contenedor">
<div class="random">
<ul>
 <?php
 $random_posts = new WP_Query();
 $random_posts->Query ('orderby=rand&showposts=4');
 while ($random_posts->have_posts()): $random_posts->the_post()
 ?>
 <li>
 <?php
 $files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");
 if($files){
 $keys = array_keys($files);
 $num=$keys[0];
 $thumb=wp_get_attachment_thumb_url($num);
 print "<img src='$thumb' alt='".get_the_title()."' style='padding: 8px 12px 4px 7px; float: left;' width='60' height='40'/>";
 }else{
 print "<img src='http://tudominio.com/tuimagen' style='padding: 8px 12px 4px 7px; float: left;' alt='".get_the_title()."' width='60' height='40'/>";
 }
 ?>
 <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>">
 <?php the_title(); ?><br>
 <span>escrito por <?php the_author();?></span>
 </a>
 </li>
 <?php endwhile; ?>
</ul>
 </div>
 </div>

Este código seleccionará aleatoriamente 4 posts (ver showposts=4) y los mostrará en una lista con sus respectivas imágenes, nombre del post y nombre del autor.

Paso Número 3

Finalmente agregamos a nuestra hoja de estilos  el siguiente código para dar vida a nuestro nuevo listado.

.contenedor {background-color:#ddd;width:320px; padding:5px;border: 1px solid #333; -webkit-border-radius:5px; -moz-border-radius:5px;}
.random ul, .random  li {margin: 0; padding: 0; border: 0; outline: 0; list-style-type:none;}
.random ul {background-color:#fff;font-family:verdana;font-size:12px;}
.random ul li {text-decoration:none;border-bottom:1px solid #ddd; min-height: 60px;}
.random ul li a {text-decoration:none;padding:7px 13px; display:block; color:#333; font-weight:bold;}
.random ul li a:hover {color:#cc0000;}
.random ul li a span {text-decoration:none;padding-left:6px; font-size:11px; font-weight:normal; line-height: 20px;}
.random ul li a:hover span {color:#666;}

Y listo si hicieron todos estos pasos al pie de la letra podrás obtener un diseño similar al de la siguiente imagen.

Random de ejemplo

Comentarios
  1. Muchas gracias por el tutorial esta muy bueno, péro queria preguntar si es poible que el estilo en vez de ser vertical quede horizontal.

    Escrito el03/03/2010
  2. Malavera

    Hay alguna forma de que este se actualice automaticamente, que cambie cada 5 segundos. gracias

    Escrito el13/03/2010
  3. Archivo no encontrado en el Paso 1.
    Qué lástima… estuve a punto de implementarlo en uno de mis blogs :(

    Escrito el03/09/2010
  4. No encontrado

    Escrito el06/09/2010
  5. Para blogger?

    Escrito el04/01/2011
  6. Leonidas

    HOLA!
    Estoy probando tu tutorial y pero no puedo ver ni descargar el archivo que contiene la info que hay que agregar al funcion.php
    Veo que dice “[download id=”18″]”

    Gracias por su trabajo.
    Leonidas.

    Escrito el24/07/2011
  7. muchas gracias, me salvaste las papas ;)

    Escrito el25/07/2012

DEJA TU COMENTARIO