En el siguiente tutorial aprenderemos como añadir thumbnails a las entradas relacionadas gracias al popular plugin para WordPress YARPP y el empleo de campos personalizados.
El hecho de incluir los thumbnails a nuestras entradas relacionadas puede mejorar el ranking de páginas vistas por visitante.
Antes de nada, debemos bajar el plugin “Yet Another Related Post Plugin”, más comúnmente conocido por YARPP de forma corta y diseñado por Michael Yoshitaka Erlewine o Mitcho tal y como se le conoce por la Red. He dejado el enlace de la descarga al final de esta entrada y su versión actual es la 3.1.3.
Gracias a este plugin podemos crear nuestra propia plantilla con la que podemos visualizar las entradas relacionadas.
Su instalación es simple, como la mayoría de los plugins en WordPress y supongo que no será necesario explicar los pasos para su instalación.
Creando una plantilla personalizada
Te habrás dado cuenta que cuando instalamos este plugin, incluye una carpeta para las plantillas.
Dentro de dicha carpeta se encuentran todas las plantillas que visualizan de un formato u otro nuestras entradas relacionadas.
Lo siguiente que debemos hacer es crear un fichero que llamaremos yarpptemplatethumnails.php y dentro debemos copiar el siguiente código:
<?php /* Entradas Relacionadas con thumbnails */ ?>
<h4 class="meta">Entradas Relacionadas</h4>
<?php if ($related_query->have_posts()):?>
<ol class="related-posts"> <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
<?php //Colocamos la imagen thumbnail no olvides colocar la imagen por defecto $related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true);
$default_thumbnail = 'IMAGEN POR DEFECTO.jpg';
?>
<li> <a href="<?php the_permalink() ?>" rel="bookmark"> <?php if ($related_thumbnail != "") : ?>
<img src="<?php echo $related_thumbnail; ?>" alt="<?php the_title(); ?>" />
<?php else : ?> <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>
<?php the_title(); ?></a> </li>
<?php endwhile; ?> </ol>
<?php else: ?>
<p>No existen entradas relacionadas</p>
<?php endif; ?>
Lo que conseguimos con el código es comprobar que existan entradas relacionadas y si las hay, entonces visualizamos la imagen thumbnail que tenemos almacenada en el campo thumbnail_url, el cual ha sido previamente guardado dentro de la variable $related_thumbnail, sino tenemos se visualiza el el thumbnail por defecto. ¡Ojo!, no olvides introducir la imagen por defecto dentro del código.
Estilizando la visualización de los thumbnails
No basta con incluir el template, sino que además debemos estilizar dicha plantilla para que el thumbnail se visualice en la parte superior y el título debajo de cada imagen. Para ello, debemos utilizar el siguiente código que podemos incluir el siguiente código CSS dentro del fichero de estilos de nuestro tema style.css
/* Entradas Relacionadas con thumbnail */
ol.related-posts {clear:both; text-align:center; margin:20px 0px 0px 0px; padding:0;}
ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px;; padding:0; font-size:10px;}
ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; margin-top:50px;; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
El único inconveniente que tiene este método es la creación de los thumbnails que queremos que se visualicen para cada entrada y por tanto debemos crear el correspondiente campo personalizado desde el editor de entradas, donde en la parte inferior de cualquier entrada podemos agregar el campo personalizado thumbnail_url para que este pueda verse en las entradas relacionadas, de lo contrario tomaría el thumbnail que hayamos designado por defecto.
