Cambiar el HTML producido por wp_list_comments()

2 feb 2016, 23:47:11
Vistas: 20K
Votos: 10

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.

9
Comentarios

¿Has visto el código fuente de wp_list_comments()? ¿Estás seguro de que esta es la función responsable y no lo es, por ejemplo, la plantilla comments.php o una parte completamente diferente?

kaiser kaiser
2 feb 2016 23:51:42

¿Estás seguro de que realmente necesitas un envoltorio <span>? ¿Por qué no aplicar los estilos directamente al elemento <time>?

bosco bosco
3 feb 2016 00:11:12

Estoy de acuerdo con @bosco, parece que el <span> no es necesario aquí. De lo contrario, deberías mostrar los argumentos de la función wp_list_comments(), para ver si está usando un callback o un walker personalizado. Lo más probable es que estés usando el Walker_Comment::html5_comment() incorporado. Una pregunta relacionada se hizo aquí ayer.

birgire birgire
3 feb 2016 00:43:51

@birgie mi error - en realidad eliminé su uso de wp_list_comments() porque pensé que era innecesario. Corregido O.o

bosco bosco
3 feb 2016 00:50:51

encontré EXACTAMENTE lo que necesitaba en este archivo: wp-includes/class-walker-comment.php - aquí es donde pude cambiar el html de la fecha del comentario. Quiero darle un estilo diferente al tiempo que a la fecha, así que los necesitaba en etiquetas separadas. ¡Gracias a todos!

marlakash marlakash
3 feb 2016 09:37:57

¡Espero que no estés modificando archivos del núcleo directamente! @marlakash

birgire birgire
3 feb 2016 13:33:24

me encantaría hacer esto de otra manera, pero no estoy seguro de cómo... no tengo mucha experiencia escribiendo plugins y ese tipo de cosas. ¿algún consejo? @birgire

marlakash marlakash
4 feb 2016 00:23:51

por cierto, creo que es mejor mantener el título de mi pregunta anterior. nunca hubiera encontrado esta respuesta en Google. es demasiado específico... @birgire

marlakash marlakash
4 feb 2016 10:03:52

he preparado algunas opciones para ti, espero que puedas ajustarlas a tus necesidades @marlakash

birgire birgire
4 feb 2016 13:25:22
Mostrar los 4 comentarios restantes
Todas las respuestas a la pregunta 1
2
14

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.

4 feb 2016 13:24:35
Comentarios

¿Por qué no hay un filtro para esto en lugar de usar POO?

Brad Dalton Brad Dalton
12 feb 2022 10:48:11

La estructura del árbol de comentarios de salida probablemente es demasiado compleja para ser ajustable mediante un único filtro de texto.

birgire birgire
17 feb 2022 18:14:12