Come migliorare la paginazione di WordPress

Stai cercando un modo per migliorare la navigazione di WordPress? Sebbene esista probabilmente un plugin per questo, abbiamo creato un rapido snippet di codice che puoi utilizzare per migliorare la navigazione di WordPress.

Istruzioni:

Tutto quello che devi fare è aggiungere questo codice al file functions.php del tuo tema o in un plugin specifico per il sito:

/**
 * Pagination - Add the proceeding to your functions.php file
 * You do not need to include the php opening and closing tags if pasting into your functions.php file
*/
function pagination($pages = '', $range = 1)
{  
     $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 "<div class="pagination"><span>Page ".$paged." of ".$pages."</span>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>«</a>";
         if($paged > 1 && $showitems < $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)? "<span class="current">".$i."</span>":"<a href='".get_pagenum_link($i)."' class="inactive">".$i."</a>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($paged + 1)."">›</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>»</a>";
         echo "</div>n";
     }
}

Aggiungi il seguente codice dove vuoi visualizzare la paginazione:

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

Aggiungi questo CSS al tuo foglio di stile.

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
 
.pagination a {
display:block;
float:left;
margin: 3px;
padding: 5px;
width: 25px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 24px;
text-decoration:none;
color:#fff;
background: #282828;
}

.pagination span {
display:block;
float:left;
margin: 3px;
padding:5px  10px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 24px;
width:auto;
text-decoration:none;
color:#fff;
background: #282828;
}
 
.pagination .current{
margin: 3px;
padding: 5px;
width: 25px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 22px;
background: #424242;
color:#fff;
}

.pagination a:link{
color:#fff;
}

.pagination a:visited{
color:#fff;
}

.pagination a:hover{
color:#fff;
background-color: #424242;
}

.pagination a:active{
color:#fff;
}

Nota: Se questa è la prima volta che aggiungi snippet di codice in WordPress, consulta la nostra guida su come aggiungere correttamente snippet di codice in WordPress, in modo da non compromettere accidentalmente il tuo sito.

Se ti è piaciuto questo snippet di codice, prendi in considerazione la lettura dei nostri altri articoli sul sito come: 9 migliori plugin per eventi WordPress e come impostare il tracciamento degli autori in WordPress con Google Analytics.