Tag Archive for 'paginación'

Agregar paginación a Comentarios en WordPress

Hace unos días me enteré por twitter que Charla Técnica, proyecto de mi amigo Norman Varas, tenía problemas en su migración desde Blogger a WordPress, principalmente porque estaba usando un hosting compartido que no aguantaba el alto tráfico que tiene este sitio y además el problema de estar probando directamente sobre el sitio en producción plugins y cambios al mismo por lo que ahora ya además cuenta con un sitio de desarrollo que evitará generar problemas como en los días antes de la migración.

Por ahora está usando uno de mis servidores esperando la migración final a uno propio, aproveché de ayudarlo con algunas cosas, entre otros habilitando WP Super Cache, que ayudaría a bajar la carga que se lleva el servidor sobre todo en este fin de semana que jugó Chile contra Paraguay (2-0).

Pero uno de los grandes temas que le preocupaba a Norman era no tener paginación para los comentarios, que fácilmente sobrepasan los 500 en algunos artículos, por lo que me puse a buscar algún plugin que ayudara en esta tarea, probé varios, ninguno cumplía con lo requerido, algunos cambiaban la forma en que se mostraban inclusive los comentarios, por lo que opté por buscar una solución “a mano”, y me encontré con la grata sorpresa de que era más simple de lo que pensaba.

Es así como encontré la función paginate_comments_links de muy simple uso, bastaba ir dentro del template que están usando a comments.php y agregar esta función, en este caso sobre y bajo los post para facilitar el acceso a los usuarios.

<div class="navigation">
<span>Páginas:</span>
<?php paginate_comments_links(); ?>
</div>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<span>Páginas:</span>
<?php paginate_comments_links(); ?>
</div>

y agregando un poco de estilo con css

.navigation{
clear:left;
margin:1em 0;
padding:1em;
height:21px;
}

.navigation span{
border:1px solid #FFFFFF;
display:block;
float:left;
margin-right:0.1em;
padding:0.2em 0.5em;
}

.navigation a{
border:1px solid #FFFFFF;
display:block;
float:left;
margin-right:0.1em;
padding:0.2em 0.5em;
}

.navigation .page-numbers{
border:1px solid #9AAFE5;
text-decoration:none;
}

.navigation a:hover{
background:#2E6AB1 none repeat scroll 0 0;
border:1px solid #2E6AB1;
color:#FFFFFF;
font-weight:bold;
}

.navigation .current{
background:#2E6AB1 none repeat scroll 0 0;
border:1px solid #2E6AB1;
color:#FFFFFF;
font-weight:bold;
}

.navigation .next{
font-weight:bold;
}

.navigation .prev{
font-weight:bold;
}
.navigation .dots{
border:0;
}

con esto obtenemos para un post de 9 páginas

Paginación Ejemplo 1

Pero el espacio útil para mostrar páginas es más ancho, entonces me puse a buscar como poder controlar para esta función la cantidad de páginas a mostrar, así fui a la función que utiliza paginate_comments_links para generar la paginación que es paginate_links, que tal como se explica en la documentación, puede ser útil para crear listado de páginas de cualquier área dependiendo de los argumentos que se le pasen a la función.

Para lograr controlar la cantidad de páginas debíamos definir dos variables, end_size y mid_size.

end_size, es la cantidad de páginas que se muestran antes o luego de los puntos suspensivos que se muestran cuando la cantidad de páginas antes y/o despues de la actual supera el valor definido en mid_size.

mid_size, que permite definir cuantas páginas van junto a la página actual, si definimos por ejemplo este valor en 4 antes de la página actual tendremos máximo 4 páginas y luego de la página actual un máximo de 4 páginas.

Como ejemplo cuando nos encontramos con 9 páginas si definimos end_size = 2 y mid_size = 4 veríamos lo siguiente al estar en la página 8:

Ejemplo Paginación 2

Al estar en la página 2:

Ejemplo Paginación 3

Para controlar esto hacemos la siguiente modificación en el código anterior y pueden cambiar los valores a su gusto.

<div class="navigation">
<span>Páginas:</span>
<?php
$pcl_args = array('end_size' => 2,'mid_size' => 4);
paginate_comments_links($pcl_args);
?>
</div>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<span>Páginas:</span>
<?php paginate_comments_links($pcl_args); ?>
</div>

Como ejemplo en caso de confusión, si quiero que se muestren un máximo de 13 páginas siempre tendríamos según los ejemplos ya mostrados, end_size = 2 y mid_size = 4, esto nos lleva a una formula:

cantidad_de_paginas = ( end_size * 2 ) + ( mid_size * 2 ) + 1

Y obtendríamos para 15 páginas cuando estamos ubicados en la página 8 algo como esto:

Ejemplo Paginación 4