Tag Archive for 'wordpress'

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

Inauguración de Sincklation.com mi Blog

Bueno, hace tiempo ya que tengo un blog, y antes de que existiera el concepto tuve mi página personal desde 1996, ojalá pueda encontrar rastros de ella, me acuerdo que era algo como http://www.geocities.com/pipeline/dropzone/… pero bueno, nunca he sido un buen blogger, pero tengo muchas ganas de ir posteando poco a poco ideas, proyectos y otros temas que podrían ser de utilidad a alguien y no dejarlo tan botado como el antiguo.

Pensé en tener un diseño base con un header con alguna imagen, pero finalmente decidí adaptar el diseño de mi antiguo blog a wordpress sobre el template k2.

Y por que ya hay posts en este blog ? Gracias a que wordpress permite importar desde blogspot ( y otros más ) así logro mantener continuidad pese al cambio.

Ahora queda seguir agregando contenidos, links y otros.

Bienvenidos a mi web !