Le blog du festival des Hauteurs recevait suffisamment de commentaires de festivaliers pour que leur présentation devienne un vrai sujet de design, pas un détail technique laissé au thème par défaut. Le rendu standard de wp_list_comments(), correct mais générique, ne distinguait pas assez clairement les réponses de l’organisation des commentaires du public. Ce tutoriel construit un comments.php personnalisé, avec un callback de rendu sur mesure et un formulaire filtré, sans jamais réinventer la mécanique de commentaires du cœur.
L’approche retenue conserve entièrement le système de modération et de stockage de WordPress : seul le balisage HTML généré est modifié, via les points d’extension prévus à cet effet.
La structure de base de comments.php
Le fichier comments.php d’un thème classique suit toujours la même charpente : une vérification de protection, l’affichage de la liste des commentaires existants si le contenu n’est pas protégé par mot de passe, puis le formulaire :
<?php
if ( post_password_required() ) {
return;
}
?>
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf(
esc_html( _n( '%s commentaire', '%s commentaires', get_comments_number(), 'agence' ) ),
number_format_i18n( get_comments_number() )
);
?>
</h2>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'callback' => 'agence_comment_callback',
) );
?>
</ol>
<?php endif; ?>
<?php comment_form( agence_comment_form_args() ); ?>
</div>
Écrire un callback de commentaire sur mesure
Le paramètre callback de wp_list_comments() pointe vers une fonction responsable du balisage de chaque commentaire individuel. C’est là que se joue la distinction visuelle entre un commentaire de l’organisation et celui d’un visiteur :
function agence_comment_callback( $comment, $args, $depth ) {
$is_author = user_can( $comment->user_id, 'edit_posts' );
?>
<li id="comment-<?php comment_ID(); ?>" <?php comment_class( $is_author ? 'is-organizer' : '' ); ?>>
<article class="comment-body">
<?php echo get_avatar( $comment, 48 ); ?>
<div class="comment-meta">
<span class="comment-author"><?php comment_author(); ?></span>
<?php if ( $is_author ) : ?>
<span class="comment-badge"><?php esc_html_e( 'Organisation', 'agence' ); ?></span>
<?php endif; ?>
<time datetime="<?php comment_time( 'c' ); ?>"><?php comment_date(); ?></time>
</div>
<div class="comment-content"><?php comment_text(); ?></div>
<?php
comment_reply_link( array_merge( $args, array(
'depth' => $depth,
'max_depth' => $args['max_depth'],
) ) );
?>
</article>
Un point souvent oublié : le callback ne doit jamais fermer la balise </li> lui-même. C’est wp_list_comments() qui s’en charge automatiquement selon la profondeur du fil de discussion, en tenant compte des réponses imbriquées à venir.
Filtrer comment_form() plutôt que le réécrire
Réécrire entièrement le formulaire de commentaire fait perdre la gestion native des champs requis, des cookies de consentement ou de la protection anti-spam. Il est presque toujours préférable de passer un tableau d’arguments personnalisé à comment_form() :
function agence_comment_form_args() {
return array(
'title_reply' => __( 'Laisser un commentaire', 'agence' ),
'comment_notes_after' => '',
'label_submit' => __( 'Publier', 'agence' ),
'class_submit' => 'c-button c-button--primary',
'fields' => array(
'author' => '<p class="comment-form-author"><label for="author">' . __( 'Nom', 'agence' ) . '</label> <input id="author" name="author" type="text" required /></p>',
'email' => '<p class="comment-form-email"><label for="email">' . __( 'E-mail', 'agence' ) . '</label> <input id="email" name="email" type="email" required /></p>',
),
);
}
Styler les fils de réponses imbriqués
Au-delà de trois niveaux d’imbrication, un fil de commentaires devient difficile à suivre visuellement, surtout sur mobile où la marge cumulative finit par écraser la largeur disponible. Le réglage « Activer les commentaires imbriqués jusqu’à [x] niveaux » dans Réglages > Discussion mérite d’être limité à trois, et le CSS doit réduire progressivement le retrait plutôt que d’appliquer la même marge à chaque niveau :
- Premier niveau : retrait complet, avatar visible.
- Deuxième niveau : retrait réduit de moitié.
- Troisième niveau : retrait minimal, avatar plus petit ou masqué sur mobile.
Un formulaire de commentaire trop personnalisé finit souvent par recréer, moins bien, ce que comment_form() sait déjà faire correctement. Filtrer plutôt que réécrire évite ce travail en double.
Ce qu’il faut retenir
Un callback dédié à wp_list_comments() et des arguments filtrés sur comment_form() suffisent, dans la quasi-totalité des cas, à obtenir un espace de commentaires entièrement sur mesure sans sortir des mécanismes natifs de WordPress. La modération et la lutte anti-spam, sujets à part entière, n’entrent pas dans le périmètre de cet article.
