sudo: Jack of all trades, master of some

Personalizar lista de comentarios de WordPress

2 comentarios

Es indiscutible que WordPress es un CMS muy flexible y versátil, sus funciones están pensadas para utilizarse con facilidad y efectividad, sin embargo, el área de comentarios es uno de los apartados del desarrollo de temas que encuentro con muchas limitaciones para su personalización.
WordPress maneja el markup del listado de comentarios con la función wp_list_comments y este se genera por el template wp-includes/comment-template.php en xhtml o html5; con ninguna de las dos variantes tengo control absoluto del código HTML.

Supongamos que necesitamos este modesto y sencillo markup:

<ol>
  <li>
    <div>
      <cite><a href="#">Autor</a></cite>
    </div>
    <div>
      <a href="#">Fecha</a>
    </div>
    <div>
      <p>Contenido</p>
    </div>
    <a href="#">Responder</a>
  </li>
</ol>

Como decía al inicio, no es posible generar este código HTML solamente con la función wp_list_comments, la solución es utilizar el argumento callback de esta.

En el archivo comments.php del tema que se esté utilizando añadir:

<ol class="comment-list">
  <?php wp_list_comments('max_depth=5&style=ol&type=comments&reply_text=Responder&avatar_size=0&callback=comment_markup'); ?>
</ol>

Posteriormente, en el archivo functions.php agregar la siguiente función:

function comment_markup($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
?>
  <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
    <div>
      <cite><?php echo get_comment_author_link(); ?></cite>
        <?php if ( $comment->comment_approved == '0' ) : ?>
          <em>Tu comentario está en espera de moderación.</em>
        <?php endif; ?>
    </div>
    <div>
      <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">Hace <?php echo human_time_diff( get_comment_date('U'), current_time('timestamp') ); ?></a>
    </div>
    <div>
      <?php comment_text(); ?>
    </div>
    <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
  </li>
<?php
}

Nótese que en la función wp_list_comments se utilizaron los argumentos:

max_depth=5 para limitar los niveles de profundidad de los comentarios a 5.
style=ol para continuar con el estilo de lista ordenada, de lo contrario se utilizaría ul.
type=comment para permitir solamente comentarios.
reply_text=Responder texto del enlace para responder.
avatar_size=0 no usar avatars.
callback=comment_markup llamada a la función (el meollo del asunto).

Vale la pena comentar acerca de la función:

<?php echo human_time_diff( get_comment_date('U'), current_time('timestamp') ); ?>

Generalmente las fechas de los comentarios se muestran con el formato: mes día, año hora, por ejemplo: junio 21, 2014 a las 3:05pm, realmente no tiene mucho sentido (para mí) mantenter este formato, cada vez que sigo un hilo de comentarios en algún blog que use esta fecha me pongo a calcular hace qué tiempo fue que se generó el comentario (creo que para muchos es así).
La descripción de la función es bastante sencilla: determina la diferencia entre dos fechas y el resultado se devuelve en un formato más legible, por ejemplo: 1 hora, 20 minutos, 4 días, etc.

La sintaxis es la siguiente: <?php human_time_diff( $fechaInicial, $fechaFinal ); ?>, en este caso la fecha inicial es en la que se generó el comentario get_comment_date('U') y la final es la actual current_time('timestamp').

Mi criterio es que mientras más control tenemos sobre nuestro código, nuestros productos tendrán una mejor calidad y originalidad.

Referencias

WordPress Codex: Comments Only With A Custom Comment Display.

Comentarios desactivados
  1. Hyuuga_Neji 5 años atrás

    Lamentablemente en Reflejos no tenemos acceso al Codigo de nuestros blogs porque trabajan parecido a WordPress.com y no a WordPress.org o sea… puedes usar todo el WP que te permitamos pero los cambios a nivel HTML seran casi nulos. No obstante… interesante la línea que estas llevando en tus publicaciones.