Entradas relacionadas con miniatura sin plugins

guru del código

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.

posts-relacionados-con-miniatura

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.
imagen destacada

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(10 votos, promedio: 5)

¿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.

14 comentarios en “Entradas relacionadas con miniatura sin plugins”

  1. ¿Como se podría hacer para que aparezca solamente una subcategoria en los relacionados? Es decir, esta en la categoría tecnología y el articulo habla sobre móviles, entonces que solamente aparezcan entradas relacionadas sobre «Móviles»

    Espero que me puedas ayudar…

    1. Xavier Ocampos

      Francisco, con este método la forma de controlar las entradas relacionadas es mediante tags. Lo que esto significa es que si tienes 2 entradas de la categoría «Móviles» y solo quieres que aparezcan entradas relacionadas a «Tecnología» lo que tienes que hacer es añadirle el tag «Tecnología» a las 2 entradas, sin importar a que categoría pertenezcan.

  2. Alessandro Degiusti

    Fernando, estuve experimentando un poco, y te recomiendo que en el CSS que usas en las Entradas relacionadas de AyudaWP, pongas en .miniaturarelacionada a:hover{

    transition:1s;
    -moz-transition:1s;
    -webkit-transition:1s;

    }

    Esto le dará un efecto más agradable. Saludos!

    1. Ricardo Rebolledo Cánovas

      Alessandro, si bien es una buena acotación, lo recomendado para este tipo de aporte, es entregar un código limpio y prolijo para que la persona que lo va a implementar lo adapte sin tanto alboroto en su wp. De todos modos yo que estoy integrando éste código en mi sitio web, utilizaré tu aporte. Saludos!

  3. yo tengo un blog de videos, como puedo hacer para que aparezcan miniaturas de los videos?? por que las entradas no tienen imágenes solo video.

  4. hola amigo antes que nada gracias por el aporte, sequi todos los pasos pero las imagenes me salen para abajo, como podria hacer para ponerlas horizontalmente

  5. Jesús Uzcátegui

    Hola bro una pregunta, ¿Yo lo probe en un tema que ando creando y pues no me funciono ando usando la versión 4 de wp y pues no sé que haría mal, segui todos los pasos, en otro sitio encontre un código distinto que me daño por completo el function.php? 🙁 porfa me puedes ayudar, aquí te dejo mi email [email protected]

  6. Buenos dias!! tengo el mismo tema que tu para mi blog y como sabras no tiene opción para entradas relacionadas me gustaría conseguir el mismo efecto que tienes tu, con separación y que el titulo se expanda abajo de la foto como seria el codigo css?

  7. Mazier Bahari

    Este post es de hace mas de 2 años, pero el codigo es excelente, lo estoy utilizando en uno de mis proyectos recientes pero solo me quedo una inquietud.

    Es posible modificar este codigo para sea «responsive» (notese mi novatada)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido