WordPress gestisce la paginazione dei post tramite la variabile globale $paged
e la proprietà max_num_pages
dell'oggetto $wp_query
. Questi due valori ci consentono di sapere qual'è il numero massimo di pagine e se ci troviamo nella pagina corrente. Saputo questo, possiamo creare una funzione per gestire la paginazione dei post. Vediamo come.
Inserite il seguente codice nel vostro file functions.php
del tema in uso:
function create_pagination($pages = '', $range = 2) {
$show_items = ($range * 2) + 1;
global $paged;
if(empty($paged)) {
$paged = 1;
}
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages) {
$pages = 1;
}
}
if(1 != $pages) {
echo '<div id="pagination">';
if($paged > 2 && $paged > $range+1 && $show_items < $pages) echo "<a href='".get_pagenum_link(1)."'>«</a>";
if($paged > 1 && $show_items < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? '<strong>'.$i."</strong>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $pages && $show_items < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $show_items < $pages) echo "<a href='".get_pagenum_link($pages)."'>»</a>";
echo "</div>\n";
}
}
Si tratta semplicemente di confrontare i valori delle variabili numeriche ed utilizzare la funzione di WordPress get_pagenum_link()
per ottenere l'URL delle pagine (solitamente è http://sito.it/page/1
, http://sito.it/page/2
e così via). Se ci troviamo nella pagina corrente viene utilizzato un elemento strong
in luogo di un elemento a
.
Quindi possiamo inserire la funzione nel nostro tema:
<?php create_pagination(); ?>
E applicare degli stili CSS:
#pagination {
margin: 0;
text-align: center;
}
#pagination a:link,
#pagination a:visited {
display: inline;
text-decoration: none;
color: #666;
padding: 3px 7px;
border: 1px solid #DDDDDD;
}
#pagination a:link,
#pagination a:visited,
#pagination strong {
border-radius: 4px;
}
#pagination strong,
#pagination a:hover {
padding: 3px 7px;
background: #EEEEEE;
border: 1px solid #bbb;
}
E questo è il risultato:
[caption id="attachment_2408" align="aligncenter" width="141" caption="La paginazione dei post con gli stili CSS applicati"]