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

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 :

  • la fenêtre d’autcomplétion
  • les boutons de mention
  • le bouton qui vient d’être cliqué
  • le contenu du commentaire mis en avant après le scroll

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 :

  • peu pratique, car on ne peut répondre qu’à un commentaire à la fois
  • mauvais en ergonomie, car les remarques s’imbriquent et le fil de la conversation est rapidement brouillé pour le lecteur
  • à proscrire pour le SEO, car chaque bouton Reply-to créer un nouveau lien, ce qui dilue le jus de la page…
  • le graphisme et les commentaires imbriqués… comment dire…

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 [baw_papii info= »version » plugin= »mention-comments-authors » cache= »24″] ou directement ici.

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

32 commentaires
Willy Bahuaud, il y a 4 années
Je laisse un premier commentaire pour que vous puissiez directement tester le plugin 😉
Daniel Roch, il y a 4 années
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

Alexandre, il y a 4 années
Vraiment sympa 😉
Aurélien Denis, il y a 4 années
ça me semble bien sympa ton plugin ! Compatible Jetpack ou pas (j’ai pas testé encore) ? Merci.
Willy Bahuaud, il y a 4 années
, 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 🙂

Vincent Brossas, il y a 4 années
vraiment cool ce plugin 😉 félicitations !
Aurélien Denis, il y a 4 années
quand on dit que « code is poetry » mais c’est vrai ! Je vais le tester dès que j’ai un moment 😉
Arnaud Olivier, il y a 4 années
Merci facile à mettre en place et vraiment pratique pour une bonne communication dans les commentaires 🙂 cc
Laurent Matignon, il y a 4 années
: 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 ?

Rosa, il y a 4 années

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.
redaction web, il y a 4 années
Ce plugin est vraiment utile !! Merci pour votre partage !
sites de poker, il y a 4 années
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 🙂

sebastien, il y a 4 années
c’est mortel on se croirait sur facebook 🙂
Palomba Lucas, il y a 3 années
Merci pour ce plugin merveilleux ! Bravo !
InvestMan, il y a 3 années
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 !
Maël Shanti, il y a 3 années
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 🙂
Clement, il y a 3 années
Merci 1000 fois, c’est exactement ce que je cherchais !
Je cours le tester sur un nouveau projet 😉
Tim, il y a 3 années
Pas mal du tout !
Fabrice, il y a 2 années
ce plugin est juste une merveille, bravo 🙂

Une petite remarque : L’envoi d’email de la notification de mention ne devrait se déclencher qu’une fois le commentaire validé par l’admin

Sib, il y a 2 années

Alors là bravo !

par contre sur mon site ça ne marche pas quand j’en met à la suite, il faut que je passe à la ligne
Une idée du problème ?

seb2086, il y a 2 années
Super plugin, par contre lorsque j’intègre les foncitons dans mon fichier functions.php j’ai une erreur au comme quoi la fonction mcaAjaxChange() n’est pas définie. Où faut-il l’inclure exactement ?

Merci

Willy Bahuaud, il y a 2 années
Si tu utilise la fonction mcaAjaxChange, c’est que tu as du activer le mode ajax (ou bien qu’au moins un partie de ton contenu est chargé dynamiquement). mcaAjaxChange est une fonction javascript (en non php), tu dois donc l’utiliser dans un fichier javascript 🙂

C’est un petit bogue que j’ai identifié : en fait pour l’instant il faut deux caractères entre des mentions pour que la second soit active. Le mieux est, pour l’instant de mettre virgule puis un espace.

seb2086, il y a 2 années
Merci pour ta réponse. Sur le fait que ce soit une fonction javascript je l’ai vu après coup. Par contre n’étant pas très familier avec wordpress je ne sais pas dans quel fichier javascript je dois l’inclure et si je dois en créer un à quel moment je fais l’import de ce fichier dans mon HTML ?

Merci.

Kameleon Factory, il y a 2 années
, bonjour et merci pour ce plugin que je viens d’installer sans problème. J’aime le concept de la fonction comme dans Instagram, du coup j’ai supprimé le bouton répondre. Je n’ai pas beaucoup de commentaire mais je l’utiliserai surtout pour prévenir des réponses et qui sais il prendra peut être toute l’ampleur de son potentiel plus tard 😉
Sam, il y a 2 années
je vais l’installer sur mon blog wordpress car je recherchais un plugin justement afin que mes lectrices puissent recevoir une reponse a leur question par email et puis l’idee du est tout simplement geniale.
J’aurais une question : faut-il desactiver le systeme Replyto et donc ce cas est ce que je perds toutes les reponses aux lectrices ?
merci pour votre reponse
Willy Bahuaud, il y a 2 années
De rien 😉 Tu n’es pas obligé de désactiver le système de Reply-to, celui-ci est compatible avec le plugin.
lolo18, il y a 2 années
Bravo pour ta création, très belle réussite !
noé, il y a 2 années
Super ce plugin! merci . Enfin je ne l’ai pas encore testé 🙂 mais il à l’air géniale. Je vais le tester de suite.
noé, il y a 2 années
ça y est je l’ai installé, il marche très bien! Cependant j’aimerais changer les couleurs est ce possible? Quand je regarde dans « personnalisation » je ne comprend pas trop, je préfère le mode css. Encore merci
Maeve, il y a 4 mois
 : Bonjour,
J’ai installé cette extension sur mon blog car je la trouve vraiment intéressante.
Elle semble fonctionner correctement puisqu’il est possible de répondre aux personnes en les citant, etc…
Mais aucun e-mail n’ait envoyé aux personnes lorsque je leurs réponds (en les citant bien sûr), et je ne comprends pas du tout pourquoi ?
J’ai tenté de trouver des explications par moi-même en cherchant une solution sur Internet, mais je suis totalement débutante, et je ne comprends malheureusement pas la moitié de ce que je lis…
Il serait possible de m’apporter une petite aide svp ??
Merci d’avance !
Flavine, il y a 4 mois
Bonjour Willy,
Bravo pour ton plug Mention comment’s Authors, il est très utile.

Malheureusement, je ne parviens pas à l’utiliser correctement sur mon blog.
Je récolte les erreurs :

Uncaught TypeError: Cannot read property ‘addClass’ of null

at HTMLDivElement. (mca-comment-script.min.js?ver=0.9.8:1)

at Function.each (jquery.min.js?ver=2.1.0:2)

at o.fn.init.each (jquery.min.js?ver=2.1.0:2)

at HTMLButtonElement. (mca-comment-script.min.js?ver=0.9.8:1)

at HTMLButtonElement.dispatch (jquery.min.js?ver=2.1.0:3)

at HTMLButtonElement.r.handle (jquery.min.js?ver=2.1.0:3)

(anonymous) mca-comment-script.min.js?ver=0.9.8:1

each jquery.min.js?ver=2.1.0:2

each jquery.min.js?ver=2.1.0:2

(anonymous) mca-comment-script.min.js?ver=0.9.8:1

dispatch jquery.min.js?ver=2.1.0:3
r.handle jquery.min.js?ver=2.1.0:3
jquery-mention.min.js?ver=0.9.8:1
Uncaught TypeError: Cannot read property ‘msie’ of undefined

at o.fn.init.getCaretPosition (jquery-mention.min.js?ver=0.9.8:1)

at g.displayList (jquery-mention.min.js?ver=0.9.8:1)

at g.onKeyUp (jquery-mention.min.js?ver=0.9.8:1)

at HTMLTextAreaElement.f (jquery.min.js?ver=2.1.0:2)

at HTMLTextAreaElement.dispatch (jquery.min.js?ver=2.1.0:3)

at HTMLTextAreaElement.r.handle (jquery.min.js?ver=2.1.0:3)

J’utilise WP 4.7.2.
Aurais-tu une piste pour moi ?
Merci d’avance.
Kobaitchi, il y a 3 mois
Bonjour
Ce plugin semble effectivement super mais j’ai deux petits soucis depuis que je l’ai téléchargé.
D’abord le même que , les personnes citées ne sont pas notifiées par mail. Et ensuite le ne fonctionne que depuis mon espace d’admin, pas directement dans les commentaires, ce qui n’est pas très pratique.
Peut-être les deux sont-ils liés ?

Si c’était possible d’avoir un peu d’aide pour régler ça ce serait vraiment super 🙂

Merci.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Publié le 24 mai 2013
par Willy Bahuaud
Catégorie Développement WordPress, Intégration web