C√≥mo dise√Īar el formulario de comentarios de WordPress (Gu√≠a definitiva)

¬ŅQuiere cambiar el estilo del formulario de comentarios de WordPress en su sitio? 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 alienta a los usuarios a participar en la discusi√≥n. 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 el aspecto de su sitio web. Cada tema de WordPress tiene diferentes archivos, incluidos archivos de plantilla, archivos de características, JavaScripts y hojas de estilo.

  

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

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

Además de CSS, es posible que deba agregar algunas funciones para cambiar el aspecto predeterminado de su formulario de comentarios de WordPress. Si no lo ha hecho antes, consulte nuestro artículo sobre cómo copiar y pegar código en WordPress.

Dicho esto, echemos un vistazo a c√≥mo dise√Īar el formulario de comentarios de WordPress.

Como se trata de una guía bastante completa, hemos creado una tabla de contenido para facilitar la navegación:

Cambie los comentarios de WordPress con clases CSS estándar Agregue inicio de sesión social al formulario de comentarios de WordPress Agregue texto de política de comentarios al formulario de comentarios de WordPress Mueva el campo de texto de comentarios a la parte inferior Elimine los campos del sitio web (URL del formulario de comentarios de WordPress) Agregue suscribirse a los comentarios de WordPress Agregar cuadro de acceso directo de comentarios

La mayoría de los temas de WordPress incluyen una plantilla llamada comments.php. Este archivo se utiliza para mostrar comentarios y formularios de comentarios en las publicaciones de tu blog. El formulario de comentarios de WordPress se genera con 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 texto para el texto del comentario, una casilla de verificación para el cumplimiento de RGPD y el botón Enviar.

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

#respond {}
 # reply-title {}
 # cancel-comment-reply-link {}
 #commentform {}
 #author {}
 #email {}
 #url {}
 #comentario
 #submit
 .comment-notes {}
 .required {}
 .comment-form-author {}
 .com-form-email {}
 .comment-form-url {}
 .com-form-comment {}
 .comment-form-cookies-consent {}
 .form-allowed-tags {}
 .Form a presentar

Simplemente ajustando estas clases CSS, puede cambiar completamente el aspecto de su formulario de comentarios de WordPress.

Sigamos adelante y tratemos de cambiar algunas cosas para que pueda tener una buena idea de cómo funciona.

Primero, comenzamos seleccionando el campo de formulario activo. Al seleccionar el campo activo actual, su formulario es m√°s accesible para las personas con necesidades especiales y tambi√©n hace que su formulario de comentarios se vea mejor en dispositivos m√°s peque√Īos.

#respond {
 fondo: #fbfbfb;
 padding:0 10px 0 10px;
 }
  
 / * Resaltar campo de formulario activo * /
  
 # input input (type = text), textarea {
   -webkit-transition: todos 0.30s facilidad de entrada;
   -moz transición: todos 0.30s facilidad de entrada;
   -ms-transition: todos 0.30s facilidad de entrada;
   -o-transición: todos 0.30s facilidad de entrada;
   esquema: ninguno;
   relleno: 3px 0px 3px 3px;
   margen: 5px 1px 3px 0px;
   borde: 1px sólido #DDDDDD;
 }
   
   
 # entrada de respuesta (tipo = texto): foco,
 de entrada (tipo = email): Focus,
 de entrada (tipo = url): enfoque,
 área de texto: foco {
 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:

Seleccionar campo de formulario de comentario activo

Con estas clases, puede cambiar el comportamiento de cómo se muestra el texto en los cuadros de entrada. Seguiremos adelante y cambiaremos el estilo de texto para el nombre del autor y el campo URL.

#autor, #email {
 Familia tipográfica: "Open Sans", "Droid Sans", Arial;
 font-style: cursiva;
 color: # 1d1d1d;
 carta de espaciado: .1em;
 }
  
 #url {
 color: # 1d1d1d;
 Familia tipográfica: "Luicida Console", "Courier New", "Courier", monoespacio;
 }

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

Cambiar el estilo de entrada para el formulario de comentarios

También puede cambiar el estilo del botón Enviar en el formulario de comentarios de WordPress. En lugar de usar el botón de envío estándar, demos un poco de gradiente CSS3 y sombra de cuadrícula.

#submit {
 fondo: -moz-linear-gradient (arriba, # 44c767 5%, # 5cbf2a 100%);
 fondo: -webkit-linear-gradient (arriba, # 44c767 5%, # 5cbf2a 100%);
 fondo: -o-linear-gradient (arriba, # 44c767 5%, # 5cbf2a 100%);
 fondo: -ms-linear-gradient (arriba, # 44c767 5%, # 5cbf2a 100%);
 fondo: gradiente lineal (hacia abajo, # 44c767 5%, # 5cbf2a 100%);
 background-color: # 44c767;
 -moz-border-radius: 28px;
 -webkit- frontera de radio: 28px;
 border-radius: 28px;
 borde: 1px sólido # 18ab29;
 mostrar: inline-block;
 Cursor: puntero;
 de color: #ffffff;
 font-family: Arial;
 font-size: 17px;
 acolchado: 16px 31px;
 text-decoration: none;
 sombra de texto: 0px 1px 0px # 2f6627;
 }
  
 #submit: hover {
 fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, color-stop (0.05, # 5cbf2a), color-stop (1, # 44c767));
 fondo: -moz-linear-gradient (arriba, # 5cbf2a 5%, # 44c767 100%);
 fondo: -webkit-linear-gradient (arriba, # 5cbf2a 5%, # 44c767 100%);
 fondo: -o-linear-gradient (arriba, # 5cbf2a 5%, # 44c767 100%);
 fondo: -ms-linear-gradient (arriba, # 5cbf2a 5%, # 44c767 100%);
 fondo: gradiente lineal (hacia abajo, # 5cbf2a 5%, # 44c767 100%);
 background-color: # 5cbf2a;
 }
 #submit: active {
 position: relative;
 top: 1px;
 }

Estilo de formulario de comentarios

Lleve el formulario de comentarios de WordPress al siguiente nivel

Puedes pensar que era demasiado básico. Tenemos que comenzar allí para que todos puedan seguirnos.

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

Agregar inicio de sesión social a los comentarios de WordPress

Comencemos agregando inicios de sesión sociales 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 información, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Despu√©s de la activaci√≥n, debe visitar Configuraci√≥n ¬ĽWP Social Login para configurar los ajustes del complemento.

Configuración de inicio de sesión social de WP

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

Una vez que haya ingresado sus claves API, haga clic en el botón Guardar configuración para guardar sus cambios.

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

Agregue botones de inicio de sesión social al formulario de comentarios

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

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

Queremos que nuestra política de comentarios sea prominente y visible para todos los usuarios que dejen un comentario. Es por eso que decidimos agregar la política de comentarios a 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 cambiarla seg√ļn sea necesario).

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

función wpbeginner_comment_text_before ($ arg) {
     $ arg ('comment_notes_before') = "";
     devolver $ arg;
 }
  
 add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before');

El código anterior reemplazará el formulario de comentarios estándar antes de las notas con este texto. También hemos agregado una clase CSS al código, para que podamos marcar la advertencia con CSS. Aquí está el ejemplo de CSS que usamos:

política de p.comment {
     borde: 1px sólido # ffd499;
     color de fondo: # fff4e5;
     radio del borde: 5px;
     acolchado: 10px;
     margen: 10px 0px 10px 0px;
¬†¬†¬†¬†¬†tama√Īo de fuente: peque√Īo;
     estilo de fuente: cursiva;
 }

Esto es lo que parecía en nuestra página de prueba:

Aviso de política de comentarios

Para ver el enlace para el área de texto de comentario, use el siguiente código.

función wpbeginner_comment_text_after ($ arg) {
     $ arg ('comment_notes_after') = "";
     devolver $ arg;
 }
  
 add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after');

No olvide cambiar la URL en consecuencia, vaya a su página de política de comentarios en lugar de example.com :)

Por defecto, el formulario de comentarios de WordPress muestra primero el área de texto de comentarios 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 de WordPress primero mostraban nombres, correos electr√≥nicos y campos del sitio y luego el campo de texto de comentarios. Creemos que nuestros usuarios est√°n acostumbrados a ver el formulario de comentarios en ese orden, por lo que a√ļn utilizamos el orden de campo anterior en WPBeginner.

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

función wpb_move_comment_field_to_bottom ($ fields) {
 $ comment_field = $ fields ('comentario');
 unset ($ fields ('comentario'));
 $ fields ('comment') = $ comment_field;
 devolver $ campos;
 }
  
 add_filter ('comment_form_fields', 'wpb_move_comment_field_to_bottom');

Este código simplemente mueve el campo en el área de texto del comentario hacia abajo.

√Ārea de texto de comentarios al final

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

El campo del sitio en el formulario de comentarios atrae a muchos spammers. Eliminarlo no detendr√° a los spammers ni reducir√° los comentarios de spam, pero ciertamente evitar√° que apruebes accidentalmente un comentario con un enlace al sitio web del autor equivocado.

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 cómo eliminar el campo URL del sitio del formulario de comentarios de WordPress

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

función wpbeginner_remove_comment_url ($ arg) {
     $ arg ('url') = '';
     devolver $ arg;
 }
 add_filter ('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Eliminar el campo URL del formulario de comentarios

Cuando los usuarios dejan un comentario en su sitio, pueden seguir ese hilo para ver si alguien ha respondido a su comentario. Agregar una suscripción a la casilla de verificación de 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 Actualizar suscribirse a comentarios. Al activar, 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 a los usuarios suscribirse a los comentarios en WordPress.

Suscríbase a los comentarios recargados

Las etiquetas r√°pidas son botones de formato que permiten a los usuarios dise√Īar f√°cilmente sus comentarios. Estos incluyen botones para conocer, poner en cursiva, agregar un enlace o una cita para bloques.

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

Por lo tanto, su formulario de comentarios se verá después de agregar etiquetas rápidas.

etiquetas r√°pidas en forma de comentarios

Esperamos que este art√≠culo lo haya ayudado a aprender c√≥mo dise√Īar el formulario de comentarios de WordPress para que sea m√°s divertido para sus usuarios. Tambi√©n puede consultar nuestros consejos para obtener m√°s comentarios en sus publicaciones de blog de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal YouTube para ver el video tutorial de WordPress. También nos puede encontrar en Twitter y Facebook.