La mayoría de themes no cambian la forma en que se muestra el formulario de comentarios de WordPress, en este artículo aprenderás cómo realizar modificaciones al formulario de comentarios de WordPress y darle un diseño más atractivo.
1- Generalidades
En un artículo anterior habíamos visto cómo eliminar el campo de URL del formulario de comentarios, sin embargo en este artículo vamos a profundizar y hacer modificaciones adicionales.
Vamos a usar el theme Twenty Seventeen, la apariencia del formulario de comentarios por defecto y cómo quedará al final se puede ver en la siguiente imagen:
2- Realizando las modificaciones en código
La función que crea el formulario de registro es la función comment_form(), esta función acepta como uno de sus argumentos un array con los nombres de los diferentes campos, es una manera de hacer las modificaciones, sin embargo en este artículo veremos como hacer las modificaciones a través de filtros.
2.1 Filtro para cambiar la estructura de los campos
Usaremos el filtro comment_form_defaults, nos basaremos en la estructura por defecto y haremos modificaciones en base a esta estructura.
add_filter( 'comment_form_defaults', 'dcms_modify_fields_form' );
function dcms_modify_fields_form( $args ){
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$author = '<input placeholder="'.__( 'Name' ) . ( $req ? ' *' : '' ).'" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .'" size="30"' . $aria_req . ' />';
$email = '<div class="fields-wrap"><input placeholder="'.__( 'Email' ) . ( $req ? ' *' : '' ).'" id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .'" size="30"' . $aria_req . ' />';
$url = '<input placeholder="'.__( 'Website' ).'" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .'" size="30" /></div>';
$comment = '<textarea placeholder="'. _x( 'Comment', 'noun' ).'" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>';
$args['fields']['author'] = $author;
$args['fields']['email'] = $email;
$args['fields']['url'] = $url;
$args['comment_field'] = $comment;
return $args;
}
Las modificaciones hechas en el código anterior fueron:
- Eliminar los labels, ya que los textos irán como placeholder
- Colocar placeholders con el nombre del label eliminado
- El asterisco que indica requerido será parte del placeholder
- Envolver el campo de email y url para que vayan en un mismo contenedor.
2.2 Filtro para cambiar el orden de los campos
El filtro anterior no nos permite cambiar el orden sólo podemos cambiar el HTML de los campos, para cambiar el orden y hacer que los campos de nombre, correo y url se muestren antes del campo de comentario entonces usaremos el filtro comment_form_fields
add_filter( 'comment_form_fields', 'dcms_modify_order_fields' );
function dcms_modify_order_fields( $fields ){
$val = $fields['comment'];
unset($fields['comment']);
$fields += array('comment' => $val );
return $fields;
}
Las modificaciones hechas en el código anterior básicamente implica cambiar de posición el elemento del array asociativo con id ‘comment’, de manera que los campos de nombre, correo y web se muestren antes.
4- CSS para mejorar el diseño
Finalmente usaremos código CSS para darle un diseño más atractivo en base a la estructura anterior, dar márgenes y para que los campos de email y url se muestren en la misma línea.
#commentform input,
#commentform textarea{
margin-top:15px;
}
@media (min-width:678px){
#commentform #email{
width:49%;
float:left;
}
#commentform #url{
width:48%;
float:right;
}
#commentform .fields-wrap:after{
content:"";
display: block;
clear:both;
}
}
¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos anteriores.
Artículos Relacionados
(6 votos, promedio: 4,83 de 5)
Cargando...
hola amigo, necesito una ayuda urgente, utilizo el tema Human en mi pagina, quiero quitar de la caja de comentarios el email, es muy molesto, no quiero que los usuarios lo tengan que poner, ya lo desactive de la opción del tema, pero sigue apareciendo, quiero quitarlo totalmente, que no aparezca esa caja…
Hola, has probado con el código del punto 2.1 de este artículo?, es decir en lugar de un campo de correo HTML puedes probar una cadena en blanco, es decir: $email = ”;
hola, no encuentro la manera de poner bonito el formulario de los comentarios por defecto de wordpress.y las cajas de texto ni se diga…las cajas de texto es mas fácil, pero la parte donde se ven los comentarios me sale muy fea, porque no tengo un tema de wordpress, si no uno personalizado
Hola, mejor escríbeme por el formulario de contacto y envíame la url para ver lo que comentas.
Gracias me sirvió para lo que quería, que era poner al final los comentarios y no mostrar la url para lo cual envie $args[‘fields’][‘url’] = “”;
Hola. Muy interesante tu artículo, pero a mi también me interesa saber cómo cambiar el “Leave a comment” y quitar “tu dirección de correo no será publicada”.
Esos textos, los puedes modificar cambiando las traducciones, usa un plugin de cambio de textos de traducción como Loco Translate
Hola! Instalé el Loco Translate en mi sitio y sigo viendo fragmentos del tema en inglés (be the first to reply, por ejemplo). ¿Qué tengo que hacer además de activar el plug in?
Gracias!
Sofi
Hola Sofia, revisa este artículo que explica cómo usar Loco Translate: https://www.webempresa.com/blog/traduce-temas-y-plugins-desde-tu-wordpress.html
HOLA NO PUEDO PONER LA CAJA DE COMENTARIOS EN MI WEB AYUDA POR FAVRO YA LO ACTIVE PERO NO SALE USO WORDPREES
Hola, revisa la configuración en Ajustes > Comentarios, todas las opciones de: Ajustes por defecto de las entradas, deberían estar activas.
Hola, Jhon.
En primer lugar, me gustaría agradecerte la extraordinaria utilidad de tu sitio. Descubrí DecodeCMS hace apenas dos semanas y, desde entonces, me suscribí y me ha ayudado muchísimo a sacar adelante la web personal que estoy construyendo.
En relación con este artículo sobre modificar el formulario de comentarios, quería consultarte una cuestión que no he encontrado reflejada aquí: en los campos ‘Nombre’ y ‘Correo electrónico’ del formulario de comentarios de mi sitio, no logro que desaparezcan los asteriscos * de ‘opción requerida’.
Cuando en los ajustes de Comentarios de mi WordPress desmarco la casilla ‘El autor del comentario debe rellenar el nombre y el correo electrónico’, entonces, en efecto, es posible enviar comentarios sin rellenar esos campos, PERO los asteriscos siguen estando ahí. No desaparecen.
En fin, no sé si hay alguna manera de solucionar este problema.
Muchas gracias de nuevo por la claridad, sencillez y eficacia de tus artículos.
Un cordial saludo.
Hola, según lo que comentas es posible que el theme que usas coloque directamente los asteriscos, lo más práctico sería ocultarlo por CSS, si tienes dificultades comunícate por el formulario de contacto con la url de tu sitio. Saludos.
Hola, Jhon.
Antes de tu respuesta, me puse a probar cosas y lo he solucionado añadiendo el código que facilitas en el punto 2.1 de este artículo. No sé si era cuestión de CSS, pero ahora los asteriscos aparecen y desaparecen cuando deben y, además, mi formulario de comentarios ha quedado un poco mejor estéticamente.
Mil gracias por tu interés y enhorabuena otra vez por tu extraordinario sitio.
Un cordial saludo.
Hola, eh llegado a tu sitio buscando ayuda para quitar un campo del formulario de comentarios, ya que cuento con un Sitio en WordPress donde no se requiere el campo Web, a pesar de que no es obligatorio los usuarios no tan familiarizados evitan usar un formulario cuando no entienden algún campo o dato.
¿Tendrás algún método para eliminar este campo del formulario sin la necesidad de instalar algún plugin?
Espero que puedas ayudarme.
Hasta pronto.
Hola, puedes revisar el siguiente artículo: https://decodecms.com/eliminar-campo-url-los-comentarios-wordpress/
Hola quiero saber cómo modificar la apariencia de los comentarios finales, es decir lo que se ve luego de que son aprobado, gracias.
Hola, la apariencia depende de tu theme, sin embargo si quieres hacer mejoras tendrías que usar CSS, puedes escribirme a través del formulario de contacto y enviarme la url de tu sitio para ver más detalle. Saludos.
Hola, a mi me gustaria dejar la caja de comentarios pero q desaparezcan las cajas de nombre, email y website. No estoy interesada en recoger datos, tan solo recogeria la reseña. Eso puedo hacerlo? Me encantaria q me orientases, estoy un poco perdida y tampoco se mucho sobre codigo. Gracias de antemano.
Hola, puedes configurar estos campos desde Ajustes > Comentarios > Otros ajustes de comentarios > El autor del comentario debe rellenar el nombre y el correo electrónico.
Como puedo poner un borde (un recuadro) a toda la caja de comentarios?
También quisiera quitar la casilla: “Guardar mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.”, ya que no quiero ni me interesa que se queden guardados los datos en mi web.
Gracias!
Hola, para poner un borde tienes que usar CSS, pero sin saber el código que se genera en tu sitio no puedo darte más detalles. Si sigues con problemas mejor comunícate por el formulario de contacto.
Con respecto a tu otra duda desde Ajustes > Comentarios, busca: “Mostrar la casilla de verificación de aceptación de cookies en los comentarios…”, tienes que desmarcar esta opción.
muy bueno el post un saludo .
Hola, Jhon gracias por compartir tus conocimientos, me ayudó a mejorar mucho la caja de comentarios que trae por defecto wordpress, como puedo hacer para cambiar el título que indica Deja tu respuesta por Deja tu comentario. Te envío el enlace.
Gracias.
Hola, el texto que comentas es parte de los textos de traducción, puedes usar un plugin como Loco Translate para esto o hacerlo por código, revisa: https://decodecms.com/cambiar-textos-de-traduccion-en-wordpress/
Hola Jhon,
Como puedo habilitar que comenten por facebook y otras rrss? He visto en algunos blog que puedes conectarte y comentar con tu cuenta de facebook.
Mil gracias!
Hola, podrías evaluar usar un plugin para esto que comentas, revisa por ejemplo: https://es.wordpress.org/plugins/gs-facebook-comments/
Hola! Buen artículo y muy bien explicado. A continuación me gustaría aportar un fragmento de código CSS que utilizo para que los campos queden sombreados y darle un poco más de personalización.
border-radius: 50px;
box-shadow: 20px 20px 60px #4D4D4D;
Estas propiedades hacen redondeadas las esquinas (por defecto vienen en angulos de 90 grados) y agregan una sombra oscura.
Saludos y espero aportar!
Gracias por el aporte. Saludos.
amigo excelente articulo, será posible colocar la caja de comentario arriba de los comentarios y no al final como viene por defecto, y también me gustaría agregar otro campo al formulario como “De donde nos escribe” o “País”
Hola, para cambiar el orden revisa el punto 2.2 del artículo, para agregar otro campo lo veo más complicado, podriás evaluar usar el de URL en su lugar cambiando el texto.
Saludos hermano, el orden de los campos de la caja de comentarios los cambie sin problema con el filtro comment_form_fields siguiendo tu ejemplo, puse de primero el nombre y el email uno alado del otro y por debajo el campo de comentario eliminado el campo de website lo que quiero ahora es colocar todos estos campos por encima de los comentarios, que primero salga el formulario y luego los comentarios dejados por los usuarios y para esto no sé cómo aplicar el filtro que variables usar si me podrías facilitar un código de ejemplo me seria de mucha ayuda
Hola, en ese caso tienes que modificar los archivos de tu theme, posiblemente tengas un archivo comments.php en donde puedes localizar esas secciones y hacer los cambios.
Hola! Mucho gusto!! Tengo un problema. Los campos donde indica que se debe de rellenar. Por ejemplo: Nombre, Email, Teléfono… no aparece nada nose como solucionarlo de ninguna manera. Le adjunto la dire en los datos de website por si pudiera ayudarme. Hasta he pensado en buscar un plugin para sustituir el sistema de comentarios. Pero tampoco es facil de encontrar. Un saludo. Mucho gusto de haber encontrado su página
Hola, lo que sucede es que en tu sitio tienes habilitado los comentarios sólo para usuarios registrados. Revisa en Ajustes > Comentarios, el campo “Los usuarios deben registrarse y acceder para comentar”
buenos días Jhon,
tengo un problema en las entradas de mi blog, no me deja comentar pone :
DEJA UNA RESPUESTA
Lo siento, debes estar conectado para publicar un comentario.
Como lo puedo solucionar, estoy por lanzar el blog y estoy haciendo prueba y he visto esto.
Un saludo
Hola, revisa desde la administración de WordPress: Ajustes > Comentarios, es posible que tengas habilitada la opción: “Los usuarios deben registrarse y acceder para comentar”
Me gusta este formato de comentarios el que estamos usando.
Es un plugin? O es el por defecto del theme?
Hola, es personalizado en base al tema.
Hola Jhon, excelente guía me ha ayudado bastante.
Estoy trabajando en mi sitio web con Elementor y su tema Hello Elementor, todo perfecto excepto la parte de los comentarios ya que Elementor no ofrece ningún tipo de personalización en los comentarios, todos los estilos los hereda del tema y Hello Elementor al ser un tema super simple de WordPress se me ha complicado mucho darle el estilo que estoy usando en mi web.
He personalizado el formulario de comentarios gracias a tu ayuda pero aun faltan bastantes cosas que quiero mejorar y no consigo lograr, como por ejemplo:
-Mostrar los comentarios DESPUES del formulario de comentarios
-Personalizar como se ven los comentarios de los usuarios y la respuestas a dichos comentarios
-Desplegar el rating que los usuarios dan a la publicación a un lado de su nombre y muchas cosas mas
¿Conoces de alguna guía que me pueda ayudar a profundizar? ¿O en su defecto brindas algún tipo de servicio para lograr lo que estoy buscando? Mi falla es con el tema del PHP, con el HTML y CSS logro defenderme.
De antemano muchas gracias por tu respuesta y un saludo desde Venezuela.
Hola Samuel, según lo que comentas quieres darle estilos a tus comentarios, puedes ayudarte del inspector de código y agregar estilos que puedes ir agregando a tu archivos style.css, en este artículo trato de manera general ese proceso: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/
Saludos.
Hola Jhon, estoy intentando cambiar el orden, pero del formulario completo del comentario, o sea que se vea al final de la página, por que en movil, se ve ni bien termina el post, y en el widget tengo otro form de consulta. Y como aparece primero el de comentarios consultan alli en vez de en el form correspondiente.
Conoces alguna manera de cambiar el orden de donde se muestra el form de comentarios en la version movile?
Gracias por tu aporte
Hola, estructuralmente te complicarías, algo que podrías evaluar es mostrar tu formulario de consulta al final de todas las entradas, de esta forma aparecerá siempre antes que los comentarios.
Hola Jhon, no sé si podrías decirme cómo incluir un check de Política de privacidad y otro check de “Desmarca esta opción si no quieres suscribirte automáticamente a nuestra lista de boletines”, para los formularios tengo un plugin Flamingo y puedo sacar un csv y filtrar los que se suscriben…¿puede haber algo por el estilo?
Hola, con Flamingo al construir el formulario puedes agregar estos campos adicionales y al exportarlos a un archivo .csv deberías ver lo que llenaron tus usuarios.
Saludos.
Hola, quisiera hacer una consulta, tengo un formulario en el que seleccionan un nombre que es un directivo de curso y está asociado al mail al cual se enviará el formulario, para esto en el campo de selección coloqué:
M.E.P. J.S. TN – Silvana Casas|mepjs444xo655@gmail.com
De esta manera cuando uso [field id=”Directivo”] me selecciona el email para envairlo, lo que me está faltando es cómo hago para que también me aparezca el cargo y nombre de la persona cuando coloco el campo en el mail de respuesta, ya que sólo me aparece el mail.
O sea como lo tengo hoy, me manda el mail a la dirección correcta y en el cuerpo del mail el campo me aparece como:
mepjs444xo655@gmail.com
Y necesito que aparezca:
M.E.P. J.S. TN – Silvana Casas|mepjs444xo655@gmail.com
Hola, podrías probar guardar los datos faltantes como campos ocultos HTML, estos cambiaran en cada selección, por lo que posiblemente tengas que usar javascript. Lo otro es que consultes el resto de datos a la BD teniendo el correo de usuario.
Saludos.