WordPress: aggiungere i numeri delle pagine

WordPress non ci stancherà mai, è uno strumento potente e flessibile.

Possiamo realizzare il sito più semplice oppure un sito molto complesso, non per nulla moltissimi siti “importanti” sono realizzati con WordPress, come avevo scritto in un articolo precedentemente.

Ci sono, però, alcune cosette che, di default, non sono pratiche, come la paginazione.

Se realizziamo un blog con WordPress e gli articoli scritti cominciano a diventare più di un certo numero (normalmente più di dieci) a fondo pagina troveremo i link di navigazione, semplici, forse troppo, infatti ci troveremo di fronte ad un bivio:

Post più vecchi  –  Post più recenti

La paginazione di default di WordPress

E se noi volessimo andare ad una determinata pagina in cui sappiamo essere l’articolo che ci interessa?

Dovremmo, inevitabilmente, cliccare più volte su uno dei due link fino ad arrivare al post che vogliamo leggere. Troppa fatica.

Per fortuna, aggiungere la paginazione numerica al nostro blog è abbastanza semplice, sarà sufficiente aggiungere qualche riga di codice all’interno del template che utilizziamo.

Dobbiamo, per prima cosa, aggiungere una funzione al file functions.php del tema, quindi aprite il file con l’editor di WordPress o con il vostro editor preferito, aggiungete in fondo queste righe e salvate:

function eugenio_pagination($pages = '', $range = 3) {   /* funzione paginazione numerica*/
    $showitems = ($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 "
Pagina ".$paged." di ".$pages."";
            if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "« Prima";
            if($paged > 1 && $showitems < $pages) echo "‹ Precedente";
     
            for ($i=1; $i <= $pages; $i++)
            {
                if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
                {
                     echo ($paged == $i)? "".$i."":"".$i."";
                }
            }
     
            if ($paged < $pages && $showitems < $pages) echo "Successiva ›";
            if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "Ultima »";
            echo "
n";
        }
    } //  eugenio_pagination

Fatto questo, richiamiamo la funzione nel template, che in questo caso è index.php.

Apriamo il file index.php e sostituiamo la riga

con

Salvate index.php e aprite e aggiornate la pagina, avremo qualcosa del genere:

La paginazione numerica senza lo stile css.

La funzione fa il suo dovere ma è inguardabile, rimediamo subito con un minimo di css 😉

Aggiungiamo queste righe al foglio di stile:

/* Impaginazione numerica */

.pagination {
clear:both;
font-size:11px;
line-height:13px;
padding: 10px 0 10px 15px;
position:relative;
}

.pagination span, .pagination a {
background: #E6E6E6;
background-attachment: scroll;
background-repeat: repeat-x;
color:#333333;
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
}

.pagination a:hover{
background: #A0A0A0;
color:#333333;
}

.pagination .current{
background: #FFFFFF;
color:#333333;
padding:6px 9px 5px 9px;
}

Aggiorniamo la pagina, finalmente abbiamo la nostra paginazione numerica con tanto di stile css, come vi sembra?

Finalmente la paginazione numerica con lo stile css.

Lo stile non è dei più arditi ma si accosta bene al minimalismo del tema Twentytwelve, sta a voi esprimere la vostra più sfrenata creatività.

Ciao e alla prossima.