• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Modificar el formulario de comentarios en WordPress

Modificar el formulario de comentarios en WordPress

Modificar el formulario de comentarios WordPress

[ 24 octubre 2017 ] [ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Formulario de comentarios por defecto y modificado

A pesar de usar el theme Twenty Seventeen, las modificaciones que vamos a realizar son aplicables a cualquier timpo de theme

 

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.

Si revisamos detalladamente el código de la función comment_form() , veremos que dispone de varios filtros que podemos usar.

 

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.

También tienes el código completo de estas modificaciones en el siguiente enlace.

 

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 4,83 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Septimo

    7 mayo, 2018

    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…

    • Jhon Marreros Guzmán

      9 mayo, 2018

      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 = ”;

  2. deylyn

    25 agosto, 2018

    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

    • Jhon Marreros Guzmán

      27 agosto, 2018

      Hola, mejor escríbeme por el formulario de contacto y envíame la url para ver lo que comentas.

  3. CRISTIAN CAMILO CALDERÓN

    18 septiembre, 2018

    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’] = “”;

  4. Mari

    15 enero, 2019

    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”.

    • Jhon Marreros Guzmán

      18 enero, 2019

      Esos textos, los puedes modificar cambiando las traducciones, usa un plugin de cambio de textos de traducción como Loco Translate

      • Sofía

        11 diciembre, 2019

        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

        • Jhon Marreros Guzmán

          13 diciembre, 2019

          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

  5. EDD

    11 julio, 2019

    HOLA NO PUEDO PONER LA CAJA DE COMENTARIOS EN MI WEB AYUDA POR FAVRO YA LO ACTIVE PERO NO SALE USO WORDPREES

    • Jhon Marreros Guzmán

      12 julio, 2019

      Hola, revisa la configuración en Ajustes > Comentarios, todas las opciones de: Ajustes por defecto de las entradas, deberían estar activas.

  6. Guillermo

    17 agosto, 2019

    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.

    • Jhon Marreros Guzmán

      18 agosto, 2019

      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.

      • Guillermo

        18 agosto, 2019

        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.

  7. Hugo Peraza

    1 septiembre, 2019

    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.

    • Jhon Marreros Guzmán

      4 septiembre, 2019

      Hola, puedes revisar el siguiente artículo: https://decodecms.com/eliminar-campo-url-los-comentarios-wordpress/

  8. carla

    5 septiembre, 2019

    Hola quiero saber cómo modificar la apariencia de los comentarios finales, es decir lo que se ve luego de que son aprobado, gracias.

    • Jhon Marreros Guzmán

      7 septiembre, 2019

      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.

  9. Aixa

    31 marzo, 2020

    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.

    • Jhon Marreros Guzmán

      1 abril, 2020

      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.

  10. Alex

    17 mayo, 2020

    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!

    • Jhon Marreros Guzmán

      18 mayo, 2020

      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.

  11. julio

    28 julio, 2020

    muy bueno el post un saludo .

  12. Jorge Morales

    16 agosto, 2020

    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.

    • Jhon Marreros Guzmán

      19 agosto, 2020

      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/

  13. Alba

    29 octubre, 2020

    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!

    • Jhon Marreros Guzmán

      30 octubre, 2020

      Hola, podrías evaluar usar un plugin para esto que comentas, revisa por ejemplo: https://es.wordpress.org/plugins/gs-facebook-comments/

  14. Gonzalo Andres Gutierrez

    20 enero, 2021

    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!

    • Jhon Marreros Guzmán

      21 enero, 2021

      Gracias por el aporte. Saludos.

  15. antonio pestana

    13 marzo, 2021

    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”

    • Jhon Marreros Guzmán

      16 marzo, 2021

      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.

      • antonio pestana

        18 marzo, 2021

        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

        • Jhon Marreros Guzmán

          22 marzo, 2021

          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.

  16. Jorge Ivorra Sanz

    24 abril, 2021

    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

    • Jhon Marreros Guzmán

      28 abril, 2021

      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”

  17. Desiree

    22 mayo, 2021

    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

    • Jhon Marreros Guzmán

      22 mayo, 2021

      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”

  18. Felipe

    21 diciembre, 2021

    Me gusta este formato de comentarios el que estamos usando.
    Es un plugin? O es el por defecto del theme?

    • Jhon Marreros Guzmán

      27 diciembre, 2021

      Hola, es personalizado en base al tema.

  19. Samuel

    14 julio, 2022

    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.

    • Jhon Marreros Guzmán

      16 julio, 2022

      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.

  20. Facundo

    2 septiembre, 2022

    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

    • Jhon Marreros Guzmán

      5 septiembre, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar archivos de fuentes tipográficas en WordPress

Anterior y siguiente en la página de producto de WooCommerce

Crear usuario Administrador de WordPress desde la Base de Datos

Agregar redes sociales en la cabecera de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados