{"id":25854,"date":"2021-06-14T13:44:00","date_gmt":"2021-06-14T10:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25854"},"modified":"2021-10-18T02:04:32","modified_gmt":"2021-10-17T23:04:32","slug":"comment-personnaliser-le-formulaire-de-commentaire-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-personnaliser-le-formulaire-de-commentaire-dans-wordpress\/","title":{"rendered":"Comment personnaliser le formulaire de commentaire dans WordPress"},"content":{"rendered":"<p>WordPress est livr\u00e9 avec le formulaire de commentaire dans son noyau. Ce formulaire de commentaire s&rsquo;affichera g\u00e9n\u00e9ralement sur vos publications. Les visiteurs peuvent laisser leurs commentaires en utilisant le formulaire de commentaires. Offrir une fonction de commentaire aux visiteurs vous aide \u00e0 comprendre ce qu&rsquo;ils pensent de votre contenu. Cela vous aidera \u00e0 am\u00e9liorer votre contenu et \u00e0 travailler sur d&rsquo;autres commentaires.<\/p>\n<p>Par d\u00e9faut, WordPress fournit des champs tels que le message, le nom, l&rsquo;e-mail, le site Web et la case \u00e0 cocher (pour enregistrer vos informations sur le navigateur pour le prochain commentaire) sur le formulaire de commentaire. Selon vos besoins, vous devrez peut-\u00eatre ajouter ou supprimer des champs dans les formulaires de commentaires.<\/p>\n<p>On peut \u00e9galement vouloir ajouter un style pour le formulaire de commentaire rendu. WordPress fournit une classe unique pour les champs de formulaire et de commentaire. En utilisant ces classes, les utilisateurs peuvent appliquer leur propre style.<\/p>\n<p>Dans cet article, nous allons voir comment ajouter un champ suppl\u00e9mentaire au formulaire de commentaire existant. \u00c0 titre d&rsquo;exemple, je vais prendre un champ de num\u00e9ro de mobile et l&rsquo;ajouter au formulaire. Donc, pour personnaliser le formulaire de commentaire, nous allons effectuer les \u00e9tapes ci-dessous une par une.<\/p>\n<ul>\n<li>Ajouter un champ au formulaire de commentaire<\/li>\n<li>V\u00e9rifiez si le champ est vide ou non<\/li>\n<li>Enregistrez ce champ en tant que m\u00e9ta de commentaire<\/li>\n<li>Afficher la m\u00e9ta-bo\u00eete sur le formulaire d&rsquo;\u00e9dition de commentaire (sur le backend)<\/li>\n<li>Enregistrer le m\u00e9ta de commentaire (depuis le backend)<\/li>\n<\/ul>\n<p>En plus de cela, je vais \u00e9galement vous montrer comment supprimer le champ du formulaire de commentaire WordPress.<\/p>\n<h3>Ajouter un champ au formulaire de commentaire<\/h3>\n<p>Le formulaire de commentaire est rendu \u00e0 partir des fichiers principaux de WordPress et nous ne devons toucher \u00e0 aucun fichier principal. Heureusement, WordPress fournit des crochets pour \u00e9tendre les fonctionnalit\u00e9s de base. Cela dit, WordPress fournit un crochet d&rsquo;action \u00e0 l&rsquo; <code>comment_form_after_fields<\/code>aide duquel nous pouvons ajouter des champs au formulaire de commentaire.<\/p>\n<p>Ajoutons un num\u00e9ro de mobile \u00e0 l&rsquo;aide de ce crochet d&rsquo;action. Placez le code ci-dessous dans le <code>functions.php<\/code>fichier.<\/p>\n<pre><code>add_action( 'comment_form_after_fields', 'additional_fields' );\nfunction additional_fields() {\n\u00a0\u00a0\u00a0\u00a0echo '&lt;p class=\"comment-form-mobile-number\"&gt;'. \u00a0\u00a0\u00a0\u00a0'&lt;label for=\"mobile-number\"&gt;'. esc_html__( 'Mobile Number' ). '&lt;span class=\"required\"&gt;*&lt;\/span&gt;&lt;\/label&gt;'. \u00a0\u00a0\u00a0\u00a0'&lt;input id=\"mobile-number\" name=\"mobile-number\" type=\"text\" size=\"30\" tabindex=\"5\" \/&gt;&lt;\/p&gt;';\n}<\/code><\/pre>\n<p>Maintenant, rendez-vous sur votre page Web et rechargez-la. Vous devriez voir le nouveau champ \u00ab\u00a0Num\u00e9ro de mobile\u00a0\u00bb ajout\u00e9 \u00e0 votre formulaire de commentaire.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20214-6081ce6c3a810.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20214-6081ce6c3a810.png\" alt=\"Comment personnaliser le formulaire de commentaire dans WordPress\" ><\/a><\/p>\n<h3>V\u00e9rifiez si le champ est vide ou non<\/h3>\n<p>Cette \u00e9tape est facultative. Si vous ne souhaitez pas garder un champ mobile obligatoire, ignorez cette \u00e9tape. Si ce champ est obligatoire, nous devons v\u00e9rifier si les visiteurs ont rempli ce champ ou non. Pour ajouter ces v\u00e9rifications \u00e0 l&rsquo;ex\u00e9cution, nous utiliserons le filtre <code>preprocess_comment<\/code>. Lorsqu&rsquo;un utilisateur clique sur le bouton d&rsquo;envoi, ce filtre v\u00e9rifie si le champ sp\u00e9cifique est vide ou non. S&rsquo;il est vide, il arr\u00eate l&rsquo;ex\u00e9cution et affiche le message aux utilisateurs.<\/p>\n<p>Utilisez le filtre <code>preprocess_comment<\/code>comme indiqu\u00e9 dans le code suivant. Ce code va \u00e9galement \u00e0 l&rsquo;int\u00e9rieur du <code>functions.php<\/code>fichier.<\/p>\n<pre><code>add_filter( 'preprocess_comment', 'verify_comment_mobile_number' );\nfunction verify_comment_mobile_number( $commentdata) {\n\u00a0\u00a0\u00a0\u00a0if (empty( $_POST['mobile-number'])) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_die( esc_html__( 'Error: You did not add a mobile number. Please resubmit your comment with a mobile number.') );\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0return $commentdata;\n}<\/code><\/pre>\n<h3>Enregistrer un nouveau champ contre un commentaire<\/h3>\n<p>Dans les \u00e9tapes pr\u00e9c\u00e9dentes, nous avons ajout\u00e9 un nouveau champ et avons \u00e9galement vu comment le rendre obligatoire. Maintenant, nous devons enregistrer ce champ dans la base de donn\u00e9es contre le m\u00eame commentaire. Pour y parvenir, nous utiliserons l&rsquo;action <code>comment_post<\/code>. Cette action nous donne l&rsquo;identifiant du commentaire actuellement soumis. En utilisant l&rsquo;identifiant de commentaire, nous pouvons enregistrer notre champ mobile avec la <code>add_comment_meta<\/code>fonction.<\/p>\n<pre><code>add_action( 'comment_post', 'save_comment_mobile_number' );\nfunction save_comment_mobile_number( $comment_id) {\n\u00a0\u00a0\u00a0\u00a0if (( isset( $_POST['mobile-number'])) &amp;&amp; (! empty( $_POST['mobile-number']) )) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mobile_number = wp_filter_nohtml_kses($_POST['mobile-number']);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0add_comment_meta( $comment_id, 'mobile-number', $mobile_number );\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n<p>Ici, j&rsquo;ai utilis\u00e9 la <code>wp_filter_nohtml_kses<\/code>fonction pour nettoyer les donn\u00e9es saisies.<\/p>\n<h3>Afficher la bo\u00eete m\u00e9ta sur le formulaire d&rsquo;\u00e9dition de commentaire (sur le backend)<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons termin\u00e9 d&rsquo;ajouter un nouveau champ au formulaire de commentaire frontal et d&rsquo;enregistrer ce champ nouvellement ajout\u00e9. Maintenant, en tant qu&rsquo;administrateur, vous devriez voir ce champ sur le backend.<\/p>\n<p>Si vous acc\u00e9dez \u00e0 la liste des commentaires sur le backend, vous pouvez voir que chaque commentaire a son propre formulaire d&rsquo;\u00e9dition. A partir de ce formulaire, l&rsquo;administrateur peut modifier le commentaire. Notre prochain objectif est d&rsquo;afficher le num\u00e9ro de mobile sur ce formulaire de modification de commentaire.<\/p>\n<p>Pour cela, je vais ajouter une m\u00e9ta-bo\u00eete sous laquelle on placera le num\u00e9ro de portable. Utilisez le code ci-dessous dans le <code>functions.php<\/code>qui ajoutera une bo\u00eete m\u00e9ta avec le num\u00e9ro de t\u00e9l\u00e9phone portable.<\/p>\n<pre><code>add_action( 'add_meta_boxes_comment', 'comment_add_meta_box' );\nfunction comment_add_meta_box() {\n\u00a0\u00a0\u00a0\u00a0add_meta_box( 'title', __( 'Comment Metadata' ), 'comment_meta_box', 'comment', 'normal', 'high' );\n}\n\u00a0\nfunction comment_meta_box( $comment) {\n\u00a0\u00a0\u00a0\u00a0$mobile_number = get_comment_meta( $comment-&gt;comment_ID, 'mobile-number', true );\n\u00a0\u00a0\u00a0\u00a0wp_nonce_field( 'comment_update', 'comment_update_nonce', false );\n\u00a0\u00a0\u00a0\u00a0?&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"mobile-number\"&gt;&lt;?php esc_html_e( 'Mobile Number' ); ?&gt;&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" name=\"mobile-number\" value=\"&lt;?php echo esc_attr( $mobile_number ); ?&gt;\" class=\"widefat\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;?php\n}<\/code><\/pre>\n<h3>Enregistrer le m\u00e9ta de commentaire (depuis le backend)<\/h3>\n<p>Nous avons presque termin\u00e9 la t\u00e2che. Il ne reste plus qu&rsquo;\u00e0 modifier le num\u00e9ro de mobile lorsque l&rsquo;administrateur le met \u00e0 jour. Cela peut \u00eatre facilement fait \u00e0 l&rsquo;aide de l&rsquo; <code>edit_comment<\/code>action suivante.<\/p>\n<pre><code>add_action( 'edit_comment', 'comment_edit_metafields' );\nfunction comment_edit_metafields( $comment_id) {\n\u00a0\u00a0\u00a0\u00a0if (! isset( $_POST['comment_update_nonce']) ||! wp_verify_nonce( $_POST['comment_update_nonce'], 'comment_update')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if (( isset( $_POST['mobile-number'])) &amp;&amp; (! empty( $_POST['mobile-number'])) ): \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mobile_number = wp_filter_nohtml_kses( $_POST['mobile-number'] );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0update_comment_meta( $comment_id, 'mobile-number', $mobile_number );\n\u00a0\u00a0\u00a0\u00a0else: \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0delete_comment_meta( $comment_id, 'mobile-number' );\n\u00a0\u00a0\u00a0\u00a0endif;\n}<\/code><\/pre>\n<p>Il s&rsquo;agit d&rsquo;ajouter un nouveau champ en personnalisant le formulaire de commentaire dans WordPress. Voyons maintenant comment supprimer des champs du formulaire de commentaire.<\/p>\n<h3>Supprimer le champ du formulaire de commentaire dans WordPress<\/h3>\n<p>Comme nous le savons tous, WordPress fournit quelques champs (message, nom, e-mail, site Web et case \u00e0 cocher) dans le formulaire de commentaire. Vous pouvez supprimer l&rsquo;un d&rsquo;entre eux. Supposons que vous souhaitiez supprimer le champ du site Web du formulaire. Nous pouvons le faire en utilisant le filtre comment_form_default_fields. Vous devez conna\u00eetre la cl\u00e9 du champ du site Web. Maintenant, la question est de savoir comment obtenir les cl\u00e9s des champs du formulaire de commentaire.<\/p>\n<p>Je le fais en \u00e9crivant les champs dans le fichier texte factice.<\/p>\n<pre><code>add_filter('comment_form_default_fields', 'remove_comment_form_fields');\nfunction remove_comment_form_fields($fields) {\n\u00a0\u00a0\u00a0\u00a0file_put_contents('test.txt', print_r($fields, true));\n}<\/code><\/pre>\n<p>Maintenant, si vous rechargez la page qui a un formulaire de commentaire, le fichier <code>test.txt<\/code>sera cr\u00e9\u00e9 dans le dossier racine. Dans mon cas, ce fichier a le contenu suivant.<\/p>\n<pre><code>Array (\u00a0\u00a0\u00a0\u00a0[author] =&gt; &lt;p class=\"comment-form-author\"&gt;&lt;label for=\"author\"&gt;Name &lt;span class=\"required\"&gt;*&lt;\/span&gt;&lt;\/label&gt; &lt;input id=\"author\" name=\"author\" type=\"text\" value=\"\" size=\"30\" maxlength=\"245\" required='required' \/&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0[email] =&gt; &lt;p class=\"comment-form-email\"&gt;&lt;label for=\"email\"&gt;Email &lt;span class=\"required\"&gt;*&lt;\/span&gt;&lt;\/label&gt; &lt;input id=\"email\" name=\"email\" type=\"email\" value=\"\" size=\"30\" maxlength=\"100\" aria-describedby=\"email-notes\" required='required' \/&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0[url] =&gt; &lt;p class=\"comment-form-url\"&gt;&lt;label for=\"url\"&gt;Website&lt;\/label&gt; &lt;input id=\"url\" name=\"url\" type=\"url\" value=\"\" size=\"30\" maxlength=\"200\" \/&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0[cookies] =&gt; &lt;p class=\"comment-form-cookies-consent\"&gt;&lt;input id=\"wp-comment-cookies-consent\" name=\"wp-comment-cookies-consent\" type=\"checkbox\" value=\"yes\" \/&gt; &lt;label for=\"wp-comment-cookies-consent\"&gt;Save my name, email, and website in this browser for the next time I comment.&lt;\/label&gt;&lt;\/p&gt;\n)<\/code><\/pre>\n<p>Il vous donne clairement les cl\u00e9s des champs de formulaire. Pour le champ du site Web, la cl\u00e9 est &lsquo;url&rsquo;. Je vais donc modifier le code ci-dessus comme suit, ce qui supprimera le champ du site Web du formulaire de commentaire.<\/p>\n<pre><code>add_filter('comment_form_default_fields', 'remove_comment_form_fields');\nfunction remove_comment_form_fields($fields) {\n\u00a0\u00a0\u00a0\u00a0if(isset($fields['url'])) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0unset($fields['url']);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0return $fields;\n}<\/code><\/pre>\n<p>De la m\u00eame mani\u00e8re, vous pouvez \u00e9galement supprimer d&rsquo;autres champs du formulaire de commentaire.<\/p>\n<p>J&rsquo;esp\u00e8re que vous comprenez comment personnaliser le formulaire de commentaire dans WordPress. S&rsquo;il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n<h4>Articles Li\u00e9s<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/afficher-les-articles-d-une-categorie-specifique-sur-une-page-wordpress\/\" title=\"Afficher les articles d'une cat\u00e9gorie sp\u00e9cifique sur une page WordPress\" >Afficher les articles d&rsquo;une cat\u00e9gorie sp\u00e9cifique sur une page WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-une-disposition-de-grille-de-maconnerie-dans-wordpress\/\" title=\"Comment ajouter une disposition de grille de ma\u00e7onnerie dans WordPress\" >Comment ajouter une disposition de grille de ma\u00e7onnerie dans WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-exporter-des-articles-au-format-csv-dans-wordpress\/\" title=\"Comment exporter des articles au format CSV dans WordPress\" >Comment exporter des articles au format CSV dans WordPress<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous souhaitez personnaliser le formulaire de commentaire dans WordPress ? Dans cet article, nous \u00e9tudions quelques crochets d&rsquo;action et de filtrage qui nous aident \u00e0 personnaliser<\/p>\n","protected":false},"author":1,"featured_media":21625,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[608],"tags":[844],"class_list":["post-25854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized-4","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/25854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=25854"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/25854\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/21625"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=25854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=25854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=25854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}