{"id":29386,"date":"2021-06-14T13:17:00","date_gmt":"2021-06-14T10:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29386"},"modified":"2021-10-17T16:18:16","modified_gmt":"2021-10-17T13:18:16","slug":"como-personalizar-el-formulario-de-comentarios-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-personalizar-el-formulario-de-comentarios-en-wordpress\/","title":{"rendered":"C\u00f3mo personalizar el formulario de comentarios en WordPress"},"content":{"rendered":"<p>WordPress viene con el formulario de comentarios en su n\u00facleo. Este formulario de comentarios se mostrar\u00e1 normalmente en sus publicaciones. Los visitantes pueden dejar sus comentarios utilizando el formulario de comentarios. Dar una funci\u00f3n de comentario para los visitantes le ayuda a comprender lo que piensan sobre su contenido. Le ayudar\u00e1 a mejorar su contenido y trabajar en otros comentarios tambi\u00e9n.<\/p>\n<p>De forma predeterminada, WordPress proporciona campos como el mensaje, el nombre, el correo electr\u00f3nico, el sitio web y la casilla de verificaci\u00f3n (para guardar sus datos en el navegador para el pr\u00f3ximo comentario) en el formulario de comentarios. Dependiendo de sus requisitos, es posible que deba agregar o eliminar campos de los formularios de comentarios.<\/p>\n<p>Tambi\u00e9n se puede querer agregar estilo al formulario de comentario renderizado. WordPress proporciona una clase \u00fanica para los campos de formulario y comentario. Con estas clases, los usuarios pueden aplicar su propio estilo.<\/p>\n<p>En este art\u00edculo, veremos c\u00f3mo agregar un campo m\u00e1s al formulario de comentarios existente. Como ejemplo, tomar\u00e9 un campo de n\u00famero de tel\u00e9fono m\u00f3vil y lo agregar\u00e9 al formulario. Entonces, para personalizar el formulario de comentarios, realizaremos los pasos a continuaci\u00f3n uno por uno.<\/p>\n<ul>\n<li>Agregar campo al formulario de comentarios<\/li>\n<li>Verifique si el campo est\u00e1 vac\u00edo o no<\/li>\n<li>Guardar este campo como meta de comentario<\/li>\n<li>Mostrar cuadro de meta en el formulario de edici\u00f3n de comentarios (en el backend)<\/li>\n<li>Guardar meta de comentario (desde el backend)<\/li>\n<\/ul>\n<p>Adem\u00e1s de esto, tambi\u00e9n le mostrar\u00e9 c\u00f3mo eliminar el campo del formulario de comentarios de WordPress.<\/p>\n<h3>Agregar campo al formulario de comentarios<\/h3>\n<p>El formulario de comentarios se procesa a partir de los archivos principales de WordPress y no debemos tocar ning\u00fan archivo principal. Afortunadamente, WordPress proporciona ganchos para ampliar las funcionalidades principales. Dicho esto, WordPress proporciona un gancho de acci\u00f3n <code>comment_form_after_fields<\/code>mediante el cual podemos agregar campos al formulario de comentarios.<\/p>\n<p>Agreguemos un n\u00famero de tel\u00e9fono m\u00f3vil usando este gancho de acci\u00f3n. Coloque el siguiente c\u00f3digo en el <code>functions.php<\/code>archivo.<\/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>Ahora, dir\u00edgete a tu p\u00e1gina web y vuelve a cargarla. Deber\u00eda ver el nuevo campo &#8216;N\u00famero de tel\u00e9fono m\u00f3vil&#8217; agregado a su formulario de comentarios.<\/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=\"C\u00f3mo personalizar el formulario de comentarios en WordPress\" ><\/a><\/p>\n<h3>Verifique si el campo est\u00e1 vac\u00edo o no<\/h3>\n<p>Este paso es opcional. Si no desea que un campo m\u00f3vil sea obligatorio, omita este paso. Si este campo es obligatorio, tenemos que verificar si los visitantes completaron este campo o no. Para agregar estas comprobaciones en tiempo de ejecuci\u00f3n, usaremos el filtro <code>preprocess_comment<\/code>. Cuando un usuario pulsa el bot\u00f3n enviar, este filtro comprueba si el campo espec\u00edfico est\u00e1 vac\u00edo o no. Si est\u00e1 vac\u00edo, detiene la ejecuci\u00f3n y muestra el mensaje a los usuarios.<\/p>\n<p>Utilice el filtro <code>preprocess_comment<\/code>como se muestra en el siguiente c\u00f3digo. Este c\u00f3digo tambi\u00e9n va dentro del <code>functions.php<\/code>archivo.<\/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>Guardar un campo nuevo con un comentario<\/h3>\n<p>En los pasos anteriores, hemos agregado un nuevo campo y tambi\u00e9n vimos c\u00f3mo hacerlo obligatorio. Ahora deber\u00edamos guardar este campo en la base de datos con el mismo comentario. Para lograr esto, usaremos la acci\u00f3n <code>comment_post<\/code>. Esta acci\u00f3n nos da el ID de comentario enviado actualmente. Usando la identificaci\u00f3n del comentario, podemos guardar nuestro campo m\u00f3vil con la <code>add_comment_meta<\/code>funci\u00f3n.<\/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>Aqu\u00ed, he usado la <code>wp_filter_nohtml_kses<\/code>funci\u00f3n para desinfectar los datos ingresados.<\/p>\n<h3>Mostrar cuadro de meta en el formulario de edici\u00f3n de comentarios (en el backend)<\/h3>\n<p>Hasta ahora hemos terminado de agregar un nuevo campo al formulario de comentarios de la interfaz y guardar este campo reci\u00e9n agregado. Ahora, como administrador, deber\u00eda ver este campo en el backend.<\/p>\n<p>Si va a la lista de comentarios en el backend, puede ver que cada comentario tiene su propio formulario de edici\u00f3n. Desde este formulario, el administrador puede editar el comentario. Nuestro pr\u00f3ximo objetivo es mostrar el n\u00famero de tel\u00e9fono m\u00f3vil en este formulario de edici\u00f3n de comentarios.<\/p>\n<p>Para ello, voy a agregar un metabox debajo del cual colocaremos el n\u00famero de m\u00f3vil. Use el c\u00f3digo a continuaci\u00f3n en el <code>functions.php<\/code>que agregar\u00e1 un cuadro meta con el n\u00famero de tel\u00e9fono m\u00f3vil.<\/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>Guardar meta de comentario (desde el backend)<\/h3>\n<p>Casi hemos terminado con la tarea. Lo \u00faltimo que queda es editar el n\u00famero de tel\u00e9fono m\u00f3vil cuando el administrador lo actualice. Se puede hacer f\u00e1cilmente con la ayuda de la <code>edit_comment<\/code>siguiente acci\u00f3n.<\/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>Se trata de agregar un nuevo campo personalizando el formulario de comentarios en WordPress. Ahora, veamos c\u00f3mo se pueden eliminar campos del formulario de comentarios.<\/p>\n<h3>Eliminar campo del formulario de comentario en WordPress<\/h3>\n<p>Como todos sabemos, WordPress proporciona algunos campos (mensaje, nombre, correo electr\u00f3nico, sitio web y casilla de verificaci\u00f3n) en el formulario de comentarios. Es posible que desee eliminar cualquiera de ellos. Supongamos que desea eliminar el campo del sitio web del formulario. Podemos hacer esto usando el filtro comment_form_default_fields. Debe conocer la clave del campo del sitio web. Ahora la pregunta es c\u00f3mo obtener las claves de los campos del formulario de comentarios.<\/p>\n<p>Lo hago escribiendo los campos en el archivo de texto ficticio.<\/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>Ahora, si vuelve a cargar la p\u00e1gina que tiene un formulario de comentarios, el archivo <code>test.txt<\/code>se crear\u00e1 en la carpeta ra\u00edz. En mi caso, este archivo tiene el siguiente contenido.<\/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>Claramente le da las claves de los campos de formulario. Para el campo del sitio web, la clave es &quot;url&quot;. Por lo tanto, modificar\u00e9 el c\u00f3digo anterior de la siguiente manera, lo que eliminar\u00e1 el campo del sitio web del formulario de comentarios.<\/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>En el mismo m\u00e9todo, tambi\u00e9n puede eliminar otros campos del formulario de comentarios.<\/p>\n<p>Espero que entiendas c\u00f3mo personalizar el formulario de comentarios en WordPress. Comparta sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/mostrar-publicaciones-de-una-categoria-especifica-en-una-pagina-de-wordpress\/\" title=\"Mostrar publicaciones de una categor\u00eda espec\u00edfica en una p\u00e1gina de WordPress\" >Mostrar publicaciones de una categor\u00eda espec\u00edfica en una p\u00e1gina de WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-agregar-diseno-de-cuadricula-de-mamposteria-en-wordpress\/\" title=\"C\u00f3mo agregar dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en WordPress\" >C\u00f3mo agregar dise\u00f1o de cuadr\u00edcula de mamposter\u00eda en WordPress<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-exportar-publicaciones-a-csv-en-wordpress\/\" title=\"C\u00f3mo exportar publicaciones a CSV en WordPress\" >C\u00f3mo exportar publicaciones a CSV en WordPress<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQuieres personalizar el formulario de comentarios en WordPress? En este art\u00edculo, estudiamos algunas acciones y ganchos de filtro que nos ayudan 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":[606],"tags":[849],"class_list":["post-29386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=29386"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/29386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/21625"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=29386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=29386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=29386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}