Améliorez l’engagement de votre site : Créez des commentaires imbriqués personnalisés sur WordPress.

Créer une fonctionnalité de commentaires imbriqués personnalisés sur WordPress

Saviez-vous qu’un site Web peut perdre jusqu’à 70 % de son trafic si les commentaires ne sont pas engageants ? Dans le monde numérique d’aujourd’hui, la capacité de fournir une plateforme de discussion efficace est essentielle pour fidéliser les visiteurs. Les commentaires imbriqués augmentent l’interaction, permettant aux utilisateurs de suivre des conversations plus complexes. Cet article se penche sur la manière de créer une fonctionnalité de commentaires imbriqués personnalisés sur votre site WordPress, en modifiant les templates de commentaires.

Comprendre la structure des commentaires WordPress

Avant de plonger dans les modifications de code, il est important de comprendre comment fonctionnent les commentaires dans WordPress. Par défaut, WordPress permet une hiérarchie de commentaires qui peut monter jusqu’à un certain nombre (habituellement 5) de niveaux d’imbrication. Cela signifie que les utilisateurs peuvent répondre à d’autres commentaires, mais la présentation par défaut peut être peu attirante.

Les commentaires sont stockés dans la base de données sous forme de post meta associée à chaque article ou page. Grace à cela, vous pouvez facilement récupérer et afficher ces données en les formatant selon vos besoins.

Personnaliser le template des commentaires

Pour créer des commentaires imbriqués personnalisés, la première étape consistera à modifier le template de commentaires de votre thème. La première étape consiste à localiser le fichier comments.php de votre thème actif. Si votre thème utilise une architecture enfant, il est recommandé de travailler sur ce dernier afin de préserver vos modifications lors de la mise à jour du thème parent.

Voici un exemple de la structure de base que vous pourriez trouver dans ce fichier :

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

Utilisez ce template pour explorer le procssus de personnalisation. Pour commencer, il suffit de choisir le style d’affichage que l’on souhaite.

Étapes de personnalisation

1. Modifier l’affichage des commentaires

Vous pouvez personnaliser l’affichage des commentaires en ajustant les arguments passés à la fonction wp_list_comments(). Voici un exemple de ce que vous pourriez faire :

<?php
wp_list_comments(array(
    'style' => 'ul',
    'avatar_size' => 64,
    'callback' => 'my_custom_comments',
));
?>

Dans ce cas, nous utilisons un callback personnalisé, my_custom_comments, qui nous permettra d’affiner encore davantage la manière dont chaque commentaire est rendu.

2. Créer une fonction de rendu des commentaires

D’abord, ajoutez cette fonction dans le fichier functions.php de votre thème :

<?php
function my_custom_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; 
    ?>
    <li ><article id="comment-<?php comment_ID(); ?>" >
        <footer class="comment-meta">
            <div class="comment-author"><?php echo get_avatar($comment, 64); ?></div>
            <div class="comment-meta"><?php printf(__('%s at %s', 'your-text-domain'), get_comment_date(),  get_comment_time()) ?></div>
        </footer>
        <div class="comment-content"><?php comment_text(); ?></div>
    </article></li>
    <?php
}
?>

Avec cette fonction, vous modifiez la manière dont un seul commentaire est affiché. N’hésitez pas à explorer la documentation de WordPress pour wp_list_comments afin d’en apprendre plus sur ses arguments et ses options.

3. Gérer les commentaires imbriqués

Pour permettre une meilleure imbrication, vérifiez que la fonction wp_list_comments() gère bien le niveau d’imbrication. Vous pouvez également ajouter des classes CSS spécifiques à chaque niveau d’imbrication pour un style personnalisé :

<li class="comment depth-<?php echo $depth; ?>">...

Vous pouvez ensuite styliser chaque niveau de manière spécifique avec du CSS. Par exemple :

.comment.depth-1 { margin-left: 20px; }
.comment.depth-2 { margin-left: 40px; }

Ajouter une fonctionnalité de réponse directe

Pour enrichir l’expérience des utilisateurs qui commentent, vous pouvez aussi créer une fonctionnalité de réponse directe, permettant aux utilisateurs de répondre à un commentaire spécifique de manière plus intuitive.

Activer les réponses directes

Commencez par activer les réponses imbriquées dans Réglages → Discussions dans votre interface d’administration. Cela permettra aux utilisateurs de répondre directement à d’autres commentaires.

Une fois ceci fait, vous devrez également modifier le template de commentaires pour inclure un lien de réponse. Cela pourrait ressembler à quelque chose de ce genre :

comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'])))

En intégrant ce lien sous les commentaires, les utilisateurs auront la possibilité de répondre directement sous chaque commentaire, augmentant ainsi l’interaction sur votre site.

Améliorer l’expérience utilisateur avec JavaScript

Les modifications apportées jusqu’à présent sont énormes, mais pourquoi ne pas rendre votre système de commentaires encore plus interactif ? En intégrant un peu de JavaScript, vous pouvez créer une fonctionnalité d’expansion qui montre ou cache les réponses sous un commentaire spécifique.

Implémentation de JavaScript

Voici un exemple de JavaScript qui peut être utilisé pour ajouter cette fonctionnalité :

document.querySelectorAll('.comment').forEach(comment => {
    comment.querySelector('.comment-reply-link').addEventListener('click', function(event) {
        const parentComment = comment.querySelector('.children');
        if (parentComment) {
            parentComment.classList.toggle('show');
        }
        event.preventDefault();
    });
});

Ce code bascule la classe « show » sur les réponses imbriquées lorsque l’utilisateur clique sur le lien de réponse, affichant ou masquant ainsi les nouveaux commentaires. Pensez à ajouter du CSS pour gérer l’affichage lorsque la classe « show » est active.

Tester et optimiser les commentaires imbriqués

Une fois que votre code est en place, il est crucial de tester son fonctionnement dans différents navigateurs et appareils. Utilisez des outils tels que Google Lighthouse pour évaluer les performances de votre page et détecter les éventuels problèmes d’accessibilité.

N’oubliez pas d’optimiser les performances de votre site en utilisant par exemple des systèmes de mise en cache. Vous pourriez envisager des solutions comme WP Rocket pour améliorer considérablement la vitesse de chargement de votre site.

Surveiller l’engagement des utilisateurs

À présent, n’oubliez pas de suivre les commentaires et l’engagement des utilisateurs. Utilisez des outils d’analyse pour mesurer l’impact des commentaires sur le comportement des visiteurs. Il peut être intéressant de comparer les statistiques avant et après l’implémentation de votre nouvelle fonctionnalité.

Conclusion

En personnalisant les commentaires imbriqués de votre site WordPress, vous améliorez non seulement l’interaction des utilisateurs, mais aussi potentiellement le trafic et l’engagement sur votre site. Avec une présentation soignée et une fonctionnalité de réponse directe, les utilisateurs se sentiront plus enclins à interagir.

Maintenant, partagez vos expériences ! Quelles techniques avez-vous utilisées pour améliorer l’expérience des utilisateurs sur votre site ? Avez-vous personnalisé les commentaires ? N’hésitez pas à laisser vos réflexions ou vos questions dans les commentaires ci-dessous.

Pour plus d’informations sur la personnalisation de WordPress, découvrez notre article sur la personnalisation de thèmes WordPress.