Entradas relacionadas con imágenes sin plugins para WordPress

Las ventajas de incluir entradas relacionadas con thumbnail de forma manual en un blog de WordPress es la infinidad de personalizaciones que le podemos hacer, es decir puedes personalizarlo a tu gusto jugando un poco con la hoja de estilo de tu theme, además de ayudar un poco a nuestro blog tratando de instalar los menos de plugins posible.

El modelo de entradas relacionadas con imágenes es el que utilizamos en este blog. Si quieres agregar las entradas relacionadas con miniaturas de un artículo a tu blog de WordPress, pero no quieres utilizar los distintos plugins que hay en el repositorio de plugins de WordPress, aquí te mostramos el código y los pasos a para poder hacerlo.

Como mostrar entradas relacionadas con miniaturas

Lo primero, tendrás que copiar el siguiente código de abajo, al archivo “Functions.php” de tu plantilla de wordpress.

<?php
function relacionadas() {
global $post, $wpdb;
$backup = $post; // backup the current object
$tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
$tagcount = count($tags);
for ($i = 0; $i < $tagcount; $i++) {
$tagIDs[$i] = $tags[$i]->term_id;
}
$showposts = get_theme_mod('related_postnum');
$showposts = !empty($showposts) ? $showposts : 4;
$args=array(
'tag__in' => $tagIDs,
'post__not_in' => array($post->ID),
'showposts'=>$showposts,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) { $related_post_found = true; ?>
<h3><span>Entradas Relacionadas</span></h3>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="relacionadas">
<div class="post">
<ul>
<li>
<div class="thumb"><?php the_post_thumbnail('thumbnail'); ?></div>
<span class="titulo"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo titulo_corto('...', 100); ?></a></li></span>
<div class="meta"><?php the_time('l j M Y') ?></div>
</ul></div></div>
<?php endwhile; ?>
<?php }
}
//show recent posts if no related found
if(!$related_post_found){ ?>
<h3><span>Entradas Relacionadas</h3>
<?php
$posts = get_posts('numberposts=4');
foreach($posts as $post) { ?>
<div class="relacionadas">
<div class="post">
<ul>
<li>
<div class="thumb"><?php the_post_thumbnail('thumbnail'); ?></div>
<span class="titulo"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li></span>
<div class="meta"><?php the_time('l j M Y') ?></div>
</ul></div></div>
<?php } ?>
<?php
}
wp_reset_query();
}
?>
<?php
//Acortando títulos por caracteres
function titulo_corto($after = null, $length) {
$mytitle = get_the_title();
$size = strlen($mytitle);
if($size>$length) {
$mytitle = substr($mytitle, 0, $length);
$mytitle = explode(' ',$mytitle);
array_pop($mytitle);
$mytitle = implode(" ",$mytitle).$after;
}
return $mytitle;
}
?>

Segundo, toca echar mano a tu hoja de estilo de tu Theme de WordPress, para que el diseño de las entradas relacionadas se adapte al color de tu plantilla, así como al ancho, en otras palabras puedes personalizarlo a tu gusto.

/*Entradas Relacionadas*/
.relacionadas { margin: 20px 0; }
.relacionadas h3.titulo { margin: 0 0 15px 0; padding: 0px; }
.relacionadas .post { overflow: hidden; background: #D3EDF7; float: left; width: 289px; margin: 0 5px 5px 0; padding: 5px !important; color: #333 !important; }
.relacionadas .post:hover {background: #F3F6F9;}
.relacionadas .post .thumb { float: left; margin: 0 10px 0 0; }
.relacionadas .post .thumb img { border: none !important; width: 100px; height: 100px; }
.relacionadas .post .titulo { font-size: 1.4em !important; line-height: 1em !important; letter-spacing: 0px; margin: 4px 4px 8px 0; }
.relacionadas .post .meta { font-size: .8em; color: #666; margin: 10px 4px 0 0; }

El código CSS que se muestra a continuación es para mostrar las entradas relacionas con imágenes en dos columnas y dos filas (el mismo diseño de este blog), pero si quieres mostrarlo en una sola columna (fila), solo tendrá que cambiar en “width: 289px;” por “width: 100%;”.

Hemos publicado este artículo para mostrar las entradas relacionadas con miniaturas de una entrada de WordPress, debido a que muchos lectores de este blog nos preguntaban, si utilizamos un plugin o lo hacíamos de forma manual. El código es similar al que hay en muchos blogs de wordpress que hablan sobre las entradas relacionadas, pero le hemos modificado para que en vez de mostrar el clásico mensaje «No hay entradas relacionadas» muestre los últimos artículos publicados.

Para llamar a la función que acabas de copiar en «Functions.php», deberás copiar el siguiente código donde quieras que se muestre las entradas relacionadas, es decir en el archivo «Single.php», (esto dependerá mucho de la plantilla de WordPress que estés utilizando, pero en la mayoría de los casos, es en el archivo que acabamos de menciona).

<?php echo relacionadas(); ?>

También te puede interesar | Artículos y post relacionados sin plugins