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.
|
1 2 3 4 5 6 7 8 9 |
<?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)
|
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 36 |
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>"; 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>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>»</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
|
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 |
.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 ?
|
1 2 3 4 5 6 7 8 9 |
<?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.
|
1 2 3 4 5 6 |
<?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 !
TE PUEDE INTERESAR
Justo estaba buscando esto! muchas gracias
Gracias por compartirlo… 😀 ME ayudo mucho… Saludos.
Excelente sobretodo a mi que no me gusta mucho php jajaja lo mio es javascript :p gracias funciono de maravilla
¡Hola!
A ver si me podéis ayudar.
Soy nueva en WordPress, y estoy montando una web con Divi. El caso es que en una de las páginas tengo mucha información, concretamente una lista de empresas asociadas, y he pensado que sería mejor, poder visualizarlas de 10 en 10. Pero no sé si eso es posible con la paginación o solo sirve para post.
Gracias de antemano.
Hola Marta, esto dependerá de esa página en concreto, la información viene toda del editor o es un archive de diferentes «empresas»?
Tengo un problema, y es que en todas las paginas me muestra los mismos post, no se que hacer.
Muy interesante, aunque faltaría añadir que entre los argumentos de la query que hay que pasar hay que poner:
‘paged’ => get_query_var(‘page’),
Con esto, se recupera el valor de la página actual y así se muestran los post.
Con esto, se arreglaría tu problema, David.
Buena paginación no creí que funcionará en la versión nueva de wordpress 4.9 ya que antes lo tenía, lo actualize y me dejo de funcionar, así que lo hice otra vez y si funciono, es más le agregue las clases de bootstrap 4 ya que mi tema esta hecho con boostrap 4 la pueden ver en mi web de pruebas por el momento … GRACIAS
Muy buen artículo ! hago repost en mi blog, gracias !
Excelente código y me funciona con wordpress 4.9.6, pero solo me funciona en la página archivos. En la página de categorías se muestran bien los números, pero cuando hago click en cualquier página, me manda a la página de inicio. Es decir, no hace paginación en categorias.
Cómo lo resuelvo?
me imagino que funciona, pero la verdad no lo entiendo, soy nuevo en wp, y me gustaría un ejemplo modificando valores, por una taxonomía personalizada, categoría personalizada y como se da cuenta que pagina debe llamar.
Un ejemplo para descargar.
gracias