La paginación permite al usuario moverse a través de múltiples páginas de artículos, mediante página adelante y página atrás. Por defecto, WordPress muestra 10 artículos por página.
El usuario puede cambiar este número en ‘Administración > Ajustes > Lectura’.
Evolución de la paginación en WordPress
Desde la versión 0.71, WordPress dispone de dos funciones, next_posts_link() y previous_posts_link(), que nos permitían mostrar las etiquetas ‘Anterior’ y ‘Posterior’, como nos indica el mismo Codex:
|
1 2 3 4 |
<!-- Add the pagination functions here. --> <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div> <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div> |
Ante esto, si queríamos una paginación de posts más elaborada, teníamos dos opciones: o bien instalabamos un plugin específico, o bien buscábamos algún código para lo que necesitábamos. Por ejemplo, desde el blog eSandra.com, nos redirigían a otra página, en la que nos proporcionaban el siguiente código para tal menester.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
function pagination($pages = '', $range = 4) { $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)."'>« First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</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)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>"; echo "</div>\n"; } } |
Que se llamaba luego así:
|
1 2 3 |
<?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages); } ?> |
Afortunadamente, los desarrolladores de WordPress han evolucionado este tema, y ahora la paginación es tan sencilla como la siguiente función que actúa en el theme ‘Twenty Sixteen’:
|
1 2 3 4 5 6 |
// Previous/next page navigation. the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'twentysixteen' ), 'next_text' => __( 'Next page', 'twentysixteen' ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>', ) ); |
Además, con un resultado notable:
Referencia de funciones
Vamos a ir directos al grano, viendo las diferentes funciones que nos aporta el códex para la paginación de posts:
- next_posts_link( $label, $max_pages ) y get_next_posts_link( $label, $max_pages )
Muestra en pantalla (next) o devuelve (get_next) un vínculo a la siguiente página de posts según la consulta actual. Como el orden de los artículos es cronológicamente inverso, apuntará a artículos más antiguos.
El parámetro $label es una cadena opcional que será el texto del vínculo, por defecto ‘Next Page >>’. El parámetro $max_page es un valor entero opcional que limita el número de páginas en las que se devolverá el vínculo. Por defecto es 0, que significa que aparece en todas.
- previous_posts_link ($label ) y get_previous_posts_link( $label )
De la misma forma que next y get_next, para la página anterior de posts.
- posts_nav_link( $separador, $texto_previo, $texto_siguiente )
Une, en una sola función, a next_posts_link y previous_posts_link.
- the_posts_pagination( $args ) y get_the_posts_pagination( $args )
Muestra (the_posts) o devuelve (get_the_posts) un conjunto de números de páginas de posts, incluidos los vínculos a las páginas anterior y posterior de la actual. Los argumentos de la matriz asociativa pueden ser:
– mid_size Cuántos números de página mostrar a cada lado de la página actual. Por defecto es 1.
– prev_text Texto del vínculo a la página anterior, por defecto ‘Previous’.
– next_text Texto del vínculo a la página siguiente, por defecto ‘Next’.
– screen_reader_text Texto previo, por defecto, ‘Posts navigation’.
- paginate_links( $args )
Devuelve un vínculo de paginación numerada, para su uso con PHP. Se emplea en versiones anteriores a la 4.1 de WordPress, en lugar de the_posts_pagination().
Estilización de la paginación
La función de paginación del tema ‘Twenty Sixteen’ nos devuelve el siguiente código HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<nav class="navigation pagination" role="navigation"> <h2 class="screen-reader-text">Navegación de entradas</h2> <div class="nav-links"> <span class='page-numbers current'> <span class="meta-nav screen-reader-text"> Página </span> 1 </span> <a class='page-numbers' href='http://sergiotoca.com/page/2/'> <span class="meta-nav screen-reader-text"> Página </span> 2 </a> <a class="next page-numbers" href="http://sergiotoca.com/page/2/" > Próxima página </a> </div> </nav> |
Estos serán los elementos que emplearemos en nuesto archivo style.css para dar estilo al elemento de paginación de los posts de nuestro tema.
No vamos a entrar ahora en este tema, ya que lo integraremos directamente en el framework Bootstrap, que será el siguiente artículo de esta serie.
