SummArg | Cursos y recursos para webmasters

24/08/2009

Miniaturas de los Articulos Relacionados

yarpp-thumbails-result

¿Cómo se puede hacer? Con el plugin YARPP y un poco de trabajo sobre tus plantillas.

Primero descargamos y activamos el Yet Another Related Post Plugin y luego vamos a seguir los pasos que nos indican en BuildInternet, los que mostraremos a continuación:

Crear un template para los Posts Relacionados

Creá un archivo llamado “yarpp-template-thumbnails.php” (podés trabajar archivos php con el notepad ++) y lo subis al raiz de tu theme.

<?php /*
Post Thumbnail Template
Author: Zach Dunn (www.buildinternet.com)
*/
?>

<h4>Entradas Relacionadas</h4>

<?php if ($related_query->have_posts()):?>

<ol>
<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>

<?php
//Set Default Thumbnail Image URL's
$related_thumbnail = get_post_meta($post->ID, "thumbnail_url", $single = true);
$default_thumbnail = 'default-image.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 se encontraron entradas relacionadas</p>

<?php endif; ?>

En ese archivo indicamos que, si existen entradas relacionadas, muestre la imagen en miniatura almacenada en el campo personalizado thumbnail_url. Este valor se guarda en $related_thumbnail y si no existe una URL ahi entonces muestra el contenido de $default_thumbnail.

Colocar en el template single.php

single.php es la plantilla que nos muestra un post completo, ahi insertaremos el código para que al final llame a la plantilla yarpp-template-thumbnails.php.

Pegaremos este código al final del contenido de nuestro post, luego de the_content y antes de <?php comments_template(); ?>

<?php if (function_exists('related_posts')){ ?>
<?php related_posts();?>
<?php }?>

Basicamente con esa porción de código le indicamos que si el plugin YARPP está activo, entonces lo ejecute ahi.

El estilo CSS

Con estas líneas, mostrarás arriba la miniatura y abajo del título del post. Pegá esto al final del CSS de tu Theme.

/* Related Posts */
ol.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;}
ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px;; padding:0;}
ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
ol.related-posts li{font-size:12px;}

Setear las opciones del plugin

Para que esto funcione correctamente, debemos ir al panel de administrador de WordPress y a la sección de opciones del plugin que estamos usando. Busquemos “Display Options”, seleccionemos “Display using a custom template file” y debajo indiquemosle que vamos a usar el archivo “yarpp-template-thumbnails.php”. Guardá los cambios.

Ultimo paso: Los campos personalizados

Con todo en su sitio ahora solo nos falta llenar el campo personalizado de cada post o entrada. Cada vez que escribas un artículo deberás indicar en los cuadros que están debajo del editor, la URL de la miniatura que luego utilizará para mostrar esa entrada en “Entradas Relacionadas”. Pondrás el nombre del campo personalizado thumbnail_url y al lado la URL a la imagen.

custom

Dejar un comentario