Alterar HTML Produzido por wp_list_comments ()

2

Estou desenvolvendo um tema WordPress para o qual eu gostaria que o timestamp de cada comentário fosse incluído em um elemento <span> para criar um estilo com regras CSS. No entanto, a função wp_list_comments() que eu uso no modelo comments.php do meu tema não parece fornecer opções para alterar o HTML produzido:

<ol class="comment-list">
    <?php
        wp_list_comments( array(
            'style'       => 'ol',
            'format'      => 'html5',
            'short_ping'  => true,
        ) );
    ?>
</ol>

que produz timestamps como tal:

<time datetime="2015-12-21T19:09:49+00:00"> december 21st,  2015 on 19:09 </time>

Como posso alterar a saída da função para incluir um elemento <span> em torno de cada elemento <time> sem alterar os arquivos principais?

Eu tentei ver o functions.php do meu tema, além do WordPress wp-includes/comment.php e wp-includes/comment-template.php . Nenhum deles lida com a estrutura de tag real dos timestamps de comentários gerados por wp_list_comments() , então não havia nada para eu jogar.

    
por marlakash 02.02.2016 / 22:47

1 resposta

8

Aqui estão algumas opções sobre como podemos substituir o layout nativo para cada comentário:

Abordagem nº 1 - substituindo start_el() por um passeador personalizado

Vamos definir nosso formato de comentário personalizado wpse :

// Arguments for wp_list_comments() 
$args = [
    'style'       => 'ol',
    'format'      => 'html5',
    'short_ping'  => true,
];

// Use our custom walker if it's available
if( class_exists( 'WPSE_Walker_Comment' ) )
{
    $args['format'] = 'wpse';
    $args['walker'] = new WPSE_Walker_Comment;
}

wp_list_comments( $args );

com um walker de comentários personalizado, que lida com este novo formato (PHP 5.4 +):

/**
 * Custom comment walker
 *
 * @users Walker_Comment
 */
class WPSE_Walker_Comment extends Walker_Comment
{
    public function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 )
    {
       // Our custom 'wpse' comment format
       if ( 'wpse' === $args['format'] )
       {
           $depth++;
           $GLOBALS['comment_depth'] = $depth;
           $GLOBALS['comment'] = $comment;

           // Start output buffering
           ob_start();

           // Let's use the native html5 comment template
           $this->html5_comment( $comment, $depth, $args );

           // Our modifications (wrap <time> with <span>)
           $output .= str_replace( 
               [ '<time ', '</time>' ], 
               ['<span><time ', '</time></span>' ], 
               ob_get_clean() 
           );
       }
       else
       {
           // Fallback for the native comment formats
           parent::start_el( $output, $comment, $depth, $args, $id );
       }    
    }
} // end class

Observe como lidamos com nosso formato de comentário personalizado. Também reutilizamos o método start_el() da classe pai para os formatos nativos, chamando parent::start_el() .

Observe também que usamos o buffer de saída da mesma forma que a classe pai.

Abordagem # 2 - sobrescrevendo html5_comment() com um passeador personalizado

Também podemos substituir diretamente o método nativo Walker_Comment::html5_comment() da seguinte maneira:

// Arguments for wp_list_comments() 
$args = [
    'style'       => 'ol',
    'format'      => 'html5',
    'short_ping'  => true,
];

// Use our custom walker if it's available
if( class_exists( 'WPSE_Walker_Comment' ) )
{
    $args['walker'] = new WPSE_Walker_Comment;
}

wp_list_comments( $args );

onde nossa classe de passeador personalizado é definida como:

/**
 * Custom comment walker
 *
 * @users Walker_Comment
 */
class WPSE_Walker_Comment extends Walker_Comment
{
    public function html5_comment( $comment, $depth, $args )
    {
        // Place the modifications of the Walker_Comment::html5_comment() method here
    }
} // end class

Aqui, podemos armazenar nossas modificações no % métodoWalker_Comment::html5_comment() . É bem longo, então não adicionei aqui.

Abordagem # 3 - retorno de chamada personalizado

Aqui, usamos o atributo callback :

// Arguments for wp_list_comments() 
$args = [
    'style'       => 'ol',
    'format'      => 'html5',
    'short_ping'  => true,
];

// Use our custom callback if it's available
if( function_exists( 'wpse_comment_callback' ) )
{
    $args['format'] = 'wpse';
    $args['callback'] = 'wpse_comment_callback';
}

wp_list_comments( $args );

onde definimos wpse_comment_callback() para as nossas necessidades.

/**
 * Custom comment callback
 */
function wpse_comment_callback( $comment, $depth, $args )
{
    // Modify the Walker_Comment::html5_comment() method to our needs 
    // and place it here
}

onde poderíamos começar por simular o Walker_Comment::html5_comment() . Mas devemos lembrar de substituir toda referência a $this .

Existem outras abordagens disponíveis, mas esperamos que você possa ajustá-las às suas necessidades.

    
por birgire 04.02.2016 / 12:24