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.

Entradas relacionadas con imágenes sin plugins para WordPress

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%;”.

Entradas relacionadas con miniaturas sin plugins WordPress

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


Compartir esta publicacion

4 Responses to "Entradas relacionadas con imágenes sin plugins para WordPress"

  1. Muchas gracias por publicar esto , pero tengo un problema cargo el
    scrip en “Functions.php” y los estilos en el .css pero luego
    imagino que debo poner algo para hacer el llamado en single,php
    para que se cargue el script , que debo poner ?

    Reply
  2. Hola, muy buen tutorial, es justo lo que buscaba. Solo que tengo un
    problema, y es que al pegar el código en functions, cuando guardo
    los cambios se me queda la pantalla en blanco, y haga lo que haga
    cada vez que guardo los cambios de algo sale la pantalla en blanco
    y es muy molesto. Sabes a que puede ser debido ese error? Un
    saludo.

    Reply

Escribe un comentario a esta publicación