Cómo mejorar la paginación de WordPress

¿Estás buscando una forma de mejorar la navegación en WordPress? Aunque probablemente exista un plugin para ello, hemos creado un rápido fragmento de código que puedes utilizar para mejorar la navegación en WordPress.

Instrucciones:

Todo lo que tienes que hacer es añadir este código al archivo functions.php de tu tema o en un plugin específico del sitio:

/**
 * 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";
     }
}

Añade el siguiente código donde quieras mostrar la paginación:

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

Añade este CSS en tu hoja de estilos.

.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: Si es la primera vez que añades fragmentos de código en WordPress, consulta nuestra guía sobre cómo añadir correctamente fragmentos de código en WordPress, para no romper accidentalmente tu sitio.

Si te ha gustado este fragmento de código, por favor, considere revisar nuestros otros artículos en el sitio como: 9 mejores plugins de eventos para WordPress y cómo configurar el seguimiento de autores en WordPress con Google Analytics.