Paginación en WordPress: Los Principios

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este artículo/tutorial veremos los conceptos básicos de la paginación en WordPress, la configuración de la paginación por defecto y cómo se puede mejorar.

El Esquema de Paginación Predeterminado

Usaré el tema por defecto Twenty Eleven que viene con WordPress como referencia. Incluso si no lo estás utilizando, lo encontrarás en el directorio de temas.

Entradas Por Página

No te olvides que cuando se trata de la paginación, WordPress necesita saber cuántos elementos debe listar en cada página. Este valor se establece en la sección a la que se accede desde Admin-> Ajustes-> Ajustes de lectura.

El valor especificado en "Número máximo de páginas del Blog a mostrar" será el que use WordPress, a menos que lo reemplaces, por ejemplo usando una consulta personalizada.

El Código de Paginación Predeterminado

Un típico ejemplo de mostrar un listado de los mensajes es ver todos los mensajes de una categoría. La visualización de entradas de la categoría es manejada por el archivo de plantilla category.php. Para el tema veinte once, la página de categoría entrega la pantalla de la paginación a una función llamada twentyeleven_content_nav, que se encuentra en functions.php.

function twentyeleven_content_nav( $nav_id ) {

  global $wp_query;

  if ( $wp_query->max_num_pages > 1 ) : ?>

  <nav id="<?php echo $nav_id; ?>">
    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
    <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>
  </nav><!-- #nav-above -->

  <?php endif;
}

El código anterior podría también se han incluido directamente en category.php pero los diseñadores de las 20:11 decidida hacer una función que podría ser llamado desde varios archivos de plantilla. La mayor parte del código es para propósitos de diseño e internacionalización, pero aquí es lo que hace:

utilizando el valor de la variable de consulta global $wp_query-> max_num_pages, comprobamos si tenemos más de una página; Esto evita que muestra todo el bloque para localizar si existe sólo una página de mensajes
la next_posts_link de la función de WordPress muestra un vínculo a la página siguiente de puestos y toma un argumento opcional para texto del enlace personalizado
del mismo modo, el previous_posts_link de la función de WordPress muestra un vínculo a la página anterior de puestos

Y esto es lo que le vería con una configuración de dos entradas por página.

Es bastante básico pero funcional. Los problemas con este indicador son que no hay ninguna manera de decir que estás en, o cómo muchas páginas que se encuentran en total.

Una cosa para recordar acerca de lista de correos por defecto de WordPress es que corren en orden inverso:

Debido a consultas post generalmente están ordenadas en orden cronológico inverso, next_posts_link() apunta generalmente a mayores entradas (hacia el final de la serie) y prev_posts_link() generalmente apunta a nuevas entradas (hacia el principio de la serie).

Ese comportamiento puede ser modificado si se está creando una consulta personalizada. Nota en el ejemplo anterior, se utilizaron dos bloques de paginación: antes de que comenzara el bucle de mensaje y después. Siempre es un buen toque tener paginación en la parte superior e inferior para que el usuario no tenga que desplazarse demasiado.

Ejemplos:

Para mostrar "Ir a la siguiente página..." como texto del vínculo:

1	next_posts_link('Go to next page...');

Para mostrar una imagen en vez de texto:

1	$previous_posts_image = '<img src="' . get_bloginfo('stylesheet_directory') . '/images/previous_posts.png" />';
2	previous_posts_link($previous_posts_image);

Alternativa

Hay una alternativa al uso de las funciones independientes next_posts_link y previous_posts_link y es la función posts_nav_link. Esta función, básicamente, muestra los enlaces "anteriores" y "siguientes" en uno cayó swoop, con texto de enlace opcional y argumentos para el separador del enlace.

Lo que muestra por defecto:

1	posts_nav_link();

Y con el texto de enlace personalizado y un separador:

1	posts_nav_link(':::', '<< Newer Posts', 'Older Posts >>');

Yo sugiero usar las funciones separadas next_posts_link y previous_posts_link ya que te darán más control sobre la colocación de tus enlaces y además harán que tu código sea más comprensible.

Paginar Entradas Individuales

Cuando se muestran entradas independientes, es bueno mostrar un enlace a la entrada anterior y posterior de la secuencia. El archivo de la plantilla single.php es la que se encarga de gestionarlo mediante el siguiente código:

<nav id="nav-single">
  <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
  <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?></span>
  <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span>
</nav><!-- #nav-single -->

Eso te dará como resultado esto:

Son las funciones next_post_link y previous_post_link las que producen los enlaces de paginación de la parte superior derecha. Estas funciones aceptan un par de parámetros que nos permiten personalizar perfectamente bien lo que obtenemos. Los parámetros son:

next_post_link (formato, link, in_same_cat, excluded_categories);

Los parámetros de formato y del enlace trabajan juntos. El formato es cómo deseas que aparezca el enlace: %link en el formato se utiliza como un marcador de posición para el contenido del parámetro del enlace, el cual es el texto que deseas usar para el enlace. Como ves en el ejemplo:

1	previous_post_link( '%link', '<< Next Newest Post' );
2	next_post_link( '%link', 'Next Oldest Post >>' );

Nos da este resultado:

Si quisiéramos mostrar el título real del post siguiente o anterior, utilizaríamos el título % de especial valor en el parámetro de enlace. Por eso, este:

1	previous_post_link( '%link', '<< Previous Post: %title' );
2	next_post_link( '%link', 'Next Post: %title >>' );

Nos daría esto:

Los parámetros restantes permiten asegurar que el siguiente post relacionado con la misma categoría y excluir a determinadas categorías. Consulte la documentación como enlazado arriba.

Puede mostrar una imagen del como el link:

1	$previous_post_link_image = '<img src="' . get_bloginfo('stylesheet_directory') . '/images/previous_post_link.png" />';
2	previous_post_link( '%link', $previous_post_link_image );

Una Solución Mejor

Los métodos anteriores son tan fáciles como limitados. Afortunadamente, WordPress nos proporciona la función paginate_links. Ésta nos permite crear un verdadero sistema de enlaces de paginación, como este:

Aquí abajo tienes el código con el que se obtiene la paginación anterior. Echemos un vistazo a lo que hace.

global $wp_query;

$total_pages = $wp_query->max_num_pages;

if ($total_pages > 1){

  $current_page = max(1, get_query_var('paged'));
  
  echo paginate_links(array(
      'base' => get_pagenum_link(1) . '%_%',
      'format' => '/page/%#%',
      'current' => $current_page,
      'total' => $total_pages,
    ));
}

Globaliza el objeto wp_query de forma que podamos recuperar el valor de max_num_pages: este es el número total de páginas devueltas por la consulta
buscar la página actual recuperando la variable 'paged' con get_query_var: usamos la función max para establecer la página actual a 1 de forma predeterminada
la función de paginate_links toma un array de parámetros: se muestran los cuatro más importantes
recuperar la dirección URL base de la página con la función get_pagenum_link y anexar el % _ % patrón que se sustituirá por el parámetro de formato, a continuación
en nuestro caso, especificar un modelo de formato que se ajusta a la forma en que pretty permalinks (conjunto con % postname%/ Admin-> configuración-> Permalinks): % _ % en el parámetro base se sustituirá por este
configurar las páginas actuales y total como obtenido previamente

La URL de resultados paginados usando permalinks bonitos se verá algo como esto:

http://2011.rosselliot.co.nz/category/honda/page/2/

La llamada get_pagenum_link(1) recupera esta parte de la URL:

http://2011.rosselliot.co.nz/category/honda/

Nosotros proveeremos un parámetro de formato para el resto de la URL que es:

page/2

La parte %#% del formato sostiene nuestro número de página actual

En este conjunto de parámetros base, paginate_links generará una serie de enlaces de la paginación. Podría insertar el código directamente en un archivo de plantilla que se encarga de localizar (como category.php) o guardar como una función en tu functions.php y luego llamarlo desde cualquier plantilla que te gusta.

paginate_links tiene otros parámetros que permite adaptar la salida, cómo aparecen los números y lo que dicen las etiquetas. Consulte la documentación. Con un poco de estilo es fácil con un despliegue impresionante de paginación. Con este código modificado y añadido un estilo:

global $wp_query;

$total_pages = $wp_query->max_num_pages;

if ($total_pages > 1){

  $current_page = max(1, get_query_var('paged'));
  
  echo '<div class="page_nav">';
  
  echo paginate_links(array(
      'base' => get_pagenum_link(1) . '%_%',
      'format' => '/page/%#%',
      'current' => $current_page,
      'total' => $total_pages,
      'prev_text' => 'Prev',
      'next_text' => 'Next'
    ));

  echo '</div>';
  
}

.page_nav .page-numbers{
  padding:4px 8px;
  margin:0px 4px;
  border:1px solid gray;
  color:#FFB134;  
}
.page_nav .current{
  border:1px solid #FFB134;
  background-color:#FBEFDB;
}
.page_nav .prev, .page_nav .next{
  border:none;
  color:blue;
}

Era fácil producir esto:

Espero que usted ha disfrutado esta cartilla en la paginación. ¿Tienes algún consejo más sobre paginación con WordPress? Háganos saber en los comentarios.