# Personnaliser comments.php et wp_list_comments dans un thème classique

> Callback de commentaire sur mesure, formulaire comment_form() filtré et fils de réponses stylés, pour un espace commentaires soigné.

- Auteur : Clément Hadrot
- Publié le : 2021-06-23
- Mis à jour le : 2021-06-23
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/personnaliser-comments-php-wp-list-comments/

## L’essentiel

- Un callback dédié pour un balisage de commentaire propre
- comment_form() se filtre sans être réécrit entièrement
- Les fils de réponses imbriqués demandent un CSS spécifique

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

> L'essentiel à retenir : Un callback dédié pour un balisage de commentaire propre ; comment_form() se filtre sans être réécrit entièrement ; Les fils de réponses imbriqués demandent un CSS spécifique

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.