WordPress: aggiungere le thumbnail alla paginazione dei post

WordPress: aggiungere le thumbnail alla paginazione dei post

La paginazione dei post con i link al post successivo e precedente può essere arricchita dall'uso delle thumbnail sui post della paginazione. In questo articolo vedremo come ottenere questo risultato utilizzando le funzioni di WordPress get_previous_post() e get_next_post().

Queste due funzioni restituiscono gli oggetti corrispondenti al post precedente e successivo rispetto al post corrente. Possiamo quindi utilizzare queste funzioni nel nostro tema nel modo mostrato di seguito.


<div id="post-nav">
	<?php $prevPost = get_previous_post(true); // restituisce un oggetto
		if($prevPost) {
			$args = array(
				'posts_per_page' => 1,
				'include' => $prevPost->ID // ID del post precedente
			);
			$prevPost = get_posts($args); // restituisce il post precedente
			foreach ($prevPost as $post) {
				setup_postdata($post);
				
				// Loop normale
	?>
		<div class="post-previous">
			<a class="previous" href="<?php the_permalink(); ?>">« Articolo precedente</a>
			<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
			<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
			<small><?php the_date('F j, Y'); ?></small>
		</div>
	<?php
				wp_reset_postdata();
			} 
		} 
		
		$nextPost = get_next_post(true); // restituisce un oggetto
		if($nextPost) {
			$args = array(
				'posts_per_page' => 1,
				'include' => $nextPost->ID // ID del post successivo
			);
			$nextPost = get_posts($args);  // restituisce il post successivo
			foreach ($nextPost as $post) {
				setup_postdata($post);
				
				// Loop normale
	?>
		<div class="post-next">
			<a class="next" href="<?php the_permalink(); ?>">Articolo succeessivo »</a>
			<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
			<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
			<small><?php the_date('F j, Y'); ?></strong>
		</div>
	<?php
				wp_reset_postdata();
			} 
		} 
	?>
</div>
Torna su