Paginación en WP sin plugin


Paginación en WP sin plugin

En este artículo mostraré un código para agregar una paginación en WP sin plugin.

Existen múltiples plugins para agregar una paginación a nuestro WordPress, sin embargo lo ideal siempre es agregar a mano el código para no depender de terceros ni cargar la página con código extra.

El código lo saqué de ESTA PÁGINA y lo edité según mis necesidades.

El código editado

//Paginador
function kriesi_pagination($pages = '', $range = 2){ 
   $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'>";
      if($paged > 2 && $paged > $range+1 && $showitems < $pages){
         echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>"; 
      }else{
         echo "<a class='is-disabled'>&laquo;</a>"; 
      }
      if($paged > 1 && $showitems < $pages){
         echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</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)."'>&rsaquo;</a>"; 
      }else{
         echo "<a class='is-disabled'>&rsaquo;</a>"; 
      }
      if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages){
         echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
      }
      echo "</div>\n";
   }
}

Básicamente edité el tema de la visibilidad de las flechas al cambiar de numeración.

El código debe ser insertado al final del archivo functions.php (o antes del cierre de PHP }?>)

A continuación agrego el estilo CSS también editado a mis necesidades.

El CSS editado

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

.pagination span, .pagination a {
   display:block;
   float:left;
   padding:6px 9px 5px 9px;
   text-decoration:none;
   width:auto;
   color:#fff;
   background: #555;
   border: 1px solid #3279BB;
}

.pagination a:hover{
   color:#fff;
   background: #3279BB;
}

.pagination .current{
   padding:6px 9px 5px 9px;
   background: #3279BB;
   color:#fff;
}
.pagination a:first-child {
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
}

.pagination a:last-child {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
}
.pagination .is-disabled {
   pointer-events: none; 
   opacity: 0.7;
}

El estilo pueden insertarlo en el archivo style.css de su theme o si este posee, en Apariencia, CSS Adicional.

La vista del paginador es como la siguiente imagen.