{"id":4073,"date":"2020-03-14T23:34:14","date_gmt":"2020-03-14T23:34:14","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-styliser-le-formulaire-de-commentaire-wordpress-ultimate-guide\/"},"modified":"2020-03-14T23:34:14","modified_gmt":"2020-03-14T23:34:14","slug":"comment-styliser-le-formulaire-de-commentaire-wordpress-ultimate-guide","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-styliser-le-formulaire-de-commentaire-wordpress-ultimate-guide\/","title":{"rendered":"Comment styliser le formulaire de commentaire WordPress (Ultimate Guide)"},"content":{"rendered":"

Vous voulez changer le style du formulaire de commentaire WordPress sur votre site Web? Les commentaires jouent un r\u00f4le important dans la cr\u00e9ation de l'engagement des utilisateurs sur un site Web. Un formulaire de commentaire attrayant et facile \u00e0 utiliser encourage les utilisateurs \u00e0 participer \u00e0 la discussion. C'est pourquoi nous avons cr\u00e9\u00e9 le guide d\u00e9finitif sur la fa\u00e7on de concevoir facilement le formulaire de commentaire WordPress. <\/p>\n

\"Conception<\/p>\n

<\/span>Avant de commencer<\/span><\/h4>\n

Les th\u00e8mes WordPress contr\u00f4lent l'apparence de votre site Web. Chaque th\u00e8me WordPress est livr\u00e9 avec diff\u00e9rents fichiers, notamment des fichiers de mod\u00e8le, des fichiers de fonction, des scripts Java et des feuilles de style. <\/p>\n

Les feuilles de style contiennent les r\u00e8gles CSS pour tous les \u00e9l\u00e9ments utilis\u00e9s par votre th\u00e8me WordPress. Vous pouvez ajouter votre propre CSS personnalis\u00e9 pour remplacer les r\u00e8gles de style de votre th\u00e8me. <\/p>\n

Si vous ne l'avez pas encore fait, consultez notre article sur la fa\u00e7on d'ajouter du CSS personnalis\u00e9 dans WordPress pour les d\u00e9butants. <\/p>\n

En plus de CSS, vous devrez peut-\u00eatre ajouter certaines fonctions pour modifier l'apparence par d\u00e9faut de votre formulaire de commentaire WordPress. Si vous ne l'avez pas encore fait, consultez notre article sur la fa\u00e7on de copier et coller du code dans WordPress. <\/p>\n

Cela dit, examinons comment concevoir le formulaire de commentaire WordPress. <\/p>\n

Comme il s'agit d'un guide assez complet, nous avons cr\u00e9\u00e9 une table des mati\u00e8res pour faciliter la navigation:<\/p>\n

    \n
  • Modifier les commentaires WordPress avec des classes CSS par d\u00e9faut<\/li>\n
  • Ajouter une connexion sociale au formulaire de commentaire WordPress<\/li>\n
  • Ajouter un texte de politique de commentaire dans le formulaire de commentaire WordPress<\/li>\n
  • D\u00e9placer le champ de texte de commentaire vers le bas<\/li>\n
  • Supprimer le champ du site Web (URL) du formulaire de commentaire WordPress<\/li>\n
  • Ajouter la case \u00e0 cocher S'abonner aux commentaires dans WordPress<\/li>\n
  • Ajouter des balises rapides dans les commentaires WordPress<\/li>\n<\/ul>\n

    Dans la plupart des th\u00e8mes WordPress, il existe un mod\u00e8le appel\u00e9 comments.php. Ce fichier est utilis\u00e9 pour afficher des commentaires et des formulaires de commentaires sur vos articles de blog. Le formulaire de commentaire WordPress est g\u00e9n\u00e9r\u00e9 \u00e0 l'aide de la fonction :.<\/p>\n

    Par d\u00e9faut, cette fonction g\u00e9n\u00e8re 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 \u00e0 cocher pour la conformit\u00e9 RGPD et le bouton Envoyer. <\/p>\n

    Vous pouvez facilement modifier chacun de ces champs en ajustant simplement les classes CSS par d\u00e9faut. Vous trouverez ci-dessous une liste des classes CSS par d\u00e9faut que WordPress ajoute \u00e0 chaque formulaire de commentaire.<\/p>\n

    \r\n#respond { } \r\n#reply-title { } \r\n#cancel-comment-reply-link { }\r\n#commentform { } \r\n#author { } \r\n#email { } \r\n#url { } \r\n#comment \r\n#submit\r\n.comment-notes { } \r\n.required { }\r\n.comment-form-author { }\r\n.comment-form-email { } \r\n.comment-form-url { }\r\n.comment-form-comment { } \r\n.comment-form-cookies-consent { }\r\n.form-allowed-tags { } \r\n.form-submit\r\n<\/pre>\n
    En ajustant simplement ces classes CSS, vous pouvez compl\u00e8tement changer l'apparence de votre formulaire de commentaire WordPress. <\/p>\n
    Allons de l'avant et essayons de changer quelques \u00e9l\u00e9ments, afin que vous puissiez avoir une bonne id\u00e9e de son fonctionnement.<\/p>\n
    Tout d'abord, nous commencerons par mettre en \u00e9vidence le champ du formulaire actif. En mettant en surbrillance le champ actuellement actif, votre formulaire est plus accessible aux personnes ayant des besoins sp\u00e9ciaux, et il am\u00e9liore \u00e9galement l'apparence de votre formulaire de commentaire sur les petits appareils.<\/p>\n
    \r\n\t\r\n#respond { \r\nbackground: #fbfbfb;\r\npadding:0 10px 0 10px;\r\n}\r\n \r\n\/* Highlight active form field *\/\r\n \r\n#respond input(type=text), textarea {\r\n  -webkit-transition: all 0.30s ease-in-out;\r\n  -moz-transition: all 0.30s ease-in-out;\r\n  -ms-transition: all 0.30s ease-in-out;\r\n  -o-transition: all 0.30s ease-in-out;\r\n  outline: none;\r\n  padding: 3px 0px 3px 3px;\r\n  margin: 5px 1px 3px 0px;\r\n  border: 1px solid #DDDDDD;\r\n}\r\n  \r\n  \r\n#respond input(type=text):focus,\r\ninput(type=email):focus, \r\ninput(type=url):focus,\r\ntextarea:focus {\r\nbox-shadow: 0 0 5px rgba(81, 203, 238, 1);\r\nmargin: 5px 1px 3px 0px;\r\nborder: 2px solid rgba(81, 203, 238, 1);\r\n}\r\n\r\n<\/pre>\n
    Voici \u00e0 quoi ressemblait notre formulaire dans le th\u00e8me WordPress Twenty Sixteen apr\u00e8s les modifications:<\/p>\n
    \"Mettez<\/p>\n
    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.<\/p>\n
    \r\n\r\n#author, #email { \r\nfont-family: \"Open Sans\", \"Droid Sans\", Arial;\r\nfont-style:italic;\r\ncolor:#1d1d1d; \r\nletter-spacing:.1em;\r\n} \r\n \r\n#url  { \r\ncolor: #1d1d1d;\r\nfont-family: \"Luicida Console\", \"Courier New\", \"Courier\", monospace; \r\n} \r\n\r\n<\/pre>\n
    Si vous regardez de plus pr\u00e8s la capture d'\u00e9cran ci-dessous, le nom et la source du champ e-mail sont diff\u00e9rents de l'URL du site Web.<\/p>\n
    \"Modifier<\/p>\n
    Vous pouvez \u00e9galement modifier le style de bouton d'envoi du formulaire de commentaire WordPress. Au lieu d'utiliser le bouton d'envoi par d\u00e9faut, donnons-lui un d\u00e9grad\u00e9 CSS3 et une ombre de bo\u00eete.<\/p>\n
    \r\n#submit {\r\nbackground:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);\r\nbackground:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);\r\nbackground:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);\r\nbackground:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);\r\nbackground:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);\r\nbackground-color:#44c767;\r\n-moz-border-radius:28px;\r\n-webkit-border-radius:28px;\r\nborder-radius:28px;\r\nborder:1px solid #18ab29;\r\ndisplay:inline-block;\r\ncursor:pointer;\r\ncolor:#ffffff;\r\nfont-family:Arial;\r\nfont-size:17px;\r\npadding:16px 31px;\r\ntext-decoration:none;\r\ntext-shadow:0px 1px 0px #2f6627;\r\n} \r\n \r\n#submit:hover {\r\nbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));\r\nbackground:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);\r\nbackground:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);\r\nbackground:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);\r\nbackground:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);\r\nbackground:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);\r\nbackground-color:#5cbf2a; \r\n}\r\n#submit:active { \r\nposition:relative;\r\ntop:1px;\r\n}\r\n<\/pre>\n
    \"Style<\/p>\n
    <\/span>Faire passer les formulaires de commentaires WordPress au niveau sup\u00e9rieur<\/span><\/h4>\n
    Vous pensez peut-\u00eatre que c'\u00e9tait trop basique. Eh bien, nous devons commencer par l\u00e0, pour que tout le monde puisse nous suivre. <\/p>\n
    Vous pouvez faire passer votre formulaire de commentaire WordPress au niveau sup\u00e9rieur en r\u00e9organisant les champs du formulaire, en ajoutant une connexion sociale, en vous abonnant aux commentaires, aux directives de commentaire, aux balises rapides, etc.<\/p>\n
    <\/span>Ajoutez une connexion sociale aux commentaires WordPress<\/span><\/h4>\n
    Commen\u00e7ons par ajouter des connexions sociales aux commentaires WordPress. <\/p>\n
    La premi\u00e8re chose \u00e0 faire est d'installer et d'activer le plugin de connexion sociale WordPress. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d'installer un plugin WordPress.<\/p>\n
    Apr\u00e8s l'activation, vous devez visiter Param\u00e8tres \u00bbWP Social Login<\/strong> pour configurer les param\u00e8tres du plugin. <\/p>\n
    \"Param\u00e8tres<\/p>\n
    Le plugin n\u00e9cessitera des cl\u00e9s API pour se connecter aux plateformes sociales. Vous verrez des liens vers des instructions sur la fa\u00e7on d'obtenir ces informations pour chaque plate-forme. <\/p>\n
    Apr\u00e8s avoir entr\u00e9 vos cl\u00e9s API, cliquez sur le bouton Enregistrer les param\u00e8tres pour enregistrer vos modifications. <\/p>\n
    Vous pouvez maintenant visiter leur site Web pour voir les boutons de connexion sociale au-dessus de leur formulaire de commentaire. <\/p>\n
    \"Ajouter<\/p>\n
    Nous aimons tous nos utilisateurs, et nous appr\u00e9cions vraiment de prendre le temps de laisser un commentaire sur notre site. Cependant, pour cr\u00e9er un environnement de discussion sain, il est important de mod\u00e9rer les commentaires. <\/p>\n
    Pour une transparence totale, nous avons cr\u00e9\u00e9 une page de politique de commentaires, mais vous ne pouvez pas mettre ce lien dans le pied de page. <\/p>\n
    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\u00e9cid\u00e9 d'ajouter la politique de commentaire dans notre formulaire de commentaire WordPress. <\/p>\n
    Si vous souhaitez ajouter une page de politique de commentaires, la premi\u00e8re chose que vous devez faire est de cr\u00e9er une page WordPress et de d\u00e9finir votre politique de commentaires (vous pouvez voler la n\u00f4tre et la modifier selon vos besoins). <\/p>\n
    Apr\u00e8s cela, vous pouvez ajouter le code suivant dans le fichier functions.php de votre th\u00e8me ou un plugin sp\u00e9cifique au site. <\/p>\n
    \r\n\r\nfunction wpbeginner_comment_text_before($arg) {\r\n    $arg('comment_notes_before') = \"\";\r\n    return $arg;\r\n}\r\n \r\nadd_filter('comment_form_defaults', 'wpbeginner_comment_text_before');\r\n\r\n<\/pre>\n
    Le code ci-dessus remplacera le formulaire de commentaire par d\u00e9faut avant les notes avec ce texte. Nous avons \u00e9galement ajout\u00e9 une classe CSS au code, afin que nous puissions mettre en \u00e9vidence l'avertissement \u00e0 l'aide de CSS. Voici l'exemple CSS que nous utilisons: <\/p>\n
    \r\np.comment-policy {\r\n    border: 1px solid #ffd499;\r\n    background-color: #fff4e5;\r\n    border-radius: 5px;\r\n    padding: 10px;\r\n    margin: 10px 0px 10px 0px;\r\n    font-size: small;\r\n    font-style: italic;\r\n}\r\n<\/pre>\n
    Voici \u00e0 quoi cela ressemblait sur notre site de test: <\/p>\n
    \"Avis<\/p>\n
    Si vous souhaitez afficher le lien apr\u00e8s la zone de texte du commentaire, utilisez le code suivant. <\/p>\n
    \r\n\r\nfunction wpbeginner_comment_text_after($arg) {\r\n    $arg('comment_notes_after') = \"\";\r\n    return $arg;\r\n}\r\n \r\nadd_filter('comment_form_defaults', 'wpbeginner_comment_text_after');\r\n<\/pre>\n
    N'oubliez pas de modifier l'URL en cons\u00e9quence, alors allez sur votre page de politique de commentaire au lieu d'exemple.com \":)\"<\/p>\n
    Par d\u00e9faut, 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 \u00e9t\u00e9 introduite dans WordPress 4.4. <\/p>\n
    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\u00e9s \u00e0 voir le formulaire de commentaire dans cet ordre, nous utilisons donc toujours l'ancien ordre des champs dans WPBeginner. <\/p>\n
    Si vous le souhaitez, il vous suffit d'ajouter le code suivant au fichier functions.php de votre th\u00e8me ou \u00e0 un plug-in sp\u00e9cifique au site. <\/p>\n
    \r\nfunction wpb_move_comment_field_to_bottom( $fields ) {\r\n$comment_field = $fields('comment');\r\nunset( $fields('comment') );\r\n$fields('comment') = $comment_field;\r\nreturn $fields;\r\n}\r\n \r\nadd_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom'); \r\n<\/pre>\n
    Ce code d\u00e9place simplement le champ dans la zone de texte des commentaires vers le bas. <\/p>\n
    \"Zone<\/p>\n
    <\/span>Supprimer le champ Site Web (URL) du formulaire de commentaire WordPress<\/span><\/h4>\n
    Le champ du site Web dans le formulaire de commentaire attire de nombreux spammeurs. Bien que le supprimer n'emp\u00eachera pas les spammeurs ou ne r\u00e9duira pas les commentaires de spam, il vous emp\u00eachera certainement d'approuver accidentellement un commentaire avec un lien vers le site Web du mauvais auteur.<\/p>\n
    Il r\u00e9duira \u00e9galement 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\u00e7on de supprimer le champ URL du site Web du formulaire de commentaire WordPress<\/p>\n
    Pour supprimer le champ URL du formulaire de commentaire, ajoutez simplement le code suivant \u00e0 votre fichier functions.php ou \u00e0 un plug-in sp\u00e9cifique au site. <\/p>\n
    \r\nfunction wpbeginner_remove_comment_url($arg) {\r\n    $arg('url') = '';\r\n    return $arg;\r\n}\r\nadd_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');\r\n<\/pre>\n
    \"Supprimez<\/p>\n
    Lorsque les utilisateurs laissent un commentaire sur votre site Web, ils peuvent vouloir suivre ce fil pour voir si quelqu'un a r\u00e9pondu \u00e0 votre commentaire. L'ajout d'une case \u00e0 cocher S'abonner aux commentaires permet aux utilisateurs de recevoir des notifications instantan\u00e9es chaque fois qu'un nouveau commentaire appara\u00eet dans la publication. <\/p>\n
    Pour ajouter cette case \u00e0 cocher, la premi\u00e8re 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\u00e8tres \u00bbS'abonner aux commentaires pour configurer les param\u00e8tres du plugin.<\/p>\n
    Pour des instructions d\u00e9taill\u00e9es \u00e9tape par \u00e9tape, consultez notre article sur la fa\u00e7on de permettre aux utilisateurs de s'abonner aux commentaires dans WordPress.<\/p>\n
    \"Abonnez-vous<\/p>\n
    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. <\/p>\n
    Pour ajouter des balises rapides, vous devez installer et activer le plug-in de balises rapides de commentaire de base. Pour plus de d\u00e9tails, consultez notre article sur la fa\u00e7on d'ajouter facilement des balises rapides dans le formulaire de commentaire WordPress. <\/p>\n
    Voici \u00e0 quoi ressemblera votre formulaire de commentaire apr\u00e8s l'ajout de balises rapides. <\/p>\n
    \"balises<\/p>\n
    Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 apprendre \u00e0 concevoir le formulaire de commentaire WordPress pour le rendre plus amusant pour vos utilisateurs. Vous pouvez \u00e9galement consulter nos conseils pour plus de commentaires sur vos articles de blog WordPress. <\/p>\n
    Si vous avez aim\u00e9 cet article, abonnez-vous \u00e0 notre cha\u00eene YouTube pour regarder des vid\u00e9os de didacticiel WordPress. Vous pouvez \u00e9galement nous trouver sur Twitter y Facebook.<\/p>\n  
    \n
    \n
    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n