Un système de réponse dans les commentaires

Mentions comment Authors est un plugin WordPress qui ajoute dans les commentaires la fonctionnalité de pouvoir mentionner un précédent commentateur.

Ce système facilite la discussion entre les participants qui peuvent se répondre. Il simplifie aussi la lecture des commentaires en permettant à vos lecteurs de pouvoir suivre le fil de la discussion d’une façon plus intuitive.

Le plugin s’adapte à tous les sites WordPress et peut être facilement personnalisé.

mention comments authors
Le plugin Mention comment’s Authors en action

Comment ça marche

Au fur et à mesure que les commentaires sont chargés, ont récupère les noms des précédents auteurs de commentaires.

Simultanément, on recherche ces noms dans le contenu des commentaires (sanitisés et commençant par @). Chaque occurrence trouvée est transformée en bouton qui permet de naviguer entre les auteurs mentionnés et leurs annotations respectifs.

Lorsqu’un internaute rédige une observation, un script « écoute » l’utilisation de la touche @. Si celle-ci est utilisée, un système d’autocomplétion vient lui suggérer de mentionner un des précédents participant.

Le système est non-intrusif et ne modifie pas le contenu des commentaires ; il n’intervient que lors de l’affichage. Cela permet de ne pas causer de problème ou de bugs d’affichage si l’on décide plus tard de désactiver le plugin.

Suggestion et autocomplétion

Le système d’autcomplétion se base sur le plugin jQuery « Sew » développé par Mural.ly. Ce plugin se base lui même sur le plugin jQuery CaretPosition.

Malheureusement il n’est plus compatible avec jQuery 1.9 car il utilise la méthode $.browser qui a été dépréciée. Cette méthode est utile pour afficher la fenêtre d’autocomplétion en dessous du curseur, dans la zone de texte (variation entre les navigateurs).

J’ai donc compacté tout ça en implémentant en plus une méthode volée à Modernizr pour détecter le navigateur et la version. Il n’y a donc plus de souci d’incompatibilité.

Dans le contenu de chaque commentaire de l’article, un marqueur invisible est ajouté avec le nom de l’auteur. Lorsque l’on clique sur une mention, le script recherche le marqueur antérieur correspondant le plus proche.

La fenêtre scroll alors vers ce commentaire qu’une classe permet également de mettre en avant via du CSS.

Envoie d’un email de notification

Lorsqu’un commentateur est mentionné, un mail lui est automatiquement envoyé pour le prévenir.

On peut cependant désactiver cette fonctionnalité grâce au filtre mca_send_email_on_mention :

// dont send notifications
add_filter( 'mca_send_email_on_mention', '__return_false' );

Ce code est à insérer dans le fichier fonctions du thème.

On peut aussi, grâce à un autre filtre (mca_filter_recipient), filtrer les personnes à qui le mail va être envoyé.

Cela peut être utile pour, par exemple, ne pas envoyer deux notifications si la personne mentionné s’est également abonné aux fil des commentaires (avec le plugin subscribe to comments).

add_filter( 'mca_filter_recipient','dont_send_user_who_already_subscribe', 100, 2 );
function dont_send_user_who_already_subscribe( $recipients, $comment ) {
    global $wpdb;
    $su = $wpdb->get_results( "
        SELECT comment_author 
        FROM {$wpdb->comments} 
        WHERE comment_subscribe = 'Y' 
        AND comment_post_ID = {$comment->comment_post_ID};", ARRAY_N );

    foreach( $su as $val )
        if( array_key_exists( sanitize_title( $val ), $recipients ) )
            unset( $recipients[ sanitize_title( $val ) ] );

    return $recipients;
}

Ce filtre permet de faire a peu près ce que l’on veut, car il prend en paramètre la liste des destinataires mais aussi le commentaire et les données qui lui sont liées. On peut donc appliquer toutes sortes de conditions.

Personnalisation

Les styles du plugin peuvent être très simplement surchargés, car il ne sont appliqués que sur une classe à chaque fois.

On peut customiser :

Il est également possible de désactiver l’inclusion de la feuille de style, en ajoutant le code suivant dans le fichier functions.php de son thème :

// dequeue styles
add_filter( 'mca-load-styles', '__return_false' );

En dehors des styles, on peut aussi personnaliser totalement les corps, sujets et formes des emails de notification, grâce à quelques filtres :

// Personnaliser le corps sujets des emails
add_filter( 'mca-email-subject', 'my_email_subject', 15 ,5 );
function my_email_subject( $subject, $comment, $name, $mail, $titre ) {
    // do stuff...
    return $subject;
}

// Personnaliser le corps des emails
add_filter( 'mca-email-message', 'my_email_message', 15 ,5 );
function my_email_message( $message, $comment, $name, $mail, $titre ) {
    // do stuff...
    return $message;
}

Compatibilité ajax

Le plugin dispose de 2 modes de fonctionnement : un mode classique, et un mode pour les sites en ajax comme celui-ci.

Pour installer le plugin sur un site basé sur une navigation en ajax il faut tout d’abord ajouter ce code dans son fichier functions (ou dans un plugin) :

// enable ajax mod
add_filter( 'mcaajaxenable', '__return_true' );

Ensuite il est également nécessaire d’appeler la fonction javascript mcaAjaxChange() à chaque fois que les commentaires sont chargés dans la page (par défaut on peut l’exécuter à chaque fois que le contenu de la page change).

Le mode ajax est légèrement (de manière infime) plus gourmand en javascript et en php que le mode classique.

Par rapport au système de Reply-to

Le système présenté ici est, à mon avis, beaucoup plus performant que le système natif de WordPress. Le principe des Reply-to et des commentaires imbriqués est :

Voilà donc un système qui met en avant « la discussion ». Il est simple à comprendre et utiliser, et grâce aux réseau sociaux il nous est déjà familié :-)

Il est actuellement disponible sur l’extend de WordPress en version 0.9.5 ou directement ici.

Vous pouvez expérimenter le plugin en laissant un commentaire sur ce site où système est en place :-P

16 commentaires

  1. Par Willy Bahuaud — Il y a 1 année

    Je laisse un premier commentaire pour que vous puissiez directement tester le plugin ;-)

  2. Par Daniel Roch — Il y a 1 année

    il semblerait que cela fonctionne à merveille.

    Excellente idée et excellente intégration : c’est parfait pour remplacer le bouton « Reply-to » de WordPress par quelque chose de plus ergonomique et SEO-friendly

  3. Par Alexandre — Il y a 1 année

    Vraiment sympa ;)

  4. Par Aurélien Denis — Il y a 1 année

    ça me semble bien sympa ton plugin ! Compatible Jetpack ou pas (j’ai pas testé encore) ? Merci.

  5. Par Willy Bahuaud — Il y a 1 année

    , Merci !!

    Normalement le plugin est compatible (il vient vraiment se greffer comme une fleur ^^) mais je n’ai pas eu l’occasion d’essayer jetPack. Donc si tu remarques un problème d’incompatibilité, n’hésites pas à me le faire remarquer :-)

  6. Par Vincent Brossas — Il y a 1 année

    vraiment cool ce plugin ;) félicitations !

  7. Par Aurélien Denis — Il y a 1 année

    quand on dit que « code is poetry » mais c’est vrai ! Je vais le tester dès que j’ai un moment ;)

  8. Par Arnaud Olivier — Il y a 1 année

    Merci facile à mettre en place et vraiment pratique pour une bonne communication dans les commentaires :) cc

  9. Par Laurent Matignon — Il y a 1 année

    : excellente idée, et quand on voit que le bouton « reply to » n’est finalement que très peu utilisée plus le fait que les habitudes des réseaux sociaux – et notamment Twitter – sont en train d’être adoptées par pas mal de monde, on se dit que cela peut fonctionner parfaitement bien !

    Une petite question : l’as-tu testé avec Buddypress ?

  10. Par Rosa — Il y a 1 année


    Je voulais te remercier pour ton plugin, super simple et qui fonctionne très bien. L’idée est vraiment très bonne. Je compte le faire sur wordpress.org, mais je me dis qu’il est bien aussi de remercier directement l’auteur (lorsque c’est possible) comme ici.
    Si je peux me permettre, j’utilise jetpack et c’est compatible sans le moindre souci… enfin, pour moi en tout cas.

  11. Par redaction web — Il y a 1 année

    Ce plugin est vraiment utile !! Merci pour votre partage !

  12. Par sites de poker — Il y a 12 mois

    Un code très simple et précis! A tester sans attendre. J’espère que ça marchera sans problèmes pour moi parceque depuis quelques temps j’ai du mal à installer des nouveaux pluginspour mon nouveau blog je ne sais pas pourquoi.

    Et en fait je vous félicite pour cette découverte.

    A très bientot :)

  13. Par sebastien — Il y a 11 mois

    c’est mortel on se croirait sur facebook :-)

  14. Par Palomba Lucas — Il y a 6 mois

    Merci pour ce plugin merveilleux ! Bravo !

  15. Par InvestMan — Il y a 5 mois

    Une idée tout simplement géniale ! Bravo pour le travail :) L’idée est si pertinente que ce plugin devrait être intégré de base dans WordPress !

  16. Par Maël Shanti — Il y a 4 mois

    Ce plugin est vraiment génial, bien joué ! :)
    J’aurais juste une suggestion… Que dirais-tu d’en faire un deuxième, avec la même fonctionnalité, pour les forums bbPress ?
    Je pense que ça serait vraiment génial que les gens puissent aussi faire ça dans les topics du forum !
    Bonne continuation :)

Commenter