web-dev-qa-db-fra.com

Changer le HTML Produit par wp_list_comments ()

Je développe un thème WordPress pour lequel j'aimerais que l'horodatage de chaque commentaire soit intégré dans un élément <span> afin de le styler avec des règles CSS. Cependant, la fonction wp_list_comments() telle que je l'utilise dans le modèle comments.php de mon thème ne semble pas fournir d'options permettant de modifier le code HTML généré:

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

qui produit des horodatages en tant que tels:

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

Comment puis-je modifier la sortie de la fonction pour inclure un élément <span> autour de chaque élément <time> sans modifier les fichiers de base?

J'ai essayé de regarder le functions.php de mon thème, ainsi que WordPress wp-includes/comment.php et wp-includes/comment-template.php. Aucun d'entre eux ne traite de la structure de balise des horodatages de commentaires générés par wp_list_comments(); il n'y avait donc rien pour me permettre de jouer.

commentstimestampwp-list-commentscomments-template
2
marlakash

Voici quelques options sur la façon de remplacer la mise en page native pour chaque commentaire:

Approche n ° 1 - Remplacer start_el() avec un programme personnalisé

Définissons notre format personnalisé wpse comment:

// 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 );

avec un lecteur de commentaires personnalisé, qui gère ce nouveau format (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

Notez comment nous traitons notre format de commentaire personnalisé. Nous réutilisons également la méthode start_el() à partir de parent class pour les formats natifs, en appelant parent::start_el().

Notez également que nous utilisons le output buffering de la même manière que la classe parente.

Approche n ° 2 - Remplacer html5_comment() avec un programme personnalisé

Nous pouvons également remplacer directement la méthode native Walker_Comment::html5_comment(), de la manière suivante:

// 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 );

où notre classe de marcheur personnalisée est définie comme:

/**
 * 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

Ici, nous pouvons stocker nos modifications dans la méthode Walker_Comment::html5_comment() . C'est plutôt long, donc je ne l'ai pas ajouté ici.

Approche # 3 - Rappel personnalisé

Ici, nous utiliserions l'attribut 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 );

où nous définissons le wpse_comment_callback() à nos besoins.

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

où nous pourrions commencer par simuler la méthode Walker_Comment::html5_comment() . Mais nous devons nous rappeler de remplacer toute référence à $this.

Il existe d'autres approches disponibles, mais nous espérons pouvoir les adapter à vos besoins.

8
birgire