Siguiendo en la linea de la entrada que publiqué hace unos pocos días explicando como añadir Gravatars en los comentarios de Wordpress hoy os voy a explicar otro truco mas para dar estilo a los comentarios. En concreto hoy vamos a ver como incluir una numeración automática en los comentarios del estilo de la que podéis apreciar en la imágen que acompaña esta entrada.
Al igual que ocurría con los Gravatars esto es bastante sencillo de implementar y basta con añadir unas pocas lineas de código. Voy a tratar de explicarlo lo mas sencillo posible y ya veréis que se entiende muy fácil, incluso sin saber nada de PHP ni CSS.
Lo primero que tenemos que hacer es abrir para editar el archivo comments.php de nuestra plantilla. Ahí es donde realizaremos el grueso de las modificaciones, que tampoco son tantas.
En primer lugar localizamos la linea que dice
<?php if ( $comments ) : ?>
e inmediatamente sobre dicha linea añadimos
<?php $i = 0; ?>
<?php if ( $comments ) : ?>
Lo único que hemos hecho en la nueva linea es preparar un contador $i, inicialmente a cero, para llevar la cuenta de los comentarios y saber que número visualizar o imprimir en cada momento.
Ahora vamos a buscar la linea de comienzo del bucle “foreach“, que es el que se encarga con cada repetición de visualizar uno por uno los comentarios que existan. Inmediatamente bajo ella incluimos una nueva linea que incremente el contador anterior por cada comentario a imprimir.
<?php foreach ($comments as $comment) : ?>
<?php $i++; ?>
Ahora tan solo te resta decidir, dentro del bucle foreach, donde quieres que aparezca el número del comentario y añadir en ese punto la siguiente porción de código - yo lo hice justo debajo de la linea de incremento anterior - . No es mas que una linea en PHP que imprime el numero de comentario correspondiente cada vez, mas un estilo asociado “numcomentario” para dar formato al número.
<span class="numcomentario">
<?php echo $i; ?>
</span>
La anterior clase has de incluirla dentro de tu hoja de estilos, normalmente “style.css” y lo puedes personalizar tanto como quieras para adaptarlo a tu gusto. Yo he añadido esto en mi hoja de estilos.
.numcomentario {
float:right;
font-size:36px;
font-family:"Trebuchet MS";
font-style:italic;
color:#999
}
El código anterior simplemente le dicta al navegador el formato que deseo para los números. Esto es, quiero que floten a la derecha, que tengan un tamaño de 36 pixeles y que se use la fuente Trebuchet MS en cursiva - Itálica- y que vayan en color gris 999.
Fácil, ¿Verdad? Venga, que ahora quiero ver vuestros resultados.
Últimos comentarios