Uno de nuestros usuarios nos preguntó sobre nuestro pagina de Facebook: Cómo usar miniaturas para la navegación de publicaciones anteriores/siguientes 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 activarlo y desactivarlo. En este artículo, le mostraremos cómo usar miniaturas de publicaciones con enlaces a publicaciones anteriores y siguientes en WordPress.
El resultado final se vería así:
Lo primero que debes hacer es abrir tus temas. soltero.php y agregue el siguiente código dentro del bucle, muy 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 debes hacer es abrir el tuyo. estilo.css archivo y agregue 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 diseñar su código, por lo que es más fácil para ellos modificarlo. 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) a lo que desee.
Fuente: es barry
Cómo usar miniaturas con enlaces a publicaciones anteriores y siguientes en WordPress
Uno de nuestros usuarios nos preguntó sobre nuestro pagina de Facebook: Cómo usar miniaturas para la navegación de publicaciones anteriores/siguientes 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 activarlo y desactivarlo. En este artículo, le mostraremos cómo usar miniaturas de publicaciones con enlaces a publicaciones anteriores y siguientes en WordPress.
El resultado final se vería así:
Lo primero que debes hacer es abrir tus temas. soltero.php y agregue el siguiente código dentro del bucle, muy 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 debes hacer es abrir el tuyo. estilo.css archivo y agregue 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 diseñar su código, por lo que es más fácil para ellos modificarlo. 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) a lo que desee.
Fuente: es barry
