Funciones paginación para WordPress

por Lph by Nerea Liébana | 10 Sep 2015

Funciones paginación para WordPress

No todos los temas de WordPress tienen habilitado por defecto la función de paginación, en algunos temas esta función no está habilitada, en otros temas aunque esta función está disponible necesita modificaciones para adaptarla a los requerimientos de tu página.

Si necesitas navegación por páginas en alguna sección de tu página web de WordPress a continuación te explico algunas funciones paginación para WP, cada una de ellas crea un tipo de navegación diferente.

Código funciones paginación

Código función paginación con botones

Copia la función dentro del archivo functions.php de tu tema hijo, si lo haces en el padre perderás todos los cambios cuando lo actualices, si necesitas ayuda aquí te explico como hacerlo en pocos minutos con un plugin.

1.- Navegación mediante botones >> Anterior , Siguiente >>

function pagination_anterior_siguiente() {
    global $wp_query;
 
    if ( $wp_query->max_num_pages > 1 ) { ?>
        <nav class="pagination" role="navigation">
            <div class="nav-previous"><?php next_posts_link( '&larr; Anterior',true ); ?></div>
            <div class="nav-next"><?php previous_posts_link( 'Siguiente &rarr;' ,true); ?></div>
        </nav>
<?php }
 wp_reset_postdata();
}

Esta función crea dos botones en tus entradas: anterior y siguiente, si pulsas anterior irás a la entrada anterior a la que estás viendo, y si pulsas siguiente se cargará la siguiente entrada editada. Recuerda que esta función la tienes que colocar dentro del archivo functions.php de tu tema.

Ahora dentro de nuestra template php vamos a realizar las siguientes modificaciones:

debes modificar todos los array de consultas donde incluyas la paginación para recoger el número de página. Añade antes de los argumentos de la consulta la siguiente línea:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

modifica los argumentos de la consulta para añadir la variable de página:

$args = array( 'post_type' => 'eventos','posts_per_page' =>8, 'order' => 'DESC', 'paged' => $paged );

tengo una variable $paged que pasa al loop el número de página uno.

El resto del código del bucle lo dejas como está.

//entro en el loop

<?php while ( $wp_query->have_posts() ) : $wp_query>the_post(); ?>

//CONTENIDO A MOSTRAR
<?php endwhile; ?>
   
<?php endif;  ?>//termina el loop

Cuando termina el loop llamo a mi función.

Ejemplo de llamada para paginación anterior y siguiente (ejemplo función pagination_anterior_siguiente):

<?php pagination_anterior_siguiente(); ?>

Es probable que necesites editar el archivo .css y añadir estilos a los botones de navegación.

Añade en tu archivo de estilos reglas para el diseño de: .pagination, .nav-previous, .nav-next

Código función paginación con botones de título post

Copia la función dentro del archivo functions.php de tu tema hijo, si lo haces en el padre perderás todos los cambios cuando lo actualices, si necesitas ayuda aquí te explico como hacerlo en pocos minutos con un plugin.

2. Navegación mediante botones << título post anterior, título post siguiente >>

function pagination_con_titulos() {
    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,
        ));
    }
    wp_reset_postdata();
}

Esta función crea dos botones en tus entradas con los títulos del post anterior y del post siguiente. Recuerda que esta función la tienes que colocar dentro del archivo functions.php de tu tema.

Código función paginación con números

Copia la función dentro del archivo functions.php de tu tema hijo, si lo haces en el padre perderás todos los cambios cuando lo actualices, si necesitas ayuda aquí te explico como hacerlo en pocos minutos con un plugin.

/*Función paginación página testimonios*/
function custom_pagination($numpages = '', $pagerange = '', $paged='') {

  if (empty($pagerange)) {
    $pagerange = 2;
  }

  /**
   * This first part of our function is a fallback
   * for custom pagination inside a regular loop that
   * uses the global $paged and global $wp_query variables.
   * 
   * It's good because we can now override default pagination
   * in our theme, and use this function in default quries
   * and custom queries.
   */
  global $paged;
  if (empty($paged)) {
    $paged = 1;
  }
  if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages;
    if(!$numpages) {
        $numpages = 1;
    }
  }

  /** 
   * We construct the pagination arguments to enter into our paginate_links
   * function. 
   */
  $pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => 'page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('«'),
    'next_text'       => __('»'),
    'type'            => 'plain',
    'add_args'        => false,
    'add_fragment'    => ''
  );

  $paginate_links = paginate_links($pagination_args);

  if ($paginate_links) {
    echo "<nav class='custom-pagination'>";
      echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
      echo $paginate_links;
    echo "</nav>";
  }

}

Ahora dentro de nuestra template php vamos a realizar las siguientes modificaciones:

debes modificar el array de la consulta, antes del array copia la siguiente línea de código:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

modifica los argumentos de la consulta para añadir la variable de página:

$args = array( 'post_type' => 'eventos','posts_per_page' =>8, 'order' => 'DESC', 'paged' => $paged );

El resto del código del bucle lo dejas como está.

//entro en el loop

<?php while ( $wp_query->have_posts() ) : $wp_query>the_post(); ?>

//CONTENIDO A MOSTRAR
<?php endwhile; ?>
   
<?php endif;  ?>//termina el loop

Cuando termina el loop llamo a mi función.

Ejemplo de llamada para paginación con números (ejemplo función custom_pagination):

if (function_exists('custom_pagination')) {
        custom_pagination($et_testimonials_query_pag->max_num_pages,"",$paged);
      }

Por último vamos a editar la plantilla css y añadir estilos para los nuevos elementos HTML creados:

/* ============================================================
  CUSTOM PAGINATION
============================================================ */
.custom-pagination span,
.custom-pagination a {
  display: inline-block;
  padding: 2px 10px;
}
.custom-pagination a {
  background-color: #ebebeb;
  color: #ff3c50;
}
.custom-pagination a:hover {
  background-color: #ff3c50;
  color: #fff;
}
.custom-pagination span.page-num {
  margin-right: 10px;
  padding: 0;
}
.custom-pagination span.dots {
  padding: 0;
  color: gainsboro;
}
.custom-pagination span.current {
  background-color: #ff3c50;
  color: #fff;
}

Podrás encontrar el código anterior en el tutorial del blog: callmenick.com. Aunque el tutorial está en inglés es realmente bueno.

Código paginación con números dentro del archivo PHP

Si no quieres crear una función de paginación, también puedes trabajar la paginación directamente sobre la plantilla. En este ejemplo te explico como hacerlo.

Este código trabaja dentro de la plantilla donde quieras realizar la paginación. Abre la plantilla del tema y copia y pega el siguiente código inmediatamente después de terminar el bucle (endwhile;) y antes de vaciar el array de consulta (reset):

3. Navegación numérica: 1 | 2 | 3 | 4

<?php endwhile; ?>

        <?php $max_page = $wp_query->max_num_pages;
        if (!$paged && $max_page >= 1) {
            $current_page = 1;
        }
        else {
            $current_page = $paged;
        } ?>
     <div class="page-nav fix">
     <span class="page-index"><?php printf(__('P&aacute;gina %1$s de %2$s'), $current_page, $max_page); ?></span>
    	<div class="suf-page-nav fix">
		<?php echo paginate_links(array(
		"base" => add_query_arg("paged", "%#%"),
		"format" => '',
		"type" => "plain",
		"total" => $max_page,
		"current" => $current_page,
		"show_all" => false,
		"end_size" => 2,
		"mid_size" => 2,
		"prev_next" => true,
		"next_text" => __('&rArr;'),
		"prev_text" => __('&lArr;'),
		)); ?>
        </div>
        </div>


<?php wp_reset_query(); ?>

debes modificar el array de la consulta, antes del array copia la siguiente línea de código:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

modifica los argumentos de la consulta para añadir la variable de página:

$args = array( 'post_type' => 'eventos','posts_per_page' =>8, 'order' => 'DESC', 'paged' => $paged );

Cómo llamar desde las plantillas (archivos php) a las funciones

Si ya tienes copiadas las funciones en el archivo funtions.php el siguiente paso es preparar el loop para paginación y llamar a la función en aquellas páginas en las que quieras incluir navegación por páginas.

Te explico un poco los pasos con ejemplos:

Es muy importante que la llamada a paginación la escribas después de terminar el bucle y antes de vaciar el array:

endif; 
      if (function_exists('custom_pagination')) {
        custom_pagination($et_testimonials_query_pag->max_num_pages,"",$paged);
      }
    
wp_reset_postdata();