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
(5 votos, promedio: 4,80 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.