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
e inmediatamente sobre dicha linea añadimos
<?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 $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.
<?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.
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.
Como siempre, me viene genial :-)
El resultado no lo vas a poder ver por el momento, ya llegara el momento jeje
¡Gracias!
Me va a venir bastante bien ésto para el proyecto que estoy haciendo, ya lo iré desvelando en el blog. Que por ello estoy un poco más ausente.
Pero te tengo preparado cosas que pueden interesarte, por cierto, si en algún momento necesitas algo relacionado con la programación no dudes en ponerte en contacto conmigo, siempre que esté a mi alcance y pueda echarte un cable, lo haré.
Un saludo.
Como comentario, decir que ésto también puedes aplicarlo a PHP, tan solo es necesario asignar a la variable $comments, el archivo de comentarios, que vendrá a ser algo así como:
$comments = $wp_comments(); // No estoy muy seguro del nombre, pero la estructura es así.
Ya el estilo, como bien comenta Public Enemy, puedes aplicarlo en diferentes bloques, bien con la etiqueta o la etiqueta , la principal diferencia está en que deja un salto de línea antes y después de la propia etiqueta, y por el contrario no.
Con salto de línea, se entiende .
Si queréis añadir un fondo al bloque, y que os queden los bordes redondeados, podéis usar las siguientes propiedades
float: right; //Desplazamos el bloque a la derecha.
font-size: xpx; //Tamaño de la fuente.
font-family: “Trebuchet MS”, Arial, …; // Fuentes a usar;
background-image:url(…); //Definimos la ruta de la imagen que queremos colocar de fondo.
background-repeat: -x; //Repite el fondo verticalmente hasta cubrir la supercie.
-moz-border-radius: 1px; //Con ésta propiedad, exclusiva de Firefox (no podréis visualizarlo con otro navegador), podréis poner los bordes redondeados.
Cuando tenga algo de tiempo, que ahora con recursividad (gran fastidio…) te dejaré como sería el CSS de mis comentarios =).
Sobre el proyecto, estoy haciendo un portal de encuentro y desarrollo de aplicaciones Web, donde pretendo enseñar por derecho HTML, CSS, PHP, JavaScript, y el resto de lenguajes y tecnologías orientadas a la Web, el problema es que ahora estoy liado con algunos exámenes de la facultad, que los tengo en Septiembre. Pero antes de terminar ese mes, seguro que tengo el portal terminado, o gran parte de él.
Ya te contaré. Un saludo =D.
Muy interesante, me guardo este post para mi futuro rediseño de mi blog.
Saludos ;-)
Llevaba un tiempo dándole vueltas al tema y hace un rato me he decidido a hacerlo, con lo q muchas gracias por el consejo, ya que me funciona bastante bien…
Para el próximo explica como hacer el típico enlace de “Citar!” Que cuando le des salga en el formulario @(nombredelcomentaristaquecitas) :)! esque parece una gilipollez pero ami eso no me sale jaja
Saludos!
Buen tutorial, saludos.
También puede hacerse en Blogger; dejo el enlace a las explicaciones de vagabundia por si alguno de tus lectores usa la “plataforma de lo que no llegamos al nivel de WP” (si consideras esto spam, lo siento, borra el comentario):
Numerar comentarios en Blogger
Yo no sé si probarlo,jeje.
Me guardo la entrada por si me animo …
@Raúl: Pues si hay que esperar para ver el resultado, se espera ;)
@illbnet: Akismet se tragó tus dos comentarios, no se porqué pero ya te rescaté del pozo del spam :P Me parece super interesante el truquillo para bordes redondeados en Firefox, no lo conocía. Ya nos avisarás cuando tengas listo ese portal.
@Felipe_RM: Esperamos ansiosos ver ese rediseño tio.
@Capitán Tomate: Te han quedado de fábula los números. Me alegro que te sirviese de ayuda.
@/grunch0: ¿Como en los foros? Pues suena interesante, habrá que ponerse manos a la obra e intentarlo.
@Moister: Me alegro que te gustase. Un saludo a ti también amigo.
@Yomisma: No te preocupes, no me parece spam para nada. Un saludo.
@Lucía: Venga anímate. No seas cobardica, que no se diga! ;)
@Public Enemy: Exacto! Típico ¡Citar! chulo que merece la pena tener para no tener que escribir todo el rato @personaje.. xD
http://developer.mozilla.org/en/docs/CSS:-moz-border-radius
Ahí te dejo lo de los bordes. Existen otras alternativas, usar imágenes y demás, por ahí tengo algo, ya te lo mando vía contacto.
Un saludo.
Excelente amigo, entrada para recomendar ;)
[...] tu plantilla o theme Wordpress. En los dos anteriores posts que trataban el tema, hablamos de como numerar los comentarios en Wordpress y como incluir Gravatars en los comentarios de una manera [...]
Gracias por el truco, ya lo implementé en mi blog y va de maravilla.
Saludos.
Faaahhh.. que mucho estoy aprendiendo, me estoy haciendo para mi theme y me di cuenta que lo que se es muy muy basico, estoy aprendiendo un monton por aca! … y me tengo para quedarme para rato ;)
Un abrazo, mas que util!