Como estilizar los comentarios en WordPress 2.7 y 2.8

@ 14 . agosto . 2009

Desde la versión 2.7, WordPress nos ha brindado el más sencillo código para:

  • Tener comentarios paginados.
  • Diferenciar el autor de un post.
  • Diferenciar los usuarios registrados.
  • Anidar Comentarios.
  • Paginar Comentarios.
  • Alternar el diseño para comentarios pares e impares.
  • Y un largo etc.

Todo esto ya lo hace WordPress automáticamente desde su núcleo, sin plugins ni código extra, nosotros sólo debemos personalizar el aspecto final editando el CSS de nuestro blog, con las debidas clases, y nada más. La vida es bella en este sentido y en este post les enseñaré el método más rápido que he utilizado para personalizar lso comentarios de mi blog, como los ven abajo.

Nuevo método de insertar comentarios

Antes (WP 2.6 e inferiores) la manera de insertar comentarios era algo como esto:


 <?php if($comments) : ?>  
     <ol>  
     <?php foreach($comments as $comment) : ?>  
         <li id="comment-<?php comment_ID(); ?>">  
             <?php if ($comment->comment_approved == '0') : ?>  
                 <p>Your comment is awaiting approval</p>  
             <?php endif; ?>  
             <?php comment_text(); ?>  
             <cite><?php comment_type(); ?> by <?php comment_author_link(); ?> on <?php comment_date(); ?> at <?php comment_time(); ?></cite>  
         </li>  
     <?php endforeach; ?>  
     </ol>  
 <?php else : ?>  
     <p>No comments yet</p>  
 <?php endif; ?> 

Y eso es sin paginación ni nada.

Desde WP 2.7 sólo necesitamos poner esto:

<?php if ( have_comments() ) : ?>

<?php paginate_comments_links(); ?> 

 
 <ol class="commentlist">
 <?php wp_list_comments(); ?>
 </ol>

 <?php endif; ?> 

Y nada más. Las funciones mágicas son wp_list_comments(); y paginate_comments_links();. ambas hacen todo el trabajo solitas de paginas, poner, gravatar, fecha, cometario, anidar, diferenciar al autor, diferenciar pingbacks, etc.

Una vez que tenemos esto, debemos conocer que estilos podemos usar.

Estilos de los comentarios

Anieto2K y CD Harrison nos han dado un gran listado de las clases CSS de los comentarios.

El listado completo es este:

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} – (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} – (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Como podran ver se cubre todo, hasta 5 grados de profundidad en los comentarios anidados. (los cuales no me gustan mucho y no los he aplicado en Aeromental).

Esquema gráfico de los estilos de los comentarios

Podemos ver claramente en este gráfico todos los IDs y Clases que WordPress genera automáticamente, gracias al dibujo realizado por WP-Fun:

Grafico estructura comentarios wordpress

Lo que he usado para el CSS

Si te parece mucho, pues fijate mis cometarios y te diré lo único que necesité usar en mi CSS.

Comentarios sin CSS

En primer lugar, sin nada de CSS, WordPress te deja los comentarios así:
Wordpress 2.8 comentarios

Comentarios con CSS personalizado

Y con estilo, separación de pingbacks y personalización del tamaño e imagen del avatar, mis comentarios quedaron así:
Wordpress 2.8 comentarios con CSS

En grandes rasgos te explicaré como lo hice:

Estilar comentarios

Para estilizar los comentarios solo usé las siguientes clases:

.page-numbers
.current
.comment-body
ol.commentlist
li.bypostauthor .fn
.vcard img.avatar
.vcard cite.fn
.vcard cite.fn a:link
.comment-meta

Explicando cada uno:
.page-numbers Números de la paginación
.current Sirve para resaltar el número actual de la paginación de comentarios.
.comment-body El texto de un comentario
ol.commentlist La lista de comentarios.
li.bypostauthor .fn Con esto se diferencia al autor del blog y del post, si el blog trae varios autores cada uno puede tener su propio estilo.
.vcard img.avatar Para el gravatar.
.vcard cite.fn Para los nicks sin URL
.vcard cite.fn a:link Para los nicks con URL
.comment-meta Para la fecha de un comentario.

Personalizar el Gravatar

Esto ya lo explique antes, así que solo vayan a este post.

Separar los Pingbacks y Trackbacks de los comentarios

Esto si feo, feo, FEISIMO, pero les resumo mi trágica aventura codificando y probando de todo por un buen tiempo, de hecho te recomiendo que mejor no lo hagas y les des estilo propio a los pingbacks en CSS y nada más.

Si realmente quieres separar los pingbacks, debes seguir los pasos que te explican anieto2k, y Sivel.

:advertencia: OJO: La recomendación de Sibel de como volver a realizar el conteo de comentarios sin pings editando functions.php y como dejarlos como una lista, a mi me colgó todo el blog y tuve que borrar. No me funcionó.

Poner Pingbacks arrriba de los comentarios

Con esto podrás poner todos los pingbacks debajo de los comentarios. Cada uno con link, fecha y contenido.
Por algún extraño motivo si pongo los pingbacks arriba de mis comentarios siguiendo los pasos ahí indicados, no me funciona el if de pingbacks ni la función de listar pings. Un desastre.

Osea si lo que tenemos es:

if comentarios
endif

if pings
endif

Y quiero poner a:

if pings
endif

if comentarios
endif

No funciona y todo se arruina. Muy raro el motivo pero hasta la paginación me desaparece.

La solución:

Mi solución fue usar el viejo método de genear una lista de pingabacks, sin usar la nueva función de:

<?php if ( ! empty($comments_by_type['pings']) ) : ?>

Use el antiguo método, el cual de paso me permite generar una lista con solo URL y fecha, sin contenido. O como uno quiera, hay más libertad de decidir que entra y que no, así me quedó el código:

<?php if ( have_comments() ) : ?>

	<h3 id="comments"><?php comments_number('0 Comentarios', 'Un comentario', '% Comentarios' );?></h3>

<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="pings">Pingbacks y Trackbacks</h3>

<ol class="pings-lista">

        <?php foreach ($comments as $comment) : ?>
            <?php if (get_comment_type() == "pingback" || get_comment_type() == "trackback" ) : ?>
               <li><?php comment_author_link();?> / <span class="pings-fecha"><?php comment_date('j \d\e F \d\e Y') ?></span></li>
            <?php endif; ?>
        <?php endforeach; ?>
        </ol>

<?php endif; ?>

Siempre verifiquen bien de cerrar todos los IFs.

Con esto si pude poner los pings arriba, numerados y sin contenido.

Bugs y problemas que encontré

  • No poder usar el <?php wp_list_comments('type=pings'); ?> antes del listado de comentarios, como lo mencioné antes.
  • Tengo mi paginación arriba y abajo de la lista de comentarios, y por algún extraño motivo, la paginación de arriba cuenta comentarios + pings y la de abajo sólo comentarios. :|
  • Un deseo propio que no pude cumplir fue el de numerar cada comentario, respetando la paginación.

Espero que esto les sea de guía y utilidad.

También les recomiendo leer las siguientes páginas que usé como refuerzo:

Autor del post: DanielSemper: @aeromental + Facebook

  • LA100RRA

    Excelente explicación y super completa, para todos los gustos ;)

  • Como Instalar Wordpress

    Hay la verdad se ve muy complicado y no se mucho de wordpress pero gracias voy a hacer de todo para que me salga.

  • Ramón Portillo

    Estoy un poco pez en el tema y me interesa, ¿dónde tengo que definir los estilos de los comentarios, en el style.css? He hecho algunas modificaciones en el mismo y no me resultan…

    gracias de antemano.

  • Si,

    Los estilos siempre se definen en el Style.

    Si usas “class” en el HTML, debes usar en el style .nombre
    Si usas “id” entonces usas #nombre

  • Ramón Portillo

    OK, pillo más o menos lo que me comentas.

    Sigo modificando, pero el problema estaba en que yo había llamado la función wp_comments_list() con style ‘div’ y creo que eso es lo que pasaba, lo he cambiado y ya rula.

    Gracias de todos modos.

  • Toni

    Amigo, no puedo editar el comentario del ADMIN?? como hago para darle color, intente de todo, pero me cuesta entender

  • Pingback: Kalpa Pharmaceuticals Source()