Cómo estilizar el formulario de comentarios de WordPress (Ultimate Guide)

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

Antes de empezar

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

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

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

Aparte de CSS, es posible que necesite agregar algunas funciones para modificar la apariencia predeterminada de su formulario de comentarios de WordPress. Si no lo has hecho antes, por favor lee nuestro artículo sobre cómo copiar y pegar código en WordPress.

Dicho esto, echemos un vistazo a cómo estilizar el formulario de comentarios de WordPress.

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

  • Cambiar los comentarios de WordPress con clases CSS predeterminadas
  • Adición de inicio de sesión social al formulario de comentarios de WordPress
  • Adición de texto de política de comentarios en el formulario de comentarios de WordPress
  • Mover el campo de texto del comentario a la parte inferior
  • Eliminar el campo Sitio Web (URL) del formulario de comentarios de WordPress
  • Adición de la casilla de verificación Suscribirse a comentarios en WordPress
  • Agregar Quicktags en Comentarios de WordPress

Cambiar el estilo del 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 formularios de comentarios en las entradas de su blog. El formulario de comentarios de WordPress se genera utilizando la función: .

Por defecto, 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 CSS por defecto. Abajo hay una lista de las clases CSS por defecto que WordPress añade a cada formulario de comentarios.

1234567891010111213141415161718#responder { } #reply-title { } #cancelar-enlace-replicar-enlace { }#commentform { }}commentform #author { } #email { } #url{ } #comentario #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 CSS, puedes cambiar completamente el aspecto de tu formulario de comentarios de WordPress.

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

Primero, empezaremos por resaltar el campo de formulario activo. Resaltar el campo actualmente activo hace que su formulario sea 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.

12345678910111213141415161718181920212223242526262728 #responder { fondo: #fbfbffbb;acolchado:010px010px;}  /* Resalte el campo de formulario activo */ #respuesta[type=text], textarea { -webkit-transition: all0.30s ease-in-out; -moz-transition: all0.30s ease-in-out; -ms-transition: all0.30s ease-in-out; -o-transition: -o-transition: all0.30s ease-in-out; outline: none; padding: 3px0px3px3px3px; margen: 5px1px3px0px; borde: 1pxsólido#DDDDDDDDD;}      #respuesta entrada[tipo=texto]:foco,entrada[tipo=email]:foco, entrada[tipo=url]:foco,textarea:foco {sombra de caja: 005pxrgba(81, 203, 238, 1);margen: 5px1px3px0px;borde: 2pxsolidrgba(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. Vamos a seguir adelante y cambiar el estilo de texto del nombre del autor y los campos URL.

1234567891011#autor, #email { familia de fuentes: "Open Sans", "Droid Sans", Arial;font-style:italic;color:#1d1d1d1d; espaciado de letras:.1em;}   #url { color: #1d1d1d1d;font-family: "Consola Luicida", "Courier New", "Courier", monoespacio; }

Si echa un vistazo de cerca en la captura de pantalla de abajo, 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 del formulario de comentarios de WordPress. En lugar de usar el botón de envío predeterminado, démosle un poco de gradiente CSS3 y sombra de caja.

123456789101112131414151617171819202122232425262728293031323334#submit {background:-moz-linear-gradient(top, #44c7675%, #5cbf2a100%);background:-webkit-linear-gradient(top, #44c7675%, #5cbf2a100%); background:-o-linear-gradient(top, #44c7675%, #5cbf2a100%); background:-ms-linear-gradient(top, #44c7675%, #5cbf2a100%); background:gradiente lineal (hasta abajo, #44c7675%, #5cbf2a100%); color de fondo:#44c767;-moz-border-radius:28px;-webkit-border-radius:28px;-radio-borde:28px;-radio-borde:28px;border:1pxsolid#18ab29;display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:17px;padding:16px31px;text-decoration:none;text-shadow:0px1px0px#2f6627;}   #enviar:hover {background:-webkit-gradient(linear, lefttop, lefttbottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));background:-moz-linear-gradient(top, #5cbf2a5%, #44c767100%);background:-webkit-linear-gradient(top, #5cbf2a5%, #44c767100%);background:-o-gradient(top, #5cbf2a5%, #44c767100%);background:-o-linear-gradient(top, #5cbf2a5%, #44c767100%);background:-gradiente lineal (arriba, #5cbf2a5%, #44c767100%); fondo: gradiente lineal (abajo, #5cbf2a5%, #44c767100%); color de fondo: #5cbf2a; }#submit:active { position:relative;top:1px;}.

Llevar los formularios de comentarios de WordPress al siguiente nivel

Podrías estar pensando que eso era demasiado básico. Bueno, tenemos que empezar por ahí, para que todos puedan seguirnos.

Puedes llevar tu formulario de comentarios de WordPress al siguiente nivel reorganizando los campos del formulario, añadiendo acceso social, suscribiéndote a comentarios, pautas para comentarios, etiquetas rápidas y mucho más.

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

Comencemos con la adición de inicios de sesión sociales a los comentarios de WordPress.

Lo primero que tienes que hacer es instalar y activar el plugin WordPress Social Login. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe visitar la página Settings " WP Social Login para configurar la configuración del plugin.

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

Después de introducir las claves de la API, haga clic en el botón Guardar configuración para guardar los cambios.

Ahora puede visitar su sitio web para ver los botones de acceso social encima de su formulario de comentarios.

Adición de texto de política de comentarios antes o después Formulario de comentario

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, hemos creado una página de política de comentarios, pero no puedes 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 eso que decidimos añadir la política de comentarios en nuestro formulario de comentarios de WordPress.

Si quieres añadir una página de política de comentarios, lo primero que tienes que hacer es crear una página de WordPress y definir tu política de comentarios (puedes robar la nuestra y modificarla para satisfacer tus necesidades).

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

123456functionwpbbeginner_comment_text_before($arg) { $arg[comment_notes_before] = " "

Nos alegra que haya elegido dejar un comentario. Por favor tenga en cuenta que los comentarios son moderados de acuerdo a nuestra política de comentarios.

"return$arg;} add_filter(comment_form_defaults, AprenderWP_comment_text_before);

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

123456789p.política de inicio { frontera: 1pxsolid#ffd499; color de fondo: #fff4e5; radio del borde: 5px; acolchado: 10px; margen: 10px0px10px0px; tamaño de fuente: pequeño; estilo de fuente: cursiva;}

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

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

123456functionwpbbeginner_comment_text_after($arg) { $arg[comment_notes_after] = " "

Nos alegra que haya elegido dejar un comentario. Por favor tenga en cuenta que los comentarios son moderados de acuerdo a nuestra política de comentarios.

"return$arg;} add_filter(comment_form_defaults, AprenderWP_comment_text_after);

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

Mover el campo de texto del comentario a la parte inferior

Por defecto, 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 comentarios. Sentimos que nuestros usuarios están acostumbrados a ver el formulario de comentarios en ese orden, así que todavía utilizamos el antiguo orden de campos en AprenderWP.

Si quieres hacer eso, entonces todo lo que tienes que hacer es añadir el siguiente código al archivo functions.php de tu tema o a un plugin específico del sitio.

12345678functionwpb_move_comment_field_to_bottom( $fields) {$comment_field= $fields[comment];unset( $fields[comment]]);$fields[comment] = $comment_field;return$fields;} add_filter(comment_form_fields, wpb_move_comment_comment_field_to_bottom.

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

Eliminar el campo Sitio Web (URL) del Formulario de comentarios de WordPress

El campo del sitio web en el formulario de comentarios atrae a muchos spammers. Si bien su eliminación no detendrá a los spammers ni reducirá los comentarios de spam, sin duda le ahorrará la aprobación accidental de un comentario con un enlace a un sitio web de mal autor.

También reducirá un campo del formulario de comentarios, haciéndolo más fácil y amigable para el usuario. Para más información sobre este tema, vea nuestro artículo sobre la eliminación del campo url del sitio web en el formulario de comentarios de WordPress

.

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

12345functionwpbbeginner_remove_comment_url($arg) { $arg[url] = ; return$arg;}add_filter(comment_form_default_fields, AprenderWP_remove_comment_url);

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

Cuando los usuarios dejan un comentario en su sitio web, es posible que deseen hacer un seguimiento de ese hilo para ver si alguien ha respondido a su comentario. Al añadir una casilla de verificación de suscripción a comentarios, permite a los usuarios recibir notificaciones instantáneas cada vez que aparece un nuevo comentario en el mensaje.

Para añadir esta casilla de verificación, lo primero que tienes que hacer es instalar y activar el plugin Suscribirse a Comentarios Recargados. Tras la activación, debe visitar Configuración " Suscribirse a Comentarios para configurar la configuración del plugin.

Para instrucciones detalladas paso a paso, vea nuestro artículo sobre cómo permitir a los usuarios suscribirse a los comentarios en WordPress.

Agregar etiquetas rápidas en el formulario de comentarios

Las etiquetas rápidas son botones de formato que permiten a los usuarios cambiar fácilmente el estilo de sus comentarios. Estos incluyen botones para poner en negrita, cursiva, añadir un enlace o una cita en bloque.

Para añadir quicktags, necesita instalar y activar el plugin Basic Comment Quicktags. Para más detalles, vea nuestro artículo sobre cómo añadir fácilmente etiquetas rápidas en el formulario de comentarios de WordPress.

Así es como se verá su formulario de comentarios después de añadir quicktags.

Esperamos que este artículo le haya ayudado a aprender a estilizar el formulario de comentarios de WordPress para que sea más divertido para sus usuarios. También puedes ver nuestros consejos para obtener más comentarios sobre tus entradas en el blog de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir