Cómo diseñar el formulario de comentarios de WordPress (Guía definitiva)

¿Desea cambiar el estilo del formulario de comentarios de WordPress en su sitio web? Los comentarios juegan un papel importante en la construcción de la participación del usuario en un sitio web. Un formulario de comentarios atractivo y fácil de usar anima a los usuarios a participar en las discusiones. Es por eso que hemos creado la guía definitiva sobre cómo diseñar fácilmente el formulario de comentarios de WordPress.

Antes de empezar

Los temas de WordPress controlan la apariencia de tu sitio web. Cada tema de WordPress viene con varios archivos, incluidos archivos de plantilla, archivo de funciones, JavaScripts y hojas de estilo.

Las hojas de estilo contienen las reglas CSS para todos los elementos utilizados por su tema de WordPress. Puedes agregar tu propio CSS personalizado para anular las reglas de estilo de tu tema.

Si no ha hecho esto antes, consulte nuestro artículo sobre cómo agregar CSS personalizado en WordPress para principiantes.

Además de CSS, es posible que también deba agregar algunas funciones para modificar la apariencia predeterminada de su formulario de comentarios de WordPress. Si no ha hecho esto antes, consulte nuestro artículo sobre cómo copiar y pegar código en WordPress.

Dicho esto, veamos cómo diseñar el formulario de comentarios de WordPress.

Dado que esta es una guía bastante completa, hemos creado una tabla de contenido para facilitar la navegación:

• Cambiar los comentarios de WordPress con clases de CSS por defecto
• Agregando inicio de sesión social al formulario de comentarios de WordPress
• Agregar texto de política de comentarios en el formulario de comentarios de WordPress
• Mover el campo de texto del comentario a la parte inferior
• Eliminando el campo del sitio web (URL) del formulario de comentarios de WordPress
• Agregando Suscribirse a la casilla de Comentarios en WordPress
• Añadir etiquetas rápidas en los comentarios de WordPress

Cambiar el estilo de formulario de comentarios en WordPress

Dentro de la mayoría de los temas de WordPress hay una plantilla llamada comments.php. Este archivo se utiliza para mostrar comentarios y el formulario de comentarios en las publicaciones de su blog. El formulario de comentarios de WordPress se genera usando la función: .

De forma predeterminada, esta función genera su formulario de comentarios con tres campos de texto (Nombre, Correo electrónico y Sitio web), un campo de área de texto para el texto del comentario, una casilla de verificación para el cumplimiento de GDPR y el botón enviar.

Puede modificar fácilmente cada uno de estos campos simplemente ajustando las clases de CSS predeterminadas. A continuación se muestra una lista de las clases de CSS predeterminadas que WordPress agrega a cada formulario de comentarios.

 #responder  # reply-title  # cancel-comment-reply-link  #commentform  #author  #email  #url  #comment #submit .comment-notes  .required  .comment-form-author  .comment-form-email  .comment-form-url  .comment-form-comment  .comment-form-cookies-consent  .form-allowed-tags  .form-submit 

Simplemente ajustando estas clases de CSS, puede cambiar completamente la apariencia de su formulario de comentarios de WordPress.

Continuemos e intentemos cambiar algunas cosas para que pueda tener una buena idea de cómo funciona esto..

Primero, comenzaremos resaltando el campo de formulario activo. Resaltar el campo activo actualmente hace que su formulario sea más accesible para personas con necesidades especiales, y también hace que su formulario de comentarios se vea mejor en dispositivos más pequeños.

 #respond background: #fbfbfb; relleno: 0 10px 0 10px;  / * Resalte el campo de formulario activo * / # entrada de respuesta [tipo = texto], área de texto -webkit-transición: todos los 0.30s se despiden fácilmente; -moz-transición: todos los 0.30s de facilidad de entrada; -ms-transición: todos los 0.30s de facilidad de entrada; -o-transición: todos los 0.30s de facilidad de entrada; esquema: ninguno; relleno: 3px 0px 3px 3px; margen: 5px 1px 3px 0px; borde: 1px sólido #DDDDDD;  # entrada de entrada [type = text]: focus, input [type = email]: focus, input [type = url]: focus, textarea: focus box-shadow: 0 0 5px rgba (81, 203, 238, 1 ); margen: 5px 1px 3px 0px; borde: 2px rgba sólido (81, 203, 238, 1);  

Así es como se veía nuestro formulario en el tema de WordPress Twenty Sixteen después de los cambios:

Usando estas clases, puede cambiar el comportamiento de cómo aparece el texto dentro de los cuadros de entrada. Seguiremos adelante y cambiaremos el estilo de texto del nombre del autor y los campos de URL..

 #autor, #email font-family: "Open Sans", "Droid Sans", Arial; estilo de letra: cursiva; color: # 1d1d1d; espacio entre letras: .1em;  #url color: # 1d1d1d; font-family: "Luicida Console", "Courier New", "Courier", monospace;  

Si observa detenidamente la captura de pantalla a continuación, el nombre y la fuente del campo de correo electrónico son diferentes a la URL del sitio web..

También puede cambiar el estilo del botón de envío de formulario de comentarios de WordPress. En lugar de usar el botón de envío predeterminado, vamos a darle un poco de gradiente CSS3 y sombra de cuadro.

 #submit background: -moz-linear-gradient (top, # 44c767 5%, # 5cbf2a 100%); fondo: -webkit-linear-gradient (arriba, # 44c767 5%, # 5cbf2a 100%); fondo: -o-lineal-gradiente (arriba, # 44c767 5%, # 5cbf2a 100%); fondo: -ms-lineal-gradiente (arriba, # 44c767 5%, # 5cbf2a 100%); fondo: gradiente lineal (al final, # 44c767 5%, # 5cbf2a 100%); color de fondo: # 44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; radio del borde: 28px; borde: 1px sólido # 18ab29; pantalla: bloque en línea; cursor: puntero; color: #ffffff; Familia tipográfica: Arial; tamaño de fuente: 17px; relleno: 16px 31px; texto-decoración: ninguno; text-shadow: 0px 1px 0px # 2f6627;  #submit: hover background: -webkit-gradient (linear, left superior, left inferior, color-stop (0.05, # 5cbf2a), color-stop (1, # 44c767)); fondo: -moz-lineal-gradiente (arriba, # 5cbf2a 5%, # 44c767 100%); fondo: -webkit-linear-gradient (arriba, # 5cbf2a 5%, # 44c767 100%); fondo: -o-lineal-gradiente (arriba, # 5cbf2a 5%, # 44c767 100%); fondo: -ms-lineal-gradiente (arriba, # 5cbf2a 5%, # 44c767 100%); fondo: gradiente lineal (hacia abajo, # 5cbf2a 5%, # 44c767 100%); color de fondo: # 5cbf2a;  #submit: active position: relative; superior: 1px;  

Llevando los formularios de comentarios de WordPress al siguiente nivel

Usted podría estar pensando que eso era demasiado básico. Bueno, tenemos que empezar allí, para que todos puedan seguirlo..

Puede llevar su formulario de comentarios de WordPress al siguiente nivel reorganizando los campos de formulario, agregando inicio de sesión social, suscribiéndose a comentarios, pautas para comentarios, etiquetas rápidas y más.

Añadir Social login a WordPress Comentarios

Vamos a empezar con la adición de inicio de sesión social a los comentarios de WordPress.

Lo primero que debe hacer es instalar y activar el complemento de inicio de sesión social de WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Ajustes »WP Social Login página para configurar los ajustes del plugin.

El complemento requerirá claves de API para conectarse con las plataformas sociales. Verá enlaces con instrucciones sobre cómo obtener esta información para cada plataforma..

Después de ingresar sus claves de API, haga clic en el botón Guardar configuración para almacenar sus cambios.

Ahora puede visitar su sitio web para ver los botones de inicio de sesión social sobre su formulario de comentarios.

Agregar texto de política de comentarios antes o después del formulario de comentarios

Amamos a todos nuestros usuarios, y realmente apreciamos que se tomen unos minutos para dejar un comentario en nuestro sitio. Sin embargo, para crear un ambiente de discusión saludable es importante moderar los comentarios..

Para tener total transparencia, creamos una página de política de comentarios, pero no puedes simplemente poner este enlace en el pie de página.

Queríamos que nuestra política de comentarios fuera prominente y visible para todos los usuarios que están dejando un comentario. Es por esto que decidimos agregar la política de comentarios en nuestro formulario de comentarios de WordPress.

Si desea agregar una página de política de comentarios, lo primero que debe hacer es crear una página de WordPress y definir su política de comentarios (puede robar la nuestra y modificarla para satisfacer sus necesidades).

Después de eso, puede agregar el siguiente código en el archivo functions.php de su tema o en un complemento específico del sitio.

 function wpbeginner_comment_text_before ($ arg) $ arg ['comment_notes_before'] = "
Nos alegra que haya elegido dejar un comentario. Tenga en cuenta que los comentarios se moderan de acuerdo con nuestra política de comentarios..
"; devolver $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before'); 

El código anterior reemplazará el formulario de comentario predeterminado antes de las notas con este texto. También hemos agregado una clase de CSS en el código, para que podamos resaltar el aviso usando CSS. Aquí está el ejemplo de CSS que usamos:

 p.comment-policy border: 1px solid # ffd499; color de fondo: # fff4e5; radio del borde: 5px; relleno: 10px; margen: 10px 0px 10px 0px; tamaño de letra: pequeño; estilo de letra: cursiva;  

Así es como se veía en nuestro sitio de prueba:

Si desea mostrar el enlace después del área de texto de comentario, use el siguiente código.

 function wpbeginner_comment_text_after ($ arg) $ arg ['comment_notes_after'] = "
Nos alegra que haya elegido dejar un comentario. Tenga en cuenta que los comentarios se moderan de acuerdo con nuestra política de comentarios..
"; devolver $ arg; add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after'); 

No olvide cambiar la URL en consecuencia, por lo que va a la página de su política de comentarios en lugar de example.com

Mover campo de texto de comentario a la parte inferior

De forma predeterminada, el formulario de comentarios de WordPress muestra primero el área de texto del comentario y luego los campos de nombre, correo electrónico y sitio web. Este cambio fue introducido en WordPress 4.4..

Antes de eso, los sitios web de WordPress mostraban primero los campos de nombre, correo electrónico y sitio web, y luego el cuadro de texto de comentario. Sentimos que nuestros usuarios están acostumbrados a ver el formulario de comentarios en ese orden, por lo que todavía usamos el orden de campo anterior en WPBeginner.

Si desea hacerlo, entonces todo lo que necesita hacer es agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio.

 función wpb_move_comment_field_to_bottom ($ fields) $ comment_field = $ fields ['comment']; unset ($ fields ['comment']); $ fields ['comment'] = $ comment_field; devuelve $ campos;  add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom' 

Este código simplemente mueve el campo del área de texto de comentario a la parte inferior.

Eliminar el campo del sitio web (URL) del formulario de comentarios de WordPress

El campo del sitio web en el formulario de comentarios atrae a muchos spammers. Mientras que eliminarlo no detendrá a los spammers o incluso no reducirá los comentarios de spam, le evitará que apruebe accidentalmente un comentario con un enlace al sitio web de un mal autor.

También reducirá un campo del formulario de comentarios, haciéndolo más fácil y más fácil de usar. Para obtener más información sobre este tema, consulte nuestro artículo sobre la eliminación del campo de URL del sitio web del formulario de comentarios de WordPress

Para eliminar el campo de URL del formulario de comentarios, simplemente agregue el siguiente código a su archivo functions.php o un complemento específico del sitio.

 function wpbeginner_remove_comment_url ($ arg) $ arg ['url'] = "; return $ arg; add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url'); 

Agregar una casilla de verificación Suscribirse a comentarios en WordPress

Cuando los usuarios dejan un comentario en su sitio web, es posible que deseen realizar un seguimiento de ese hilo para ver si alguien ha respondido a su comentario. Al agregar una casilla para suscribirse a comentarios, permite a los usuarios recibir notificaciones instantáneas cada vez que aparece un nuevo comentario en la publicación..

Para agregar esta casilla de verificación, lo primero que debe hacer es instalar y activar el complemento Suscribirse a comentarios recargados. Tras la activación, debe visitar Configuración "Suscribirse a comentarios para configurar los ajustes del complemento.

Para obtener instrucciones detalladas paso a paso, consulte nuestro artículo sobre cómo permitir que los usuarios se suscriban a los comentarios en WordPress.

Añadir etiquetas rápidas en forma de comentario

Las etiquetas rápidas son botones de formato que permiten a los usuarios personalizar fácilmente sus comentarios. Estos incluyen botones para negrita, cursiva, agregar un enlace o blockquote.

Para agregar etiquetas rápidas, debe instalar y activar el complemento Etiquetas rápidas de comentarios básicos. Para obtener más información, consulte nuestro artículo sobre cómo agregar etiquetas rápidas fácilmente en el formulario de comentarios de WordPress.

Así es como se verá su formulario de comentarios después de agregar etiquetas rápidas.

Esperamos que este artículo le haya ayudado a aprender cómo diseñar el formulario de comentarios de WordPress para hacerlo más divertido para sus usuarios. También es posible que desee ver nuestros consejos para obtener más comentarios sobre las publicaciones de su blog de WordPress..

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..