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 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 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 comenzar

Los temas de WordPress controlan la apariencia de su sitio web. Cada tema de WordPress viene con varios archivos, incluidos archivos de plantilla, archivos de funciones, scripts de Java y hojas de estilo. Las hojas de estilo contienen reglas CSS para todos los elementos utilizados por su tema de WordPress. Puede agregar su propio CSS personalizado para anular las reglas de estilo de su tema. Si no lo ha hecho 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 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. Dado que esta es una guía bastante completa, hemos creado una tabla de contenido para facilitar la navegación:

Cambiar el estilo del formulario de comentarios en WordPress

En la mayoría de los temas de WordPress hay una plantilla llamada comments.php. Este archivo se utiliza para mostrar comentarios y un formulario de comentarios en las publicaciones de su blog. El formulario de comentarios de WordPress se genera mediante 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 cuadro de texto para el texto del comentario, una casilla de verificación para el cumplimiento de GDPR y el botón de envío. Puede cambiar fácilmente cada uno de estos campos simplemente modificando las clases CSS predeterminadas. A continuación se muestra una lista de las clases CSS predeterminadas que WordPress agrega a cada formulario de comentario. #respond {} # 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 modificando estas clases de CSS, puede cambiar completamente el aspecto de su formulario de comentarios de WordPress. Sigamos adelante e intentemos cambiar algunas cosas, para que pueda tener una buena idea de cómo funciona. Primero, comenzaremos resaltando el campo de formulario activo. Resaltar el campo actualmente activo hace que su formulario sea más accesible para personas con necesidades especiales y también hace que su formulario de comentarios sea más agradable en dispositivos pequeños. #respond {background: #fbfbfb; relleno: 0 10px 0 10px; } / * Resalta el campo de formulario activo * / #respond entrada[type=text], textarea {-webkit-transition: todas las entradas fáciles a 0,30 s; -moz-transición: todas las salidas de entrada 0,30 s; -ms-transición: todas las salidas de entrada 0,30 s; -o-transición: todas las salidas de entrada 0,30 s; esquema: ninguno; relleno: 3px 0px 3px 3px; margen: 5px 1px 3px 0px; borde: 1px sólido #DDDDDD; } # entrada correspondiente[type=text]: enfoque, entrada[type=email]: enfoque, entrada[type=url]: foco, área de texto: foco {box-shadow: 0 0 5px rgba (81, 203, 238, 1); margen: 5px 1px 3px 0px; borde: rgba sólido 2px (81, 203, 238, 1); } Así es como se veía nuestro formulario en el tema Twenty Sixteen de WordPress después de los cambios:

Con estas clases, puede modificar el comportamiento de la visualización del texto en los cuadros de entrada. Vamos a seguir adelante y cambiar el estilo de texto del nombre del autor y los campos de URL. #author, #email {font-family: "Open Sans", "Droid Sans", Arial; estilo de fuente: cursiva; color: # 1d1d1d; espaciado entre líneas: .1em; } #url {color: # 1d1d1d; familia de fuentes: "Luicida Console", "Courier New", "Courier", monoespacio; } Si observa detenidamente la captura de pantalla siguiente, el nombre y la fuente del campo de correo electrónico son diferentes de la URL del sitio web.

También puede cambiar el estilo del botón de envío del formulario de comentarios de WordPress. En lugar de usar el botón de envío predeterminado, démosle un degradado CSS3 y una sombra de cuadro. #submit {background: -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: degradado lineal (hacia abajo, # 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: bloquear en línea; cursor: puntero; color: #ffffff; familia tipográfica: Arial; tamaño de fuente: 17px; relleno: 16px 31px; decoración de texto: ninguna; sombra de texto: 0px 1px 0px # 2f6627; } #submit: hover {background: -webkit-gradient (lineal, arriba a la izquierda, abajo a la 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: degradado lineal (hacia abajo, # 5cbf2a 5%, # 44c767 100%); color de fondo: # 5cbf2a; } #submit: active {posición: relativa; alto: 1px; }

Lleve los formularios de comentarios de WordPress al siguiente nivel

Podrías pensar que es demasiado básico. Ahora, tenemos que empezar por ahí, para que todos puedan seguir. Puede llevar su formulario de comentarios de WordPress al siguiente nivel reorganizando los campos del formulario, agregando un inicio de sesión social, suscribiéndose a comentarios, directivas de comentarios, etiquetas rápidas y más.

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

Comencemos agregando conexiones 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 detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe visitar Configuración »WP Social Login página para configurar los ajustes del complemento.

El complemento requerirá claves API para conectarse a 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 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 un 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 una transparencia total, hemos creado una página de política de comentarios, pero no puede 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 dejen un comentario. Es por eso 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 establecer su política de comentarios (puede robar la nuestra y modificarla para que se adapte a 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 decidido dejar un comentario. Tenga en cuenta que los comentarios se moderan de acuerdo con nuestra política de comentarios.

"; return $ 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 agregamos una clase CSS en el código, para que podamos resaltar la usando CSS. Este es el ejemplo de CSS que usamos: p.comment-policy {border: 1px solid # ffd499; background-color: # fff4e5; border-radius: 5px; padding: 10px; margin: 10px 0px 10px 0px; font - size: small; font-style: italic;} Así es como se veía en nuestro sitio de prueba:

Si desea mostrar el enlace después del cuadro de texto del comentario, use el siguiente código. function wpbeginner_comment_text_after ($ arg) {$ arg['comment_notes_after'] = "

Nos alegra que haya decidido dejar un comentario. Tenga en cuenta que los comentarios se moderan de acuerdo con nuestra política de comentarios.

"; return $ arg;} add_filter ('comment_form_defaults', 'wpbeginner_comment_text_after'); Recuerde cambiar la URL en consecuencia, para que vaya a la página de su política de comentarios en lugar de example.com

Mover el campo de texto del comentario hacia abajo

De forma predeterminada, el formulario de comentarios de WordPress muestra primero el cuadro de texto del comentario, luego los campos de nombre, correo electrónico y sitio web. Este cambio se introdujo 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 del comentario. Sentimos que nuestros usuarios están acostumbrados a ver el formulario de comentarios en este orden, por lo que todavía estamos usando el antiguo orden de campos en MundoCMS. Si desea hacer esto, solo necesita agregar el siguiente código al archivo functions.php de su tema oa un complemento específico del sitio. función...