Cómo usar miniaturas con enlaces a la publicación anterior y siguiente en WordPress

Uno de nuestros usuarios nos preguntó sobre el nuestro pagina de Facebook: Cómo usar miniaturas para la navegación de publicaciones anterior / siguiente en WordPress. Las funciones next_post_link y previous_post_link no tienen un parámetro de vista previa lo suficientemente simple como para que un nuevo desarrollador pueda simplemente activar y desactivar. En este artículo, le mostraremos cómo usar miniaturas de publicaciones con enlaces de publicaciones anteriores y siguientes en WordPress.

El resultado final se vería así:

Lo primero que debe hacer es abrir el archivo single.php de su tema y agregar el siguiente código dentro del bucle probablemente después de content_area ():

<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
</div>

<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next" style="float:right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>
<?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div><!--#cooler-nav div -->

Lo siguiente que debe hacer es abrir su archivo style.css y agregar los siguientes estilos:

#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
#cooler-nav img{float: left; margin: 0 10px 0 0;}
#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}
#cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}
#cooler-nav .next{float: right; width: 250px;}

Siéntase libre de cambiar el estilo para que coincida con su tema. A menudo, a nuestros usuarios les gusta modificar el estilo del código, por lo que es más fácil cambiarlo. Este es solo un estilo básico que debería poder personalizar fácilmente.

Si desea cambiar el tamaño de la miniatura, simplemente cambie la matriz (100,100) como desee.

Fuente: itsbarry