Entradas relacionadas con miniatura sin plugins

Las entradas relacionadas son un modo estupendo de atraer a tus lectores hacia otras publicaciones de temática similar, aumentando la fidelidad y permanencia en tu web de los visitantes, así que es un elemento fundamental y casi obligatorio en cualquier sitio.

Si le sumamos una atractiva miniatura de imagen que le de mayor visibilidad a las entradas relacionadas mejor que mejor ¿no?

Pues bien, cómo ya hemos visto en otras ocasiones cómo mostrar entradas relacionadas con código, o uno de los mejores plugins para mostrar entradas relacionadas con miniatura, hoy rizamos el rizo y unimos ambas posibilidades.

Para mostrar entradas relacionadas con miniatura sin plugins hay 3 pasos fundamentales, a saber … 

1. Añadir soporte de miniaturas al tema

Esto ya lo hemos visto varias veces pero lo repasamos por si no lo has añadido ya. Para ello añade al fichero functions.php de tu tema la siguiente línea, con la que le añadimos soporte de miniaturas de entrada:

add_theme_support( 'post-thumbnails' );

Y además, siempre es conveniente definir los tamaños de miniatura adaptados lo mejor posible al diseño:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );

A partir de ahí solo tienes que acordarte de que en cada entrada definas una «Imagen destacada» desde la «meta box» del editor así denominada.

2. Añadir el código al loop

En el loop del archivo single.php debemos añadir el código que mostrará las entradas relacionadas. El sitio ideal sería antes de la llamada a los comentarios, que identificarás por el siguiente código:

<?php comments_template(); ?>

El código sería algo así:

<div class="relacionadas">
<h3>Entradas relacionadas</h3>
<?php
        $orig_post = $post;
        global $post;
        $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),
        'posts_per_page'=>4, // Número de entradas relacionadas a mostrar.
        'caller_get_posts'=>1
        );
        
        $my_query = new wp_query( $args );
        while( $my_query->have_posts() ) {
        $my_query->the_post();
        ?>
        
        <div class="miniaturarelacionada">
                <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
                <?php the_title(); ?>
                </a>
        </div>
        
        <? }
        }
        $post = $orig_post;
        wp_reset_query();
        ?>
</div>

Básicamente, lo que hace el código anterior es identificar las tags en que está etiquetada la entrada actual para, a continuación, mostrar otras entradas etiquetadas con las mismas tags, excluyendo la entrada actual, que identifica por su ID único. en la línea 14 definimos el número de entradas a mostrar (en el ejemplo 4), que puedes cambiar a tu gusto.

3. Añadir estilos mediante CSS

Ahora bien, lo anterior no quedaría bonito ni atrayente si no creamos unas clases CSS adecuadas, que atraigan atención y coloquen las entradas relacionadas de manera ordenada.

Por tanto, y usando las mismas denominaciones de clases CSS de ejemplo usadas en el código previo, habría que crearlas en la hoja de estilos de tu tema activo, habitualmente el archivo style.css.

Lógicamente, es solo un ejemplo, y debes adaptarlo a los estilos generales de tu tema o tus gustos personales …

.relacionadas {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relacionadas h3 {font-size: 20px; margin: 0 0 5px 0; }
.miniaturarelacionada {margin: 0 1px 0 1px; float: left; }
.miniaturarelacionada img {margin: 0 0 3px 0; padding: 0;}
.miniaturarelacionada a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.miniaturarelacionada a:hover {background-color: #ddd; color: #000;}

Lo que hace este CSS de ejemplo es mostrar las miniaturas con un ancho de 150 pixels, lo que significa que para un ancho del bloque principal de 640 pixels mostraría 4 entradas, márgenes incluidos. Por descontado que debes ajustar esto a tus necesidades, reduciendo el valor .miniaturarelacionada a 125 pixels si quieres 5 miniaturas, por poner un ejemplo. No digamos si el ancho del bloque de la entrada de tu tema WordPress es menor de 640 pixels.

También, y para terminar, es importante que definas el ancho de las miniaturas en los ajustes multimedia de WordPress al mismo tamaño especificado en el CSS que, además, debe coincidir con el tamaño definido en el código php en the_post_thumbnail(array(150,100).

Por lo demás funciona de maravilla, siempre y cuando etiquetes tus entradas claro, sino verás un feo espacio en blanco.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)