Je vous explique ici comment ajouter facilement un message personnalisé avant votre « formulaire de commentaires » basé sur JetPack Comments, Disqus ou autre.

Pour ce faire, pas d’extension ! Je vous offre un petit bout de code à ajouter très simplement dans votre WordPress.

En effet, il existe bien des extensions (comme celle-ci : Comment Form Message) permettant d’afficher un message juste avant votre formulaire, pour inciter les lecteurs à laisser un commentaire, ou pour donner quelques avertissements sur les règles à suivre : pas de spam, pas de commentaires trop courts, etc. Cependant, bon nombre de ces plugins ne fonctionnent qu’avec le formulaire originale de WordPress et non avec des formulaires modifiés par un plugin comme JetPack Comments ou Disqus.

Mon code compatible avec JetPack Comments

Je vous offre donc ici ma technique pour afficher un message personnel avant n’importe quel type de formulaire de commentaires WordPress. Jetez un coup d’œil à ce que j’ai mis en place sur mon blog.

Sans plugin, avec un peu de code jQuery et CSS.

Pour obtenir un résultat similaire, suivez ces instructions.

1. Header and Footer

Premièrement, vous devez installer ce plugin. Il vous permet d’afficher votre propre code HTML et jQuery où vous souhaitez dans votre site : https://wordpress.org/plugins/header-footer/

Je l’utilise sur presque tous mes sites.

Plugin Header and Footer, très pratique !

2. Code source HTML, jQuery et CSS

Voici mon code source.

  • Copiez le CSS dans le champ « Custom CSS » de vos « Options de Thème », ou via JetPack dans Apparence > Modifier le CSS.
  • Copiez le HTML & jQuery dans Réglages > Header and Footer settings > Post content > Code to be inserted after each post.

https://gist.github.com/MisterWP/52fe16cf0c3909c98c36

Un aperçu de ce qu’il se passe chez moi.

C'est simple comme un copier-coller.

Pour définir où va s’afficher votre avertissement grâce à jQuery

Très important, vous pourrez observer l’unique ligne de code jQuery.

$('#myCommentPolicy').insertAfter('#reply-title');

Vous devrez adapter #reply-title en fonction de votre thème. Pour cela, inspectez le code source de votre page et ciblez l’élément après lequel votre message personnel devra s’afficher.

Inspection d'une page Web avec Google Chrome

N’hésitez pas à adapter ce code selon vos besoins et selon votre charte graphique.

3. FontAwesome

Pour afficher l’icône ⚠️ afin d’attirer l’attention sur votre « avertissement », installez FontAwesome si ce n’est pas déjà fait dans votre thème. Le plus simple, c’est de l’intégrer depuis leur CDN. Copiez simplement ce bout de code dans l’entête de votre site (dans la balise <head></head>). Vous avez un plugin très pratique pour faire ça maintenant.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

Testez !

Si ça bug quelque part, n’hésitez pas à laisser un commentaire ci-dessous avec l’URL de votre site qu’on puisse constater d’où vient le problème et éventuellement vous donner la solution.

Pas de licence pour ce petit bout de code

Vous pouvez réutiliser mon code où vous le souhaitez, pour n’importe quel usage (personnel, commercial…). La seule condition est de ne pas vous attribuer la paternité du code original. Ça serait gentil, merci.

Vous appréciez ?

Si ce code vous a été utile, j’apprécierais beaucoup que vous laissiez un petit commentaire sous cet article.

Je prends aussi les re-tweets, les partages Facebook et les liens depuis votre blog s’il s’y prête 😉