Cambiar el HTML producido por wp_list_comments()
Estoy desarrollando un tema de WordPress para el cual me gustaría que cada marca de tiempo de los comentarios esté envuelta en un elemento <span>
para poder estilizarlo con reglas CSS. Sin embargo, la función wp_list_comments()
como la uso en la plantilla comments.php
de mi tema no parece proporcionar opciones para alterar el HTML generado:
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'format' => 'html5',
'short_ping' => true,
) );
?>
</ol>
que produce marcas de tiempo así:
<time datetime="2015-12-21T19:09:49+00:00"> 21 de diciembre de 2015 a las 19:09 </time>
¿Cómo puedo modificar la salida de la función para incluir un elemento <span>
alrededor de cada elemento <time>
sin alterar los archivos del núcleo?
He intentado buscar en el archivo functions.php
de mi tema, así como en los archivos wp-includes/comment.php
y wp-includes/comment-template.php
de WordPress. Ninguno de ellos trata con la estructura real de las etiquetas de las marcas de tiempo de los comentarios generadas por wp_list_comments()
, así que no había nada con lo que pudiera trabajar.

Aquí hay algunas opciones sobre cómo podemos sobrescribir el diseño nativo para cada comentario:
Enfoque #1 - Sobrescribir start_el()
con un walker personalizado
Definamos nuestro formato de comentario personalizado wpse:
// Argumentos para wp_list_comments()
$args = [
'style' => 'ol',
'format' => 'html5',
'short_ping' => true,
];
// Usar nuestro walker personalizado si está disponible
if( class_exists( 'WPSE_Walker_Comment' ) )
{
$args['format'] = 'wpse';
$args['walker'] = new WPSE_Walker_Comment;
}
wp_list_comments( $args );
con un walker de comentarios personalizado, que maneje este nuevo formato (PHP 5.4+):
/**
* Walker de comentarios personalizado
*
* @users Walker_Comment
*/
class WPSE_Walker_Comment extends Walker_Comment
{
public function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 )
{
// Nuestro formato de comentario personalizado 'wpse'
if ( 'wpse' === $args['format'] )
{
$depth++;
$GLOBALS['comment_depth'] = $depth;
$GLOBALS['comment'] = $comment;
// Iniciar el buffer de salida
ob_start();
// Usemos la plantilla nativa de comentarios html5
$this->html5_comment( $comment, $depth, $args );
// Nuestras modificaciones (envolver <time> con <span>)
$output .= str_replace(
[ '<time ', '</time>' ],
['<span><time ', '</time></span>' ],
ob_get_clean()
);
}
else
{
// Respaldo para los formatos de comentarios nativos
parent::start_el( $output, $comment, $depth, $args, $id );
}
}
} // fin de la clase
Observa cómo manejamos nuestro formato de comentario personalizado. También reutilizamos el método start_el()
de la clase padre para los formatos nativos, llamando a parent::start_el()
.
También nota que usamos el buffer de salida de manera similar a la clase padre.
Enfoque #2 - Sobrescribir html5_comment()
con un walker personalizado
También podemos sobrescribir directamente el método nativo Walker_Comment::html5_comment()
, de la siguiente manera:
// Argumentos para wp_list_comments()
$args = [
'style' => 'ol',
'format' => 'html5',
'short_ping' => true,
'walker' => new WPSE_Walker_Comment,
];
wp_list_comments( $args );
donde nuestra clase de walker personalizado está definida en functions.php
como:
if ( !class_exists( 'WPSE_Walker_Comment' ) ) {
/**
* Walker de comentarios personalizado
*
* @users Walker_Comment
*/
class WPSE_Walker_Comment extends Walker_Comment {
public function html5_comment( $comment, $depth, $args ) {
// Coloca aquí las modificaciones del método Walker_Comment::html5_comment()
}
}
// fin de WPSE_Walker_Comment
} // fin de la condición '!class_exists'
Aquí podemos almacenar nuestras modificaciones al método Walker_Comment::html5_comment()
. Es bastante largo, así que no lo agregué aquí.
Enfoque #3 - Callback personalizado
Aquí usaríamos el atributo callback
:
// Argumentos para wp_list_comments()
$args = [
'style' => 'ol',
'format' => 'html5',
'short_ping' => true,
];
// Usar nuestro callback personalizado si está disponible
if( function_exists( 'wpse_comment_callback' ) )
{
$args['format'] = 'wpse';
$args['callback'] = 'wpse_comment_callback';
}
wp_list_comments( $args );
donde definimos wpse_comment_callback()
según nuestras necesidades.
/**
* Callback de comentarios personalizado
*/
function wpse_comment_callback( $comment, $depth, $args )
{
// Modifica el método Walker_Comment::html5_comment() según nuestras necesidades
// y colócalo aquí
}
donde podríamos comenzar simulando el método Walker_Comment::html5_comment()
. Pero debemos recordar reemplazar todas las referencias a $this
.
Enfoque #4 - Sobrescribir argumentos de wp_list_comments()
con un filtro
También podemos usar el filtro wp_list_comments_args
para modificar los argumentos de wp_list_comments()
con los métodos anteriores.
Hay otros enfoques disponibles, pero espero que puedas ajustar estos a tus necesidades.
