Mostrar entradas en miniatura en WordPress

El objetivo del código que vamos a ver hoy, es conseguir que al pie de cada entrada individual de nuestro blog WordPress se vea una selección de entradas de otros post con una imagen en miniatura. Vamos a editar nuestra plantilla del tema single.php para conseguir esto:

En mi caso las entradas miniatura están situadas debajo de cada entrada al final de los comentarios en las páginas de entradas individuales, es decir en single.php pero el código que te voy a mostrar puedes colocarlo en cualquier plantilla de tu tema, por ejemplo en el index.php o portada… Para ello sólo debes abrir en lugar de la página single.php que indico yo, la plantilla que tu deseas.

Cómo mostrar 4 entradas en miniatura en tu WordPress

Paso 1 – buscar y abrir la template donde queremos realizar los cambios

Vamos a localizar la plantilla de tu theme para entradas individuales en wp_content/themes/tutema/single.php y nos vamos a situar en el código, en el lugar donde queramos que aparezca el carrusel de entradas en miniatura, como puedes ver en mi caso ha sido debajo de los comentarios.

	<?php
				// If comments are open or we have at least one comment, load up the comment template
				if ( comments_open() || '0' != get_comments_number() ) :
					comments_template();
				endif;
			?>

		<?php endwhile; // end of the loop. ?>
		<!--AQUÍ VA NUESTRO CÓDIGO PARA EL SCROLL DE ENTRADAS EN MINIATURA -->
		
		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Paso 2 – copiar el código en el lugar de la template que deseemos

Vamos a crear una nueva wp_query, lo tienes explicado en este artículo del blog, antes de copiar el código si no entiendes lo que quiero decir con nueva wp_query repasa el artículo «Cómo crear bucles personalizados con wp_query», y mediante un bucle recorrer el nuevo array y mostrar miniaturas en imágenes y título.

Parte 1 del código: nueva wp_query

<?php
        remove_all_filters('posts_orderby');
	$args = array( 'post_type' => 'post', 'orderby' => 'rand', 'showposts' => 4);

	$wp_query = new WP_Query($args);?>

Con este código creamos un nuevo array de post_type: post que muestra 4 post en orden aleatorio.

Parte 2 del código: bucle

<?php if($wp_query->have_posts()) :
        while($wp_query->have_posts()) :
	$wp_query->the_post();
					
?>

Parte 3 del código mostrar datos

<a href="<?php the_permalink( ); ?>">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('medium');
}
?>
<?php the_title(); ?>
</a>

Parte 4 del código: cerrar bucle y resetear query

<?php   endwhile; ?>
<?php endif; ?>
<?php
wp_reset_postdata();
?>

Código completo para copiar en tu plantilla

<?php
        remove_all_filters('posts_orderby');
	$args = array( 'post_type' => 'post', 'orderby' => 'rand', 'showposts' => 4);

	$wp_query = new WP_Query($args);?>
        <div class='caja_miniaturas'>
             <?php if($wp_query->have_posts()) :
              while($wp_query->have_posts()) :
	      $wp_query->the_post();
					
             ?>
             <div class='post_miniatura'>
                  <a href="<?php the_permalink( ); ?>">
                  <span class="la_imagen">
                  <?php if ( has_post_thumbnail() ) {
                  the_post_thumbnail('medium');
                  }
                  ?>
                  </span><?php the_title(); ?>
                  </a>
             </div>
        <?php   endwhile; ?>
       <?php endif; ?>
        </div>
<?php
wp_reset_postdata();
?>

Guarda los cambios en tu plantilla y guarda la plantilla.

Paso 3 – añadir estilos a nuestro archivo .css

El código css depende mucho del diseño de tu web, voy a orientarte un poco con los estilos aunque deberás ajustar los estilos que yo defina aquí a tu blog.

.caja_miniaturas{ 
width:100% !important;}
.post_miniatura{
width:24%; 
float:left; 
margin-right:0 !important;
text-align:center;}