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

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.