Como agregar post relacionados con thumbnails en wordpress sin usar plugin

on Miércoles, marzo 23, 2011 in Tutorial by David Chay with 22 comments

Tweet

En un tutorial pasado vimos como agregar post relacionados en tu theme. Ahora traigo pero usando imágenes o thumbnails.

Para poder mostrar los post relacionados debajo de cada entrada necesitaremos de algunas librerías y unas cuantas funciones.

Carpetas y archivos necesarios.

Creación de la carpeta scripts

Para empezar creamos la carpeta /scripts/ dentro de nuestro theme. /mi-theme/scripts/, es aqui en donde añadiremos las librerias necesarias.

jQuery

La primer libreria que necesitaremos es la libreria de jQuery. Existen varias formas de mandar a llamar esta libreria pero la mejor manera es mandar a llamar la que trae wordpress integrada lo unico que debemos de hacer es insertar el siguiente codigo.
<?php wp_enqueue_script("jquery"); ?>
En dentro del archivo header.php justo antes de <?php wp_head(); ?>

TimThumb

Otra librería que usaremos es la de timthumb.php esta libreria redimenciona las imagenes al tamaño que queramos, aunque wordpress ya tiene la opcion de hacer thumbnail o imagenes destacadas, esta libreria nos puede ser util si la imagen o thumbnail la pasamos por medio de campos personalizados o para redimencionar la primer imagen del post como lo veremos mas a delante.

para usar timthumb.php debemos descargarla y copiarla a la carpeta de /mi-theme/scripts/, la libreria de timthumb.php usa una carpeta llamada /cache/ la que debe estar junto al archivo.

NOTA: yo voy a renombrar la libreria timthumb.php a thumb.php para que sea mas facil de usar.

Para este paso debemos de tener dentro de la carpeta scripts los siguientes archivos.

/mi-theme/scripts/thumb.php (libreria thimthumb.php renombrada a thumb.php)
/mi-teme/scripts/cache/ (asegurate que la carpeta cache tenga todos los provilegios 777)

hovertip

La librería hovertip es la que mostrara el titulo de los post relacionados de forma flotante.
Para usar hovertip debemos descargarla de los repositorios de jquery jquery.hovertip-1.0_0.zip. De este archivo solo usaremos los archivos jquery.hovertip.min.js y jquery.hovertip.css.

EL archivo jquery.hovertip.min.js lo copiamos dentro de la carpeta /scripts/ mientras que el archivo jquery.hovertip.css lo copiamos dentro de la carpeta de nuestros css.

/mi-theme/scripts/jquery.hovertip.min.js
/mi-theme/css/jquery.hovertip.css

Hasta aquí debernos tener la siguiente estructura en nuestros archivos.

/mi-theme/thumb.php
/mi-teme/cache/
/mi-theme/scripts/jquery.hovertip.min.js
/mi-theme/css/jquery.hovertip.css

Función thumb_pots

Para poder obtener la primer imagen del post (por si alguna entrada no tiene imagen destacada o alguna imagen que se pase por campo personalizado) necesitaremos la función thumb_pots().

Dentro del archivo functions.php copiamos el siguiente código.

<?php
/*
    optener la primer imagen del post
*/
function thumb_pots(){
    global $wpdb, $post;
    $image = "";
    $first_image = $wpdb->get_results(
    "SELECT guid FROM $wpdb->posts WHERE post_parent = '$post->ID' "
    ."AND post_type = 'attachment' ORDER BY `post_date` ASC LIMIT 0,1"
    );

    if ($first_image) {
        $image = $first_image[0]->guid;
    }
    return $image;
}
?>

Creación del archivo post-relacionados.php

Este archivo es el que hará la lista de post relacionados basándose en las etiquetas, es similar al del articulo como agregar post relacionados en tu theme pero con algunas modificaciones.

Dentro de la carpeta de nuestro theme /mi-theme/ creamos un nuevo archivo con el nombre post-relacionados.php y pegamos el siguiente codigo:

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

	$args=array(
		'tag__in' => $tag_ids,
		'post__not_in' => array($post->ID),
		'showposts'=>5, // Number of related posts that will be shown.
		'caller_get_posts'=>1
	);
	$my_query = new wp_query($args);
	echo '<h4>Articulos Relacionados</h4><ul>';
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) {
			$my_query->the_post();
		?>
		<li>
			<a class="postRelatedThumb" href="<?php the_permalink() ?>" rel="bookmark nofollow">
				<?php
                                  /* Aquí empieza el código añadido*/
				$imageThumb=thumb_pots(); // Aquí manda a llamar la función que obtiene la primer imagen de la entrada
                                             /* Cambia el valor de custom-field por la del nombre de tu campo personalizado  */
				$imagevalue=get_post_meta($post->ID, "custom-field", $single = true);
				if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
                                      /* Aqui entra si el post tiene una imagen destacada                                       El thumbnail sera de 100 x 100 px y se le añade un array mas para cambiar el atributo de title */
					the_post_thumbnail(array( 100,100 ), array("title"=>""));
				}elseif($imagevalue){
                                 /* Aqui entra si el post no tiene imagen destacada, pero si tiene una imagen por ca,po personalizado   */
                                ?>
				<img class="wp-post-image" src="<? bloginfo('template_directory');?>/scripts/thumb.php?src=<? echo $imagevalue; ?>&w=100&h=100&zc=1" alt="<? the_title(); ?>" />
				<?php }elseif($imageThumb){
                                    /* Aqui entra si no tiene ninguna imagen por campo personalizado pero si contiene una imagen la entrada */
                                ?>
				<img class="wp-post-image" src="<? bloginfo('template_directory');?>/scripts/thumb.php?src=<? echo $imageThumb; ?>&w=100&h=100&zc=1" alt="<? the_title(); ?>" />
				<?php }else{
                                    /* Si la entrada no tiene ninguna imagen entonces pone una por default que se encuentra en /images/default.jpg */
                                ?>
				<img class="wp-post-image" src="<? bloginfo('template_directory');?>/images/default.jpg" width="100" height="100" alt="<? the_title(); ?>" />
				<?php } ?>
			</a>
			<div class="hovertipContent"><?php the_title();?></div>
		</li>
		<?php
		}
	}else {
		echo '<li>No hay contenidos relacionados</li>';
	}
	echo '</ul>';
}
 wp_reset_query();
?>

Insertando los post relacionados en la entrada.

Para que nos muestre los post relacionados de cada entrada debemos de mandar a llamar el archivo post-relacionados.php desde el archivo single.php.

Justo después de

 <?php the_content(); ?>

Insertamos el siguiente codigo:

<div class="post-relacionados">
<?php include (TEMPLATEPATH . '/post-relacionados.php'); ?>
</div>

Editando style.css

Para que las imágenes de los post relacionados los muestre de una manera un poco ordenada debemos usar estilos que nos ayuden a darle forma a la tira de imágenes.

.post-relacionados ul li a img.wp-post-image{
	float:left;
	margin:10px;
	padding:0;
	border:2px solid #d0d0d0;
}
.post-relacionados ul li a:hover img.wp-post-image{
	border:2px solid #333;
}

Con esto debe de ser suficiente para darle forma a la tira de imágenes. Ahora si quieres personalizar el hovertip el archivo a modificar es /css/jquery.hovertip.css

Por ultimo editamos las cabeceras y para activar hovertip

En el archivo header.php justo despues de wp_head(); añadimos el siguiente código.

<?php if(is_single()){?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/jquery.hovertip.css" type="text/css" media="screen" />
		<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.hovertip.min.js"></script>
		<script type="text/javascript">
				$(document).ready(function(){
					$('.postRelatedThumb').hovertip();
				});
		</script>
	<?php } ?>

El código esta dentro de una condición que solo permitirá que cargue las librerías de hovertip en el archivo single.php, osea cuando muestre la entrada completa.

Resultado final

El resultado final podría ser algo parecido a:

(únicamente en la tira de imágenes)

Conclusión

Espero que les aya servido de mucho este tutorial lo he tratado de hacer lo mas cencillo posible y si tienen alguna duda o observación no duden en hacérmelo saber.

Tags: codigo, Optimizacion, Premium, theme, wordpress, wordpress hacks, wordpress snippets