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
+en+WordPress/usar-csp-en-WordPress.svg)
(3 votos, promedio: 4,67 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 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.