Comment bien intégrer le plugin Subscribe to Comments dans son formulaire

S’il y a un plugin WordPress particulièrement à la mode depuis quelques mois, c’est bien Subscribe to Comments. Ce plugin permet à vos lecteurs de recevoir par email les nouveaux commentaires d’un billet, à l’instar du flux RSS des commentaires qui lui se trouve être de moins en moins populaire.

Pourtant, jusqu’à aujourd’hui, je ne voulais pas installer Subscribe to Comments sur mon blog car un détail me dérangeait profondément. J’avais pu constater sur la plupart des blogs l’utilisant, que la case à cocher permettant de s’abonner aux commentaires était généralement placée après le bouton de validation du commentaire et en plus, très souvent (mais la tendance semble heureusement se perdre) cochée par défaut. Deux choses profondément agaçantes et conduisant souvent à s’inscrire par mégarde vu qu’il n’est pas naturel de vérifier après le bouton de validation si le formulaire continu. N’ayant pas cherché à comprendre plus loin, j’incombais la faute au plugin.

Cela commençait à devenir problématique cependant. Vous étiez de plus en plus nombreux à me demander cette fonctionnalité pour suivre les commentaires sur mon blog. Hors, aujourd’hui que je travaillais sur mon futur thème, je me suis arrêté un instant sur l’instruction <?php do_action('comment_form'), $post->ID); ?> que je recopiais sans me poser de question dans le fichier modèle des commentaires, ‘comments.php’.

Déclic !

Un petit saut dans la documentation de WordPress me confirme que cette action sert dans les thèmes pour les plugins devant agir sur le formulaire de commentaires. Comme ajouter un champ par exemple ! Un autre petit saut plus tard dans la documentation de Subscribe to Comments cette fois-ci me confirme que l’on peut ajouter manuellement l’injection de la case à cocher à l’aide de la fonction <?php show_subscription_checkbox(); ?>. Notamment dans le cas où le thème WordPress n’a pas le hook du formulaire, c’est à dire la fameuse instruction sur laquelle je m’interrogeais.

Bingo !

Ainsi donc, ce n’était pas Subscribe to Comments qui générait un formulaire à la « construction contestable » mais bel et bien les thèmes utilisés sur les blogs WordPress. La faute aux créateurs de ces thèmes qui se contentent de recopier bêtement, comme j’allais le faire moi-même, le formulaire de commentaires selon le modèle de thème par défaut (ou autre, j’ai constaté le même « défaut » dans SandBox qui me sert de base de travail).

Je m’interroge encore sur l’intérêt d’appeler ce hook après le bouton de soumission. En attendant de trouver une bonne raison, j’ai modifié mon thème en remplaçant dans le fichier ‘comments.php’ les lignes :

<p class="form-submit"><input type="submit" name="submit" class="button" type="submit" value="Envoyer votre commentaire" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id ?>" /></p>
<p class="form-option"><?php do_action('comment_form', $post->ID ) ?></p>

par

<p class="form-option"><?php do_action('comment_form', $post->ID ) ?></p>
<p class="form-submit"><input type="submit" name="submit" class="button" type="submit" value="Envoyer votre commentaire" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id ?>" /></p>

Ce qui permet d’avoir la case à cocher à l’emplacement naturel où elle doit se trouver, c’est-à-dire « dans » le formulaire, bien visible avant la validation du commentaire !

Je vous laisse observer le résultat en bas du formulaire de ce billet et profitez-en pour me dire ce que vous en pensez si le cœur vous en dit ! C’est Francis qui sera content, lui qui ne commente jamais ici justement parce que le suivi des commentaires par mail manquait ;) T’as vu ? Je t’avais dit que je réfléchissais à le faire, je raconte pas de blagues :)

Continuez votre lecture

36 commentaires

Jeremy a dit le 24 août 2008 à 19:22

En clair si j’en crois ce que je vois et un petit diff fait a partir de tes deux codes, a part l’ordre rien ne change… C’est vraiment tout con comme solution mais fallait y penser :p
Donc, je link dans mon prochain liens en vrac ;)

RépondreRépondre
burningHat a dit le 24 août 2008 à 19:54

Je ne te le fais pas dire effectivement, c’est vraiment tout con ! ;) Merci d’avance pour le lien.

RépondreRépondre
Olivier a dit le 24 août 2008 à 20:26

En fait, pour éclairer ta lanterne, il faut voir la checkbox et le restant du formulaire comme deux éléments séparés du formulaire. J’imagine donc que par défaut, il s’est retrouvé après pour ne pas perturber le code par défaut, tout simplement (histoire que si tu veuilles le dégager, tu ne dégages pas en même temps un bout du formulaire).

RépondreRépondre
burningHat a dit le 24 août 2008 à 20:37

En fait, pour éclairer ta lanterne, il s’est retrouvé après à cause du hook de WordPress qui est placé après et pas par une volonté propre du développeur du plugin apparemment ! De plus, ils ne sont absolument pas séparés puisque c’est la validation du commentaire (avec une adresse email valide) qui fait office de souscription !

De plus, il est « auto-inséré » par défaut via la fonctionnalité que j’évoque, présente dans tous thèmes « bien formés », donc personne ne risque de « le dégager par accident » (suffit de désactiver le plugin pour ça).

Au moins moi, quand je ne lis pas des docs, j’évite de prendre un ton condescendant pour ma part ;)

RépondreRépondre
bruno bichet a dit le 24 août 2008 à 21:14

Bien vu ! En revanche, ce hook est susceptible d’être utilisé par de nombreux autres plugins concernant les commentaires, et du coup, on risque de se retrouver avec des éléments injectés qui n’auront pas leur place au-dessus de bouton submit, ou bien ;)

RépondreRépondre
burningHat a dit le 24 août 2008 à 21:22

Yop, en fait plus j’y réfléchis plus je me dis que ce hook est plus un problème qu’autre chose. On devrait disposer d’au moins deux hooks permettant d’injecter des éléments « dans » le formulaire et après le submit. Quoi que je vois quand même assez peu de cas où il est justifié d’injecter des éléments après le submit d’un formulaire et donc si je devais trancher, je dirais quand même qu’il est mieux avant. Qu’en penses-tu ? (et je parle bien « d’avant/après » au niveau HTML brut) Tu vois des cas où on pourrait avoir des éléments après le bouton de validation mais avant la balise de fermeture </form> ?

RépondreRépondre
syklop a dit le 24 août 2008 à 21:28

Disons que je rejoins ton avis pour ce qui est de la case cochée par défaut.

Par contre, pour la checkbox avant ou après le bouton submit, j’avoue que ça ne m’aurait pas empêché de dormir la nuit ;-)

Sinon, pour la traduction, c’est de la modif dans le code ou on peut faire plus propre ?

RépondreRépondre
burningHat a dit le 24 août 2008 à 21:38

La traduction se gère avec un fichier à générer avec poedit et j’ai même pas regardé si elle était bien vu que je me « contente » de la V.O.. D’autant qu’il faut mettre les fichiers de langues à la racine du dossier des plugins et pas dans le dossier du plugin en lui-même (ce qui est franchement très douteux de la part du développeur mais bon).

À l’occasion, je pourrais voir pour y jeter un œil si elle est vraiment trop mauvaise, sinon c’est simplissime de traduire un plugin. Voici un tutoriel d’Amaury Ballmer (« Monsieur Simple-Tags ») à ce sujet sur son blog :
Explications sur l’internationalisation de WordPress et créer un fichier PO avec Poedit

RépondreRépondre
syklop a dit le 24 août 2008 à 21:47

Récupéré le .mo qui va bien, mis à la racine des plugins (beurk) : No translation. Bof.
Pas envie de réfléchir, de tute façon. L’anglais ça ira bien. Et la checkbox sous le bouton submit. Na.

RépondreRépondre
Francis a dit le 24 août 2008 à 22:02

Personnellement, si le truc est super, je ne vois pas trop la différence de mettre la case à cocher en dessous d’au-dessus… mais bon… ;-)

RépondreRépondre
bruno bichet a dit le 24 août 2008 à 22:09

@Francis, c’est surtout une question de logique et d’ergonomie, un peu comme si on se mettait à placer le champs password avant le champs identifiant ;)

Le parcours idéal est : 1) laisser un commentaire, 2) souscrire aux commentaires à venir et 3) cliquer sur le bouton submit.

Ca m’arrive plein de fois de cliquer sur Submit avant de m’apercevoir que j’aurais pu m’abonner aux commentairex ;)

RépondreRépondre
Francis a dit le 24 août 2008 à 22:20

Ah ouais effectivement… Vu comme ça c’est clairement logique… Dois pas être assez logique moi… :D

RépondreRépondre
burningHat a dit le 24 août 2008 à 23:12

Yop exactement Bruno ! Moi, ça m’est souvent arrivé d’être abonné aux commentaires par accident à cause de ça (quand en plus la case est cochée par défaut comme ça arrive trop souvent) et de devoir ensuite sortir les mails de notification du junkmail et de devoir aller me désinscrire manuellement sur le site puis de reconfirmer ma désinscription (ce que j’appelle grossièrement, du « vol d’opt-in« ). Que des tracas qui auraient pu être évité avec une construction cohérente et ergonomique du formulaire au final.

Bref, générer des formulaires cohérents, c’est pas si trivial ni anodin qu’il n’y parait ;)

@Francis c’est d’autant plus rigolo ce que tu dis sur l’ordre que Fran6art est bien un des rares blogs que j’ai croisé où la checkbox est « à la bonne place » :p Pendant un instant, j’ai cru que tu avais été plus malin que nous… Apparemment non, c’était que du bol ! (un mythe qui s’effondre, snif !) ;)

@Syklop euh ouaip possible… Comme je t’ai dis, j’ai pas testé, j’ai juste lu ce que je te rapportais là dans la doc. Si en plus ça marche pas :p

RépondreRépondre
Francis a dit le 25 août 2008 à 9:14

 » Pendant un instant, j’ai cru que tu avais été plus malin que nous » Oh, je ne crois pas que ce soit dans mes cordes !! :D Ca doit simplement être K2…

RépondreRépondre
burningHat a dit le 25 août 2008 à 10:11

Ta modestie t’honore mon cher ! ;) Tiens, faudrait que je vérifie ça au niveau de K2 éventuellement…

Il reste tout de même intéressant de noter que la documentation WordPress est totalement floue au niveau de ce hook et ne donne aucune indication/contrainte sur l’emplacement où l’insérer (en dehors du fait que ça devrait être « dans » le formulaire) d’après ce que j’ai pu lire. À priori on est donc totalement libre de le mettre où on veut. Par extension, on peut donc imaginer qu’il s’est retrouvé en fin de formulaire dans le thème « default » par choix totalement arbitraire de son créateur (et personnellement, j’aurais tendance à penser qu’il ne l’a ajouté là que pour séparer la partie « formulaire codé en dur » du reste)

RépondreRépondre
Michel a dit le 25 août 2008 à 16:39

Super comme info : j’ai directement fais la modification sur mon site.
Juste un petit truc de geek de validation : il ne faut pas mettre l’instruction entre des balises p ( cela invalide la page) : celles-ci étant ajoutées par défaut par le plugin on se retrouve avec un petit message d’erreur. (trimming an empty p on line …)
Pas vraiment important mais toujours bon à savoir.

RépondreRépondre
burningHat a dit le 25 août 2008 à 16:55

@michel tout à fait, bien vu ! En plus y a une option dans les réglages de StC pour déterminer les balises à mettre pour « entourer » la checkbox. Merci beaucoup !

RépondreRépondre
Michel a dit le 25 août 2008 à 17:43

Une autre petite astuce en passant concernant le plugin mais elle dépend surtout du design de chaque site.
En lignes 25, 38 et 48 on retrouve ce bout de code :
if ($sg_subscribe->clear_both) echo ‘style= »clear: both; »
J’ai volontairement omis les balises php qui entourent le code par précaution.
Si votre formulaire est poussé vers le bas ce qui n’est pas toujours le cas mais vraiment pas joli (dépend du contenu – longueur – de la barre latérale), il suffit de supprimer ce code dans les trois lignes (pas le reste évidement) et tout rentre dans l’ordre niveau design.
Solution en application sur mon site et ça marche impeccablement.

RépondreRépondre
burningHat a dit le 25 août 2008 à 17:46

Yop, ceci doit correspondre à l’option « Do a CSS « clear » on the subscription checkbox/message (uncheck this if the checkbox/message appears in a strange location in your theme) » qu’on trouve dans les réglages du plugin depuis la console admin (Réglages / Subscribe to Comments) non ? Pas sûr qu’on soit obligé de l’éditer à la main. D’ailleurs le fait que ça dépende d’un if me fait également penser ceci.

RépondreRépondre
Michel a dit le 25 août 2008 à 18:25

Tout à fait juste Manu : mais j’ai constaté que même après avoir fait plusieurs tests ( en local) de coché/décoché cette option – celle-ci revient toujours à la valeur par défaut (décochée- inactive).
D’où ce choix de supprimer dans le code du plugin (là je suis certain que ça marche).
Maintenant tout à fait possible que cela ne fonctionne pas en local mais bien une fois en ligne (j’ai déjà eu ce genre de probs sous XAMPP avec différents plugins).

RépondreRépondre
burningHat a dit le 25 août 2008 à 18:34

Possible et étrange tout à la fois en effet… En tous cas chez moi, en ligne, l’option fonctionne comme attendu apparemment, pas testé en local mais je le ferais tiens… ;)

Merci du tuyau en tous cas puisque ça peut servir ! D’ailleurs je crois me souvenir que Bruno avait ce problème avec cette option récalcitrante à une époque, faudrait qu’il confirme pour voir.

RépondreRépondre
bruno bichet a dit le 25 août 2008 à 19:53

Le « do CSS clear » est sûrement là au cas où le le positionnement des éléments du formulaire seraient gérés par des float: left.

Le clear: both est la pour rétablir le flux. En gros, si les labels sont situés au-dessus des input/textarea, il ne devrait pas y avoir de problème.

RépondreRépondre
burningHat a dit le 25 août 2008 à 20:02

Oui c’est comme ça que je le vois aussi. Mais tu n’avais pas eu toi aussi un souci avec la checkbox d’une option dans ta console d’admin qui revenait invariablement à « cocher » quoi que tu fasses ? Tu m’en avais fait part dans un commentaire par le passé.

RépondreRépondre
kReEsTaL a dit le 28 août 2008 à 16:56

En effet, c’est simple mais il fallait y penser! Super astuce, merci :)

RépondreRépondre
Stellaire a dit le 28 août 2008 à 19:47

Alors, je ne doute pas que le problème vienne de mon thème ou d’un conflit entre suscribe to comments et tinyMCE, mais quand j’applique ton astuce le commentaire n’est pas pris en compte.

Pour préciser un peu. Le commentaire s’affiche, le problème c’est que ce n’est pas le bon. le commentaire qui s’affiche est le message par défaut de la textarea à savoir « Votre commentaire », il prend la place du commentaire saisi par le visiteur.

Je pense que ça vient de tinyMCE qui « recouvre » la textarea. Je ne saurais pas dire pourquoi en plaçant l’appel de suscribe to comment à cet endroit le fait planter, mais le fait est qu’il suffit que je le remette en dessous du formulaire pour que tout refonctionne correctement.

RépondreRépondre
burningHat a dit le 28 août 2008 à 21:18

@kreestal De rien ;) content que ça te plaise

@Stellaire euhhh bizarre… t’as le plugin qui ajoute TinyMCE c’est ça ? Faudrait que je vois ce qu’il modifie mais j’ai du mal à visualiser ton pb en fait…

RépondreRépondre
Jean-Baptiste a dit le 10 février 2009 à 9:45

Merci pour ce billet :)

RépondreRépondre
burningHat a dit le 10 février 2009 à 14:37

@Jean-Baptiste de rien ;)

RépondreRépondre
Morgan a dit le 17 février 2009 à 1:58

Un petit merci pour cette astuce toute simple mais qui est bien plus logique que ce que la plupart des themes proposent ;) Et tout comme toi, j’en ai profiter pour ajouter ce plugin finalement ;)

RépondreRépondre
burningHat a dit le 17 février 2009 à 7:31

@Morgan merci à toi pour ce petit retour ;)

RépondreRépondre
tontonM a dit le 7 octobre 2009 à 19:48

Merci pour l’astuce

RépondreRépondre
burningHat a dit le 7 octobre 2009 à 21:09

de rien, content qu’elle t’ai servi ;-)

RépondreRépondre
Chris a dit le 26 décembre 2010 à 15:01

Je m’en vais de ce pas tester le plugin :)

RépondreRépondre
burninghat a dit le 26 décembre 2010 à 15:32

Yep n’hésite pas à revenir nous dire ce qu’il en est alors! ;-)

RépondreRépondre
Kalagan a dit le 29 décembre 2010 à 12:47

Voilà, le plugin est installé sur mon blog. Au bout d’une
petite demi-heure de configuration (suppression de la validation,
déplacement du bloc « Notifiez-moi par email » au-dessus du bouton de
validation du commentaire, tests des différents scénarios), le
plugin marche très bien, et je vois déjà de bons résultats :
augmentation du nombre de commentaire sans précédents :)

RépondreRépondre
burninghat a dit le 29 décembre 2010 à 13:47

Merci pour ton retour et content que l’intégration se soit bien passée! :-)

RépondreRépondre

un trackback

Liens en vrac - 3 | Jérémy Verda's blog! - 27 août 2008 à 21:50

[...] Bien intégrer le plugin Subscribe to comments dans votre formulaire wordpress [...]