Partager:
Comment styliser le formulaire de commentaire WordPress (Ultimate Guide)
Voulez-vous changer le style du formulaire de commentaire WordPress sur votre site Web? Les commentaires jouent un rôle important dans la création d'un engagement des utilisateurs sur un site Web. Un beau formulaire de commentaires convivial encourage les utilisateurs à participer à la discussion. C'est pourquoi nous avons créé le guide ultime sur la manière de styliser facilement le formulaire de commentaire WordPress..
Avant de commencer
Les thèmes WordPress contrôlent l'apparence de votre site Web. Chaque thème WordPress est livré avec plusieurs fichiers, y compris des fichiers de modèle, un fichier de fonctions, des scripts Java et des feuilles de style..
Les feuilles de style contiennent les règles CSS pour tous les éléments utilisés par votre thème WordPress. Vous pouvez ajouter votre propre CSS personnalisé pour remplacer les règles de style de votre thème..
Si vous ne l'avez pas déjà fait auparavant, consultez notre article sur la procédure d'ajout de CSS personnalisé dans WordPress pour les débutants..
Outre le CSS, vous devrez peut-être également ajouter des fonctions pour modifier l'apparence par défaut de votre formulaire de commentaire WordPress. Si vous ne l'avez pas déjà fait, veuillez consulter notre article sur la manière de copier et coller du code dans WordPress..
Cela étant dit, examinons comment styliser le formulaire de commentaire WordPress.
Comme il s’agit d’un guide assez complet, nous avons créé une table des matières pour faciliter la navigation:
- Modifier les commentaires WordPress avec les classes CSS par défaut
- Ajouter un identifiant social à un formulaire de commentaire WordPress
- Ajout de texte de politique de commentaire dans le formulaire de commentaire WordPress
- Déplacement du champ de texte de commentaire vers le bas
- Supprimer un champ de site Web (URL) du formulaire de commentaire WordPress
- Ajout de la case Abonnez-vous aux commentaires dans WordPress
- Ajouter des tags rapides dans les commentaires WordPress
Changer le style du formulaire de commentaire dans WordPress
Dans la plupart des thèmes WordPress, il existe un modèle appelé comments.php. Ce fichier est utilisé pour afficher des commentaires et un formulaire de commentaire sur les articles de votre blog. Le formulaire de commentaire WordPress est généré à l'aide de la fonction: .
Par défaut, cette fonction génère votre formulaire de commentaire avec trois champs de texte (Nom, E-mail et Site Web), un champ de zone de texte pour le texte du commentaire, une case à cocher pour la conformité à la GDPR et le bouton d'envoi..
Vous pouvez facilement modifier chacun de ces champs en modifiant simplement les classes CSS par défaut. Vous trouverez ci-dessous une liste des classes CSS par défaut que WordPress ajoute à chaque formulaire de commentaire..
#pond # reply-title # cancel-comment-reply-link #commentform #author #email #url #comment #sous soumettre .com-notes .required .comment-form-author .comment-form-email .comment-form-url .comment-form-comment .comment-form-cookies-consent .form-allowed-tags .form-submit
En modifiant simplement ces classes CSS, vous pouvez complètement changer l'apparence de votre formulaire de commentaire WordPress..
Allons-y et essayons de changer quelques petites choses pour que vous puissiez avoir une bonne idée de la façon dont cela fonctionne..
Tout d’abord, nous allons commencer par mettre en évidence le champ de formulaire actif. La mise en surbrillance du champ actuellement actif rend votre formulaire plus accessible aux personnes ayant des besoins particuliers, et rend également votre formulaire de commentaire plus agréable sur des appareils plus petits..
#pond background: #fbfbfb; remplissage: 0 10px 0 10px; / * Mettez en surbrillance le champ de formulaire actif * / #pond input [type = text], textarea -webkit-transition: all 0.30s easy-in-out; -moz-transition: toutes les 0,30 sereines; -ms-transition: toutes les 0,30 secondes d’entrée / sortie; -o-transition: toutes les 0,30 facilitées d’entrée; contour: aucun; remplissage: 3px 0px 3px 3px; marge: 5px 1px 3px 0px; bordure: 1px solide #DDDDDD; #pond input [type = texte]: focus, entrée [type = email]: focus, entrée [type = url]: focus, zone de texte: focus box-shadow: 0 0 5px ) marge: 5px 1px 3px 0px; bordure: rgba solide 2px (81, 203, 238, 1);
Voici à quoi ressemblait notre formulaire dans le thème WordPress Twenty Sixteen après les modifications:
À l'aide de ces classes, vous pouvez modifier le comportement de l'affichage du texte dans les zones de saisie. Nous allons aller de l'avant et changer le style de texte du nom de l'auteur et les champs de l'URL.
#author, #email font-family: "Open Sans", "Droid Sans", Arial; style de police: italique; couleur: # 1d1d1d; espacement des lettres: .1em; #url color: # 1d1d1d; font-family: "Luicida Console", "Courier New", "Courier", monospace;
Si vous regardez de plus près dans la capture d'écran ci-dessous, le nom et la police du champ de courrier électronique sont différents de ceux de l'URL du site Web..
Vous pouvez également modifier le style du bouton d'envoi de formulaire de commentaire WordPress. Au lieu d'utiliser le bouton d'envoi par défaut, donnons-lui un dégradé CSS3 et une zone d'ombre..
#submit background: -moz-linear-gradient (haut, # 44c767 5%, # 5cbf2a 100%); arrière-plan: -webkit-linear-gradient (haut, n ° 44c767 5%, n ° 5cbf2a 100%); arrière-plan: -o-linear-gradient (haut, n ° 44c767 5%, n ° 5cbf2a 100%); arrière-plan: -ms-linear-gradient (haut, n ° 44c767 5%, n ° 5cbf2a 100%); arrière-plan: dégradé linéaire (au bas, # 44c767 5%, # 5cbf2a 100%); couleur de fond: # 44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; bordure: 1px solide # 18ab29; affichage: inline-block; curseur: pointeur; couleur: #ffffff; famille de polices: Arial; taille de police: 17px; rembourrage: 16px 31px; texte-décoration: aucun; ombre du texte: 0px 1px 0px # 2f6627; #submit: hover background: -webkit-gradient (linéaire, gauche haut, bas gauche, stop de couleur (0.05, # 5cbf2a), stop de couleur (1, # 44c767)); arrière-plan: -moz-linear-gradient (haut, # 5cbf2a 5%, # 44c767 100%); arrière-plan: -webkit-linear-gradient (en haut, # 5cbf2a 5%, # 44c767 100%); arrière-plan: -o-linear-gradient (haut, # 5cbf2a 5%, # 44c767 100%); arrière-plan: -ms-linear-gradient (haut, # 5cbf2a 5%, # 44c767 100%); arrière-plan: dégradé linéaire (jusqu'en bas, # 5cbf2a 5%, # 44c767 100%); couleur de fond: # 5cbf2a; #submit: active position: relative; en haut: 1px;
Faire passer les formulaires de commentaires WordPress au niveau supérieur
Vous pensez peut-être que c'était trop basique. Eh bien, nous devons commencer par là, afin que tout le monde puisse suivre.
Vous pouvez faire passer votre formulaire de commentaire WordPress à un niveau supérieur en réorganisant les champs du formulaire, en ajoutant un identifiant de connexion sociale, en vous abonnant aux commentaires, aux directives de commentaire, aux balises rapides, etc..
Ajouter la connexion sociale à WordPress Commentaires
Commençons par ajouter des connexions sociales aux commentaires WordPress.
La première chose à faire est d’installer et d’activer le plugin WordPress Social Login. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..
Lors de l'activation, vous devez visiter Paramètres »WP Social Login page pour configurer les paramètres du plugin.
Le plugin nécessitera des clés API pour se connecter aux plates-formes sociales. Vous verrez des liens avec des instructions sur la façon d’obtenir ces informations pour chaque plate-forme..
Après avoir entré vos clés API, cliquez sur le bouton Enregistrer les paramètres pour enregistrer vos modifications..
Vous pouvez maintenant visiter votre site Web pour voir les boutons de connexion sociale au-dessus de votre formulaire de commentaire..
Ajout de texte de stratégie de commentaire avant ou après le formulaire de commentaire
Nous aimons tous nos utilisateurs et nous les remercions de prendre quelques minutes pour laisser un commentaire sur notre site. Cependant, pour créer un environnement de discussion sain, il est important de modérer les commentaires..
Pour avoir une transparence totale, nous avons créé une page de politique de commentaire, mais vous ne pouvez pas simplement mettre ce lien dans le pied de page..
Nous voulions que notre politique de commentaire soit bien visible et visible pour tous les utilisateurs qui laissent un commentaire. C'est pourquoi nous avons décidé d'ajouter la politique de commentaire dans notre formulaire de commentaire WordPress..
Si vous souhaitez ajouter une page de stratégie de commentaire, la première chose à faire est de créer une page WordPress et de définir votre stratégie de commentaire (vous pouvez voler la nôtre et la modifier en fonction de vos besoins)..
Après cela, vous pouvez ajouter le code suivant dans le fichier functions.php de votre thème ou dans un plugin spécifique au site..
fonction wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que les commentaires sont modérés conformément à notre politique de commentaires..
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before');
Le code ci-dessus remplacera le formulaire de commentaire par défaut avant les notes avec ce texte. Nous avons également ajouté une classe CSS dans le code afin de pouvoir mettre en évidence la notification à l'aide de CSS. Voici l'exemple de CSS que nous avons utilisé:
p.comment-policy border: 1px solid # ffd499; couleur de fond: # fff4e5; border-radius: 5px; rembourrage: 10px; marge: 10px 0px 10px 0px; taille de police: petit; style de police: italique;
Voici à quoi cela ressemblait sur notre site de test:
Si vous souhaitez afficher le lien après la zone de texte du commentaire, utilisez le code suivant..
fonction wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que les commentaires sont modérés conformément à notre politique de commentaires..
"; return $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after');
N'oubliez pas de modifier l'URL en conséquence, il est donc renvoyé à votre page de stratégie de commentaire plutôt qu'à example.com. 
Déplacer le champ de texte de commentaire vers le bas
Par défaut, le formulaire de commentaire de WordPress affiche la zone de texte de commentaire en premier, puis les champs nom, email et site Web. Ce changement a été introduit dans WordPress 4.4.
Avant cela, les sites Web WordPress affichaient d’abord les champs nom, adresse électronique et site Web, puis la zone de texte du commentaire. Nous avons estimé que nos utilisateurs sont habitués à voir le formulaire de commentaire dans cet ordre. Nous utilisons donc toujours l'ancien ordre de champ sur WPBeginner..
Si vous voulez faire cela, tout ce que vous avez à faire est d'ajouter le code suivant au fichier functions.php de votre thème ou à un plugin spécifique au site..
fonction wpb_move_comment_field_to_bottom ($ fields) $ comment_field = $ fields ['comment']; unset ($ field ['comment']); $ fields ['comment'] = $ comment_field; retourne $ champs; add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom' Ce code déplace simplement le champ de la zone de texte de commentaire vers le bas..
Supprimer le site Web (URL) du formulaire de commentaire WordPress
Le champ de site Web dans le formulaire de commentaire attire beaucoup de spammeurs. Même si le supprimer ne va pas arrêter les spammeurs ni même réduire les spams, cela vous évitera certainement d’approuver accidentellement un commentaire avec un lien vers un site Web auteur.
Cela réduira également un champ du formulaire de commentaire, le rendant plus facile et plus convivial. Pour plus d'informations sur ce sujet, consultez notre article sur la suppression du champ URL du site Web dans le formulaire de commentaire WordPress.
Pour supprimer le champ URL du formulaire de commentaire, ajoutez simplement le code suivant à votre fichier functions.php ou à un plugin spécifique au site..
function wpbeginner_remove_comment_url ($ arg) $ arg ['url'] = "; return $ arg; add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url'); 
Ajouter une case à cocher S'abonner aux commentaires dans WordPress
Lorsque les utilisateurs laissent un commentaire sur votre site Web, ils peuvent vouloir suivre ce fil de discussion pour voir si quelqu'un a répondu à leur commentaire. En ajoutant une case à cocher S'abonner aux commentaires, vous permettez aux utilisateurs de recevoir des notifications instantanées lorsqu'un nouveau commentaire apparaît sur le message..
Pour ajouter cette case à cocher, la première chose à faire est d'installer et d'activer le plug-in Subscribe to Comments Reloaded. Lors de l'activation, vous devez visiter Paramètres "S'abonner à Commentaires pour configurer les paramètres du plugin"..
Pour des instructions détaillées, consultez notre article sur la manière de permettre aux utilisateurs de s'abonner à des commentaires dans WordPress..
Ajouter des étiquettes rapides dans le formulaire de commentaire
Les balises rapides sont des boutons de formatage qui permettent aux utilisateurs de personnaliser facilement leurs commentaires. Ceux-ci incluent des boutons pour mettre en gras, en italique, ajouter un lien ou un bloc de citation.
Pour ajouter des quicktags, vous devez installer et activer le plug-in Basic Comment Quicktags. Pour plus de détails, consultez notre article sur la façon d'ajouter facilement des balises rapides dans le formulaire de commentaire WordPress..
Voici à quoi ressemblera votre formulaire de commentaire après l’ajout de quicktags.
Nous espérons que cet article vous a aidé à apprendre à styler le formulaire de commentaire WordPress pour le rendre plus amusant pour vos utilisateurs. Vous voudrez peut-être aussi consulter nos conseils pour obtenir plus de commentaires sur les billets de votre blog WordPress.
Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.