{"id":28584,"date":"2021-06-14T13:47:00","date_gmt":"2021-06-14T10:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28584"},"modified":"2021-10-18T04:00:02","modified_gmt":"2021-10-18T01:00:02","slug":"como-personalizar-o-formulario-de-comentario-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-personalizar-o-formulario-de-comentario-no-wordpress\/","title":{"rendered":"Como personalizar o formul\u00e1rio de coment\u00e1rio no WordPress"},"content":{"rendered":"<p>O WordPress vem com o formul\u00e1rio de coment\u00e1rio em seu n\u00facleo. Este formul\u00e1rio de coment\u00e1rio ser\u00e1 exibido geralmente em suas postagens. Os visitantes podem deixar seus coment\u00e1rios usando o formul\u00e1rio de coment\u00e1rios. Fornecer um recurso de coment\u00e1rio para os visitantes ajuda voc\u00ea a entender o que eles pensam sobre o seu conte\u00fado. Isso ajudar\u00e1 a melhorar seu conte\u00fado e trabalhar em outros coment\u00e1rios tamb\u00e9m.<\/p>\n<p>Por padr\u00e3o, o WordPress fornece campos como mensagem, nome, e-mail, site e caixa de sele\u00e7\u00e3o (para salvar seus detalhes no navegador para o pr\u00f3ximo coment\u00e1rio) no formul\u00e1rio de coment\u00e1rio. Dependendo de sua necessidade, pode ser necess\u00e1rio adicionar ou remover campos dos formul\u00e1rios de coment\u00e1rios.<\/p>\n<p>Tamb\u00e9m se pode desejar adicionar um estilo ao formul\u00e1rio de coment\u00e1rio renderizado. O WordPress fornece uma classe \u00fanica para os campos de formul\u00e1rio e coment\u00e1rio. Usando essas classes, os usu\u00e1rios podem aplicar seu pr\u00f3prio estilo.<\/p>\n<p>Neste artigo, veremos como adicionar mais um campo ao formul\u00e1rio de coment\u00e1rios existente. Por exemplo, vou pegar um campo de n\u00famero de celular e adicion\u00e1-lo ao formul\u00e1rio. Portanto, para personalizar o formul\u00e1rio de coment\u00e1rios, executaremos as etapas abaixo, uma a uma.<\/p>\n<ul>\n<li>Adicionar campo ao formul\u00e1rio de coment\u00e1rio<\/li>\n<li>Verifique se o campo est\u00e1 vazio ou n\u00e3o<\/li>\n<li>Salve este campo como um meta de coment\u00e1rio<\/li>\n<li>Exibir Meta Box no formul\u00e1rio de edi\u00e7\u00e3o de coment\u00e1rio (no backend)<\/li>\n<li>Salvar coment\u00e1rio Meta (do backend)<\/li>\n<\/ul>\n<p>Al\u00e9m disso, tamb\u00e9m vou mostrar como remover o campo do formul\u00e1rio de coment\u00e1rios do WordPress.<\/p>\n<h3>Adicionar campo ao formul\u00e1rio de coment\u00e1rio<\/h3>\n<p>O formul\u00e1rio de coment\u00e1rio \u00e9 renderizado a partir dos arquivos principais do WordPress e n\u00e3o devemos tocar em nenhum arquivo principal. Felizmente, o WordPress fornece ganchos para estender as funcionalidades principais. Dito isso, o WordPress fornece um gancho de a\u00e7\u00e3o <code>comment_form_after_fields<\/code>com o qual podemos adicionar campos ao formul\u00e1rio de coment\u00e1rios.<\/p>\n<p>Vamos adicionar um n\u00famero de celular usando este gancho de a\u00e7\u00e3o. Coloque o c\u00f3digo abaixo no <code>functions.php<\/code>arquivo.<\/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>Agora, v\u00e1 para sua p\u00e1gina da web e recarregue-a. Voc\u00ea deve ver o novo campo &#8216;N\u00famero de celular&#8217; adicionado ao seu formul\u00e1rio de coment\u00e1rios.<\/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=\"Como personalizar o formul\u00e1rio de coment\u00e1rio no WordPress\" ><\/a><\/p>\n<h3>Verifique se o campo est\u00e1 vazio ou n\u00e3o<\/h3>\n<p>Esta etapa \u00e9 opcional. Se voc\u00ea n\u00e3o quiser manter um campo m\u00f3vel obrigat\u00f3rio, pule esta etapa. Se este campo for obrigat\u00f3rio, ent\u00e3o temos que verificar se os visitantes preencheram este campo ou n\u00e3o. Para adicionar essas verifica\u00e7\u00f5es em tempo de execu\u00e7\u00e3o, usaremos o filtro <code>preprocess_comment<\/code>. Quando um usu\u00e1rio clica no bot\u00e3o enviar, este filtro verifica se o campo espec\u00edfico est\u00e1 vazio ou n\u00e3o. Se estiver vazio, ele interrompe a execu\u00e7\u00e3o e mostra a mensagem aos usu\u00e1rios.<\/p>\n<p>Use o filtro <code>preprocess_comment<\/code>conforme mostrado no c\u00f3digo a seguir. Este c\u00f3digo tamb\u00e9m vai dentro do <code>functions.php<\/code>arquivo.<\/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>Salvar novo campo contra um coment\u00e1rio<\/h3>\n<p>Nas etapas anteriores, adicionamos um novo campo e tamb\u00e9m vimos como torn\u00e1-lo obrigat\u00f3rio. Agora devemos salvar este campo no banco de dados com o mesmo coment\u00e1rio. Para conseguir isso, vamos usar a a\u00e7\u00e3o <code>comment_post<\/code>. Esta a\u00e7\u00e3o nos fornece o id do coment\u00e1rio enviado no momento. Usando o id do coment\u00e1rio, podemos salvar nosso campo m\u00f3vel com a <code>add_comment_meta<\/code>fun\u00e7\u00e3o.<\/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>Aqui, usei a <code>wp_filter_nohtml_kses<\/code>fun\u00e7\u00e3o para higienizar os dados inseridos.<\/p>\n<h3>Exibir Meta Box no formul\u00e1rio de edi\u00e7\u00e3o de coment\u00e1rio (no backend)<\/h3>\n<p>At\u00e9 agora, conclu\u00edmos a adi\u00e7\u00e3o de um novo campo ao formul\u00e1rio de coment\u00e1rio do frontend e salvamos o campo rec\u00e9m-adicionado. Agora, como administrador, voc\u00ea deve ver este campo no backend.<\/p>\n<p>Se voc\u00ea acessar a lista de coment\u00e1rios no backend, ver\u00e1 que cada coment\u00e1rio tem seu pr\u00f3prio formul\u00e1rio de edi\u00e7\u00e3o. A partir deste formul\u00e1rio, o administrador pode editar o coment\u00e1rio. Nosso pr\u00f3ximo objetivo \u00e9 mostrar o n\u00famero do celular neste formul\u00e1rio de edi\u00e7\u00e3o de coment\u00e1rios.<\/p>\n<p>Para isso, vou adicionar uma metacaixa sob a qual colocaremos o n\u00famero do celular. Use o c\u00f3digo abaixo no <code>functions.php<\/code>que ir\u00e1 adicionar uma caixa meta com o n\u00famero do celular.<\/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>Salvar coment\u00e1rio Meta (do backend)<\/h3>\n<p>Estamos quase terminando a tarefa. O que resta \u00e9 editar o n\u00famero do celular quando o administrador o atualizar. Isso pode ser feito facilmente com a ajuda da <code>edit_comment<\/code>a\u00e7\u00e3o a seguir.<\/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>\u00c9 tudo sobre como adicionar um novo campo personalizando o formul\u00e1rio de coment\u00e1rio no WordPress. Agora, vamos ver como se pode remover campos do formul\u00e1rio de coment\u00e1rios.<\/p>\n<h3>Remover campo do formul\u00e1rio de coment\u00e1rio no WordPress<\/h3>\n<p>Como todos sabemos, o WordPress fornece alguns campos (mensagem, nome, e-mail, site e caixa de sele\u00e7\u00e3o) no formul\u00e1rio de coment\u00e1rio. Voc\u00ea pode querer remover qualquer um deles. Digamos que voc\u00ea queira remover o campo do site do formul\u00e1rio. Podemos fazer isso usando o filtro comment_form_default_fields. Voc\u00ea deve saber a chave do campo do site. Agora, a quest\u00e3o \u00e9 como obter as chaves dos campos do formul\u00e1rio de coment\u00e1rios.<\/p>\n<p>Eu fa\u00e7o isso escrevendo os campos no arquivo de texto fict\u00edcio.<\/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>Agora, se voc\u00ea recarregar a p\u00e1gina que possui um formul\u00e1rio de coment\u00e1rio, o arquivo <code>test.txt<\/code>ser\u00e1 criado na pasta raiz. No meu caso, este arquivo possui o seguinte conte\u00fado.<\/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>Ele fornece claramente as chaves dos campos do formul\u00e1rio. Para o campo do site, a chave \u00e9 &#8216;url&#8217;. Portanto, irei modificar o c\u00f3digo acima da seguinte maneira, o que remover\u00e1 o campo do site do formul\u00e1rio de coment\u00e1rios.<\/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>No mesmo m\u00e9todo, voc\u00ea tamb\u00e9m pode remover outros campos do formul\u00e1rio de coment\u00e1rio.<\/p>\n<p>Espero que voc\u00ea entenda como personalizar o formul\u00e1rio de coment\u00e1rios no WordPress. Por favor, compartilhe seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n<h4>Artigos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/exibir-postagens-de-categorias-especificas-em-uma-pagina-do-wordpress\/\" title=\"Exibir postagens de categorias espec\u00edficas em uma p\u00e1gina do WordPress\" >Exibir postagens de categorias espec\u00edficas em uma p\u00e1gina do WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-layout-de-grade-de-alvenaria-no-wordpress\/\" title=\"Como adicionar layout de grade de alvenaria no WordPress\" >Como adicionar layout de grade de alvenaria no WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-exportar-postagens-para-csv-no-wordpress\/\" title=\"Como exportar postagens para CSV no WordPress\" >Como exportar postagens para CSV no WordPress<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quer personalizar o formul\u00e1rio de coment\u00e1rio no WordPress? Neste artigo, estudamos alguns ganchos de a\u00e7\u00e3o e filtro que nos ajudam a personalizar<\/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":[613],"tags":[848],"class_list":["post-28584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized-9","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/28584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=28584"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/28584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/21625"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=28584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=28584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=28584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}