Antes de la versión 2.7 podíamos interferir directamente en el bucle que generaba WP para visualizar la lista de comentarios insertando nuestra estructura html. Pero a partir de esa versión apareció la función wp_list_comments() que lo hace por sí misma. Por lo que si lo que queremos es cambiar sólo el look&feel de nuestra lista de comentarios podemos establecer nuevos estilos para las clases que nos genera esta función.
Pero podemos personalizara más allá de los estilos nuestra lista de comentarios, cambiando la estructura HTML que genera la función wp_list_comments() de WP. Esta función se usa normalmente en la plantilla comments.php. Esta plantilla, a su vez, es invocada automáticamente al usar comments_template() usualmente en single.php. Si invocamos la plantilla de comentarios y no existe comments.php en nuestro tema, WP visualizará la plantilla por defecto que es algo ruda, todo hay que decirlo. Así que el primer paso para customizar el HTML de la lista de comentarios pasa por tener en nuestro tema una plantilla comments.php e invocarla desde single.php con comments_template().
<?php
/*
* comments.php
*/
comment_form(); // Visualiza el formulario de comentarios
wp_list_comments(); // Visualiza la lista de comentarios
?>La salida HTML estándar de la lista de comentarios sería algo parecido a esto:
<ul class="list-comments">
<li class="comment even thread-even depth-1" id="comment-2">
<div id="div-comment-2" class="comment-body">
<div class="comment-author vcard">
<img alt=''
src='https://secure.gravatar.com/avatar/8c01fc19ac03afba81f3eea942c64b72?s=32&d=monsterid&r=g'
srcset='https://secure.gravatar.com/avatar/8c01fc19ac03afba81f3eea942c64b72?s=64&d=monsterid&r=g 2x'
class='avatar avatar-32 photo' height='32' width='32' loading='lazy' decoding='async' /> <cite
class="fn">Katsune</cite> <span class="says">says:</span>
</div>
<div class="comment-meta commentmetadata">
<a
href="https://mode.ieszaidinvergeles.es/ski2023/2023/04/11/the-planetski-spring-ski-road-trip/#comment-2">April
12, 2023 at 10:33 am</a>
</div>
<p>This is a comment</p>
<div class="reply"><a rel='nofollow' class='comment-reply-link'
href='https://mode.ieszaidinvergeles.es/ski2023/2023/04/11/the-planetski-spring-ski-road-trip/?replytocom=2#respond'
data-commentid="2" data-postid="45" data-belowelement="div-comment-2" data-respondelement="respond"
data-replyto="Reply to Katsune" aria-label='Reply to Katsune'>Reply</a></div>
</div>
</li><!-- #comment-## -->
</ul>Pero si queremos cambiar esta estructura deberemos especificar una función de callback como argumento de la función wp_list_comments() usando la key ‘callback’. Por ejemplo:
<?php
/*
* comments.php
*/
comment_form(); // Visualiza el formulario de comentarios
$args = array(
'callback' => 'customize_comment_html',
);
wp_list_comments( $args ); // Visualiza la lista de comentarios
?>En este ejemplo hemos indicado que vamos a usar una función de callback llamada customize_comment_html que deberemos definir en nuestra plantilla functions.php. En esa función podemos indicar la estructura HTML que más nos convenga y ayudarnos de las funciones correspondientes para visualizar cada una de las partes del comentario, a saber, el avatar, el usuario, la fecha de envío del comentario, el texto de comentario y alguna más. Por ejemplo:
// comprobamos que la función existe
if ( ! function_exists( 'customize_comment_html' ) ) :
function customize_comment_html( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
// en el caso de que el comentario no sea humano
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' :
// código HTML para pings...
break;
// en el caso de que el comentario sea humano
default :
// si el comentario está pendiente de aprobación
if ($comment->comment_approved == '0') {
// mensaje y código HTML para comentarios pendientes de aprobación
echo '<span class="">Tu comentario debe aprobarse antes de ser publicado</span>';
// si el comentario está aprobado
} else {
// código HTML para cada comentario
// incluir la comment_reply_link() para habilitar la respuesta a un comentario:
// comment_reply_link( array_merge( $args, array( 'reply_text' => 'Responder a este comentario', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) );
} // end if comment is approved
break;
endswitch;
} // end function custom_comment
endif; // end comprobación custom_comment()
Para visualizar la fecha y hora de envío del comentario usamos las funciones get_comment_date() y get_comment_time() respectivamente. Para el cuerpo del mensaje usamos comment_text() y para el botón de réplica comment_reply_link(). La función get_avatar_url() nos devuelve la URL del avatar asociado a la cuenta de mail del comentarista. Consuta el CODEX de WP para más información al respecto.
Por último, el botón de respuesta normalmente tiene una clase que le da un estilo particular. Podemos filtrar la salida de comment_reply_link() para inyectar nuestra propia clase de la siguiente forma (también en functions.php, por supuesto):
function neomode_comment_reply_link_class( $class ) {
$class = str_replace( "class='comment-reply-link", "class='comment-reply", $class );
return $class;
}
add_filter( 'comment_reply_link', 'neomode_comment_reply_link_class' );
Deja una respuesta