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)."'>«</a>"; }else{ echo "<a class='is-disabled'>«</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>"; }else{ echo "<a class='is-disabled'>›</a>"; } if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages){ echo "<a href='".get_pagenum_link($pages)."'>»</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.