Introducción

Siguiendo con los artículos relacionados con WordPress, referentes a la mejora y optimización de este sitio, hoy le toca a los artículos relacionados, pero con la ventaja significativa de añadir una imagen del artículo con ellos, lo que desde mi punto de vista, le da un toque mas atractivo a la página, y atrae mas al lector.

Así, si recientemente, en alguna ocasión, has llegado al final de uno de mis artículos habrás visto que aparecen tres pequeñas miniaturas correspondientes a los artículos relacionados con el documento en cuestión:

Artículos relacionados en WordPress

Para esta operación tenemos que modificar o mejor crear una copia en el tema hijo, tal y como comenté en el artículo anterior de esta serie, «El anterior y el siguiente con la primera imagen en WordPress«.

Una vez, tenemos la copia de «single.php», el siguiente paso es modificarlo añadiendo el siguiente código antes del relacionado con el anterior y el siguiente:

<div class="relatedposts">
     <h3>Artículos relacionados</h3>
             <br/>
             <?php
                 $tags = wp_get_post_tags($post->ID);
                 $categories = get_the_category($post->ID);
                 if ($tags &amp;amp;amp;&amp;amp;amp; $categories) {
        $tag_ids = array();
                        foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] =                         $individual_category->term_id;
                        $args=array(
                                'tag__in' => $tag_ids,
                                'category__in' => $category_ids,
                                'post__not_in' => array($post->ID),
                                'posts_per_page'=>3\. // Number of related posts to display.
                                'orderby'=> rand,
                                'caller_get_posts'=>1
                        );
                        $my_query = new wp_query( $args );
                        while( $my_query->have_posts() ) {
                                $my_query->the_post();
                                ?>    
                                <div class="relatedthumb">
                                        <a rel="external" href="<? the_permalink()?>">
                                                <div class="marco">
                                                        <?php my_first_image(150,100); ?>
                    </div>
                                                <?php the_title(); ?>                        
                                        </a>
                                </div>        
                            <?php }
                    }
                    $post = $orig_post;
                    wp_reset_query();
                    ?>
</div>                               `

En este código lo que hacemos en la primera parte es buscar todos los artículos que tengan las mismas etiquetas y categorías utilizando para ello la función *wp_query*. Entre los parámetros que indicamos está el número de artículos que nos tiene que mostrar, que como ves en la función es *3*, aunque recientemente lo he cambiado a *4*, reduciendo algo las imágenes para que entren dentro del artículo.

Si la función nos da resultados, el siguiente paso en añadir una imagen a cada uno de los artículos encontrados. Para ello, utilizaremos exactamente la misma función que vimos en el artículo «[El anterior y el siguiente con la primera imagen en WordPress](https://atareao.es/web/el-anterior-y-el-siguiente-con-la-primera-imagen-en-wordpress/)»

Dando forma a los resultados

El último paso es conseguir que los resultados tengan un aspecto aceptable. Tengo que indicar, que no estoy totalmente convencido con el formato que tiene los resultados, tal y como se muestra ahora. Pero esto ya es cuestión de ir modificando la salida, hasta conseguir lo que necesito. La hoja de estilo actual tiene el siguiente aspecto:

/* -------------------- Related Posts --------------------------------*/
.marco{
    width: 150px;
    height: 100px;
    text-align:center;
    border-color:black;
    border-style:solid;
    border-width:1px;
}
.marco img{
    max-width: 150px;
    max-height: 100px;
    height: 100px;
    width: auto;
}
.relatedposts {width: 640px; margin: 0 0 20px 0\. float: left; font-size: 12px;}  
.relatedposts h3 {margin: 0 0 5px 0\. }  
.relatedthumb {margin: 0 1px 0 1px; float: left; }  
.relatedthumb img {margin: 0 0 3px 0\. padding: 0;}  
.relatedthumb a {color :#333\. text-decoration: none; display:block; padding: 4px; width: 150px;}  
.relatedthumb a:hover {background-color: #ddd; color: #000;}

De todo esto, lo único a tener en cuenta es que si queremos añadir mas artículos, es necesario disminuir el ancho de las imágenes para que entren dentro del tamaño del artículo, puesto que de lo contrario no quedará aseado.

Conclusiones

Una vez me voy metiendo un poco mas en el asunto de WordPress, cada vez me parece mas sencillo, y veo todas las posibilidades a hacer. De hecho, en las últimas semanas, he realizado numerosos cambios en el aspecto del tema, que han dado lugar a una reducción drástica en el tiempo de carga de la página, pasando a reducirse de tiempos de carga de mas de diez segundos a seis segundos escasos, lo que representa un cambio significativo, sin lugar a dudas. Y eso que se mejora sensiblemente el aspecto de la página con asuntos como las imágenes de los artículos, los artículos relacionadas, o el siguiente y el posterior.

En próximos artículos relacionados con WordPress, explicaré como utilizar nuestra propia paginación, crear un formulario de contacto y como hacer el efecto ligthbox en las imágenes (entre otros artículos).