¿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:
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.
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;
}
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.
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.
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:
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.
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');
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.
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.
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.