Paginación WordPress Sin Plugin

En esta entrada te vamos a enseñar como realizar una paginación WordPress sin plugin con paginación numérica.

La paginación por defecto en WordPress no incluye una paginación numérica y es bastante simple.  Hay diferentes plugins que te dan esta funcionalidad, pero siendo tan sencillo de realizar la modificación en tu Theme WordPress, para que añadir un nuevo plugin en detrimento de tu performance? Pues allá vamos! Te mostramos como implementar paginación WordPress sin plugin!

Empecemos por ver como funciona la Paginación en WordPress.

Si accedemos a la documentación oficial de WordPress sobre paginación (aquí) , podemos ver como incluir paginación básica dentro del main loop.

<?php if ( have_posts() ) : ?>
    <!-- Main loop. -->
    <?php while ( have_posts() ) : the_post();  ?>
         <!-- Tus funciones -->
    <?php endwhile; ?>

    <div class="nav-previous alignleft"><?php next_posts_link( 'Viejos posts' ); ?></div>
    <div class="nav-next alignright"><?php previous_posts_link( 'Nuevos posts' ); ?></div>
<?php endif; ?>

Esto nos mostrara detrás del bucle, un par de links para proceder a la siguiente página o la anterior. Aunque funcional, esta lejos de lo deseable.

Al usuario le falta bastante información de cuantas paginas hay o de hacerse una idea de cuantos posts hay. Si tenemos muchas paginas la navegación se convertirá en una pesadilla.

Tenemos dos soluciones ante esto, usar un plugin que te solucione el tema (lo que la mayoría hace) o crear una función tu mismo.

 Paginación WordPress con Plugin. 

La principal pega de usar un plugin para la paginación en WordPress, es añadir innecesariamente otro plugin en tu set-up y cargar mas tu sistema. Cuantos menos plugins, por norma general, mas rápida será tu página web.

Si aun así te decides a usar uno, hay una infinidad de plugins para facilitarte la tarea (aquí) , pero sin duda el mas conocido y usado es WP-pagenavi con mas de un millón de descargas.

 Paginación WordPress sin Plugin.

Visto lo anterior, te has decidido a usar paginación numérica en WordPress sin usar un Plugin? Bien! nosotros hemos hecho lo mismo, de echo vamos a explicar el mismo método que hemos implementado en www.tustemaswordpress.com.

Los compañeros de http://www.kriesi.at/ han realizado una sencilla función y sencillo manual para su correcta implementación (ENG) , por lo que procedemos a explicarla aquí:

Copia&pega la siguiente función en functions.php ( o donde guardes las funciones de tu theme)

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>";
         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>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
         echo "</div>\n";
     }
}

Como vemos, la función tiene dos argumentos, la primera tiene que ver con el uso de la función en custom loops (la explicaremos mas adelante) , la segunda para decir el número de elementos que queremos mostrar en el paginador.

Esto quiere decir: Si usamos 2 (la que trae por defecto) Y estamos en la página uno, en el paginador veremos el número 2 y 3.   [1][2][3][>][>>] 

El CSS que podeis usar por defecto, simplemente C&P en vuestro style.css

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

.pagination span, .pagination a {
    display:block;
    float:left;
    margin: 2px 2px 2px 0;
    padding:6px 9px 5px 9px;
    text-decoration:none;
    width:auto;
    color:#fff;
    background: #555;
}

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

.pagination .current{
    padding:6px 9px 5px 9px;
    background: #3279BB;
    color:#fff;
}

 Donde llamar a la función para conseguir la paginación ?

<?php if ( have_posts() ) : ?>
    <!-- Main loop. -->
    <?php while ( have_posts() ) : the_post();  ?>
         <!-- Tus funciones -->
    <?php endwhile; ?>

    <--Llamamos al paginador aquí -->
    kriesi_pagination();
<?php endif; ?>

 Y cómo se ve una vez implementado?

Este es el aspecto una vez implementado.

 Como usar esta función en un Custom Loop.

Básicamente el funcionamiento es el mismo, solo que usando el primer parámetro de la función.

<?php $additional_loop = new WP_Query("cat=1,2,3"); ?>
    <?php while ($additional_loop->have_posts()) : $additional_loop->the_post(); ?>
     <!-- Tus funciones -->
    <?php endwhile; ?>
      <!-- Llamamos a paginación -->
    kriesi_pagination($additional_loop->max_num_pages);

Si te ha gustado , comparte y déjanos un comentario !