Vous voulez changer le style du formulaire de commentaire WordPress sur votre site Web? Les commentaires jouent un rôle important dans la création de l'engagement des utilisateurs sur un site Web. Un formulaire de commentaire attrayant et facile à utiliser encourage les utilisateurs à participer à la discussion. C'est pourquoi nous avons créé le guide définitif sur la façon de concevoir 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 différents fichiers, notamment des fichiers de modèle, des fichiers de fonction, 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 encore fait, consultez notre article sur la façon d'ajouter du CSS personnalisé dans WordPress pour les débutants.
En plus de CSS, vous devrez peut-être ajouter certaines fonctions pour modifier l'apparence par défaut de votre formulaire de commentaire WordPress. Si vous ne l'avez pas encore fait, consultez notre article sur la façon de copier et coller du code dans WordPress.
Cela dit, examinons comment concevoir 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 des classes CSS par défaut
- Ajouter une connexion sociale au formulaire de commentaire WordPress
- Ajouter un texte de politique de commentaire dans le formulaire de commentaire WordPress
- Déplacer le champ de texte de commentaire vers le bas
- Supprimer le champ du site Web (URL) du formulaire de commentaire WordPress
- Ajouter la case à cocher S'abonner aux commentaires dans WordPress
- Ajouter des balises rapides dans les commentaires 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 des formulaires de commentaires sur vos articles de 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é RGPD et le bouton Envoyer.
Vous pouvez facilement modifier chacun de ces champs en ajustant 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.
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit
En ajustant simplement ces classes CSS, vous pouvez complètement changer l'apparence de votre formulaire de commentaire WordPress.
Allons de l'avant et essayons de changer quelques éléments, afin que vous puissiez avoir une bonne idée de son fonctionnement.
Tout d'abord, nous commencerons par mettre en évidence le champ du formulaire actif. En mettant en surbrillance le champ actuellement actif, votre formulaire est plus accessible aux personnes ayant des besoins spéciaux, et il améliore également l'apparence de votre formulaire de commentaire sur les petits appareils.
#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}
/* Highlight active form field */
#respond input(type=text), textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
#respond input(type=text):focus,
input(type=email):focus,
input(type=url):focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}
Voici à quoi ressemblait notre formulaire dans le thème WordPress Twenty Sixteen après les modifications:
Avec ces classes, vous pouvez modifier le comportement de l'affichage du texte dans les zones de saisie. Nous allons continuer et changer le style de texte des champs de nom et d'URL de l'auteur.
#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
}
#url {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}
Si vous regardez de plus près la capture d'écran ci-dessous, le nom et la source du champ e-mail sont différents de l'URL du site Web.
Vous pouvez également modifier le style de bouton d'envoi du formulaire de commentaire WordPress. Au lieu d'utiliser le bouton d'envoi par défaut, donnons-lui un dégradé CSS3 et une ombre de boîte.
#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top: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à, pour que tout le monde puisse nous suivre.
Vous pouvez faire passer votre formulaire de commentaire WordPress au niveau supérieur en réorganisant les champs du formulaire, en ajoutant une connexion sociale, en vous abonnant aux commentaires, aux directives de commentaire, aux balises rapides, etc.
Ajoutez une connexion sociale aux commentaires WordPress
Commençons par ajouter des connexions sociales aux commentaires WordPress.
La première chose à faire est d'installer et d'activer le plugin de connexion sociale WordPress. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.
Après l'activation, vous devez visiter Paramètres »WP Social Login pour configurer les paramètres du plugin.
Le plugin nécessitera des clés API pour se connecter aux plateformes sociales. Vous verrez des liens vers 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 leur site Web pour voir les boutons de connexion sociale au-dessus de leur formulaire de commentaire.
Nous aimons tous nos utilisateurs, et nous apprécions vraiment de prendre le temps de laisser un commentaire sur notre site. Cependant, pour créer un environnement de discussion sain, il est important de modérer les commentaires.
Pour une transparence totale, nous avons créé une page de politique de commentaires, mais vous ne pouvez pas mettre ce lien dans le pied de page.
Nous voulions que notre politique de commentaires soit bien visible et visible par 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 politique de commentaires, la première chose que vous devez faire est de créer une page WordPress et de définir votre politique de commentaires (vous pouvez voler la nôtre et la modifier selon vos besoins).
Après cela, vous pouvez ajouter le code suivant dans le fichier functions.php de votre thème ou un plugin spécifique au site.
function wpbeginner_comment_text_before($arg) {
$arg('comment_notes_before') = "";
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 au code, afin que nous puissions mettre en évidence l'avertissement à l'aide de CSS. Voici l'exemple CSS que nous utilisons:
p.comment-policy {
border: 1px solid #ffd499;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}
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.
function wpbeginner_comment_text_after($arg) {
$arg('comment_notes_after') = "";
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');
N'oubliez pas de modifier l'URL en conséquence, alors allez sur votre page de politique de commentaire au lieu d'exemple.com 
Par défaut, le formulaire de commentaire WordPress affiche d'abord la zone de texte du commentaire, puis les champs du nom, de l'e-mail et du site Web. Cette modification a été introduite dans WordPress 4.4.
Avant cela, les sites Web WordPress affichaient d'abord le nom, l'e-mail et les champs du site Web, puis la zone de texte des commentaires. Nous pensons que nos utilisateurs sont habitués à voir le formulaire de commentaire dans cet ordre, nous utilisons donc toujours l'ancien ordre des champs dans WPBeginner.
Si vous le souhaitez, il vous suffit d'ajouter le code suivant au fichier functions.php de votre thème ou à un plug-in spécifique au site.
function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields('comment');
unset( $fields('comment') );
$fields('comment') = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');
Ce code déplace simplement le champ dans la zone de texte des commentaires vers le bas.
Supprimer le champ Site Web (URL) du formulaire de commentaire WordPress
Le champ du site Web dans le formulaire de commentaire attire de nombreux spammeurs. Bien que le supprimer n'empêchera pas les spammeurs ou ne réduira pas les commentaires de spam, il vous empêchera certainement d'approuver accidentellement un commentaire avec un lien vers le site Web du mauvais auteur.
Il 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 façon de supprimer le champ URL du site Web du formulaire de commentaire WordPress
Pour supprimer le champ URL du formulaire de commentaire, ajoutez simplement le code suivant à votre fichier functions.php ou à un plug-in spécifique au site.
function wpbeginner_remove_comment_url($arg) {
$arg('url') = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
Lorsque les utilisateurs laissent un commentaire sur votre site Web, ils peuvent vouloir suivre ce fil pour voir si quelqu'un a répondu à votre commentaire. L'ajout d'une case à cocher S'abonner aux commentaires permet aux utilisateurs de recevoir des notifications instantanées chaque fois qu'un nouveau commentaire apparaît dans la publication.
Pour ajouter cette case à cocher, la première chose que vous devez faire est d'installer et d'activer le plug-in Reload Subscribe to Comments. Lors de l'activation, vous devriez visiter Paramètres »S'abonner aux commentaires pour configurer les paramètres du plugin.
Pour des instructions détaillées étape par étape, consultez notre article sur la façon de permettre aux utilisateurs de s'abonner aux commentaires dans WordPress.
Les balises rapides sont des boutons de formatage qui permettent aux utilisateurs de concevoir facilement leurs commentaires. Il s'agit notamment de boutons pour mettre en gras, mettre en italique, ajouter un lien ou une citation de bloc.
Pour ajouter des balises rapides, vous devez installer et activer le plug-in de balises rapides de commentaire de base. 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 balises rapides.
Nous espérons que cet article vous a aidé à apprendre à concevoir le formulaire de commentaire WordPress pour le rendre plus amusant pour vos utilisateurs. Vous pouvez également consulter nos conseils pour plus de commentaires sur vos articles de blog WordPress.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter y Facebook.
