In questo tutorial vediamo come impostare la paginazione di un archivio di post ottenuto con una query personalizzata (WP_query).
L’html generato terrà conto del markup e delle classi di bootstrap 3.
Per l’esempio creaiamo un layout a griglia diviso in 4, 3 oppure 2 colonne asseconda delle dimensioni dello schermo.

paginazione-worpdress-bootstrap

La query

$paged = ( get_query_var( 'page') ) ? get_query_var('page') : 1;
$posttype = 'annuncio';
$postperpage = 8;

$args = array( 'post_type' => $posttype,
			      'posts_per_page' => $postperpage,
				'paged' => $paged								

 );

$post_annunci = new WP_Query( $args ); 

$paged

Il numero di pagina corrente. Viene impostato attraverso l’utilizzo di un parametro nell’url della pagina (query string). Possiamo inserire il numero di pagina in due modi:
?page=2
oppure se usiamo i permalink
/page/2

Il parametro da usare è page perchè nell’esempio abbiamo usato un home page basata su un template statico. In altri contesti la query var è = a paged

Se La variabile $page è vuota possiamo provare a scrivere
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
oppure a ricavare il numero di pagina direttamente dalla query principale
$paged = $wp_query->query[paged]

$posttype

In questo caso usiamo un custom post type (annuncio).

$postperpage

Qui decidiamo quanti post mostrare in ogni pagina. Se non specifichiamo niente vale il numero indicato in impostazioni>lettura.

numero-post-per-pagina

Il loop


<div class="container">
<div class="row">

<?php

while ( $post_annunci->have_posts() ) :
	$post_annunci->the_post();

	$attr = array( 'class' => 'img-responsive');

	echo '<div class="col-xs-6 col-sm-4 col-md-3">';

	echo '<a href="' . esc_url( get_permalink() ) . '" alt="'. get_the_title() .'" >' . get_the_post_thumbnail( $post->ID, 'thumbnail' , $attr ) . '</a>';
	echo  '<legend><a href="' . esc_url( get_permalink() ) . '" title="'. get_the_title() .'" >' . get_the_title() . '</a></legend>' ;

	echo '</div>';

endwhile;

// Ripristina Query & Post Data originali
wp_reset_query();
wp_reset_postdata();
?>

</div><!-- row -->

Abbiamo creato un semplice loop di worpress e applicato alcune classi di bootstrap 3

  • container
  • row
  • col-xs-6
  • col-sm-4
  • col-md-3
  • img-responsive

Link di paginazione: paginate_links()


<div class="row text-center">
<?php
     // $big = 999999999;
     $paginazione = paginate_links( array(
		//'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => 'page/%#%',
		'current' => max( 1, $paged ),
		'total' => $post_annunci->max_num_pages,
		'prev_text' => '<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>',
		'next_text' => '<span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>',
	        'type'  => 'array'
		) );

		if( is_array( $paginazione ) ) {
		          echo '<nav><ul class="pagination">';
		          foreach ( $paginazione as $page ) {
		                  echo "<li>$page</li>";
		          }
		         echo '</ul></nav>';
		      }
?>
</div><!-- pag -->
</div> <!-- container -->

paginate_links() genera i link di paginazione.

‘format’

Permette di specificare il formato della query string nei link di paginazione:
'page/%#%' es. instileweb.com/page/2
'?page=%#%' es. instileweb.com/?page=2

‘current’

Numero di pagina corrente memorizzato in $paged.

‘total’

Numero totale di pagine calcolate in base ai post totali e al numero di post per pagina.

‘prev_text’ e ‘next_text’

Il testo per i link alla pagina precedente e successiva. Abbiamo usato due icone di bootstrap (frecce cerchiate)

‘type’

Usando il parametro ‘array’ modifichiamo l’output della funzione come array. Ciclando questo array possiamo applicare la formattazione html di bootstrap.

<nav>
   <ul class="pagination">
      <li>link 1</li>
      <li>link 2</li>
      ...
   </ul>
</nav>

  inStileWeb.com
blog comments powered by Disqus